From b1e30a0fa89f497ad2c5491e2c2862ff630e8c5c Mon Sep 17 00:00:00 2001
From: romanetar <roman_ag@hotmail.com>
Date: Mon, 16 Dec 2024 14:25:41 +0100
Subject: [PATCH] feat: inventory item crud pages (WIP)

---
 .env.example                                  |   4 +-
 src/actions/inventory-item-actions.js         | 192 ++++++++++++++++++
 src/app.js                                    |   1 +
 src/components/form-repeater/index.js         |  67 ++++++
 src/components/forms/inventory-item-form.js   | 175 ++++++++++++++++
 src/components/menu/index.js                  |  11 +
 src/i18n/en.json                              |  23 ++-
 src/layouts/inventory-item-layout.js          |  55 +++++
 src/layouts/primary-layout.js                 |   5 +
 src/layouts/sponsor-inventory-layout.js       |  42 ++++
 .../edit-inventory-item-page.js               |  73 +++++++
 .../sponsors_inventory/inventory-list-page.js | 157 ++++++++++++++
 .../inventory-item-list-reducer.js            | 102 ++++++++++
 .../inventory_items/inventory-item-reducer.js |  98 +++++++++
 src/store.js                                  |  16 +-
 15 files changed, 1013 insertions(+), 8 deletions(-)
 create mode 100644 src/actions/inventory-item-actions.js
 create mode 100644 src/components/form-repeater/index.js
 create mode 100644 src/components/forms/inventory-item-form.js
 create mode 100644 src/layouts/inventory-item-layout.js
 create mode 100644 src/layouts/sponsor-inventory-layout.js
 create mode 100644 src/pages/sponsors_inventory/edit-inventory-item-page.js
 create mode 100644 src/pages/sponsors_inventory/inventory-list-page.js
 create mode 100644 src/reducers/inventory_items/inventory-item-list-reducer.js
 create mode 100644 src/reducers/inventory_items/inventory-item-reducer.js

diff --git a/.env.example b/.env.example
index f4a232a14..4fc27b7be 100644
--- a/.env.example
+++ b/.env.example
@@ -5,6 +5,7 @@ REPORT_API_BASE_URL=
 MARKETING_API_BASE_URL=
 EMAIL_API_BASE_URL=
 FILE_UPLOAD_API_BASE_URL=
+INVENTORY_API_BASE_URL=
 SIGNAGE_BASE_URL=
 PRINT_APP_URL=https://badge-print-app.dev.fnopen.com
 PUB_API_BASE_URL=
@@ -12,7 +13,8 @@ OS_BASE_URL=
 SCOPES_BASE_REALM=${API_BASE_URL}
 EMAIL_SCOPES="clients/read templates/read templates/write emails/read"
 FILE_UPLOAD_SCOPES="files/upload"
-SCOPES="profile openid offline_access ${EMAIL_SCOPES} ${FILE_UPLOAD_SCOPES} ${SCOPES_BASE_REALM}/summits/delete-event ${SCOPES_BASE_REALM}/summits/write ${SCOPES_BASE_REALM}/summits/write-event ${SCOPES_BASE_REALM}/summits/read/all ${SCOPES_BASE_REALM}/summits/read ${SCOPES_BASE_REALM}/summits/publish-event ${SCOPES_BASE_REALM}/members/read ${SCOPES_BASE_REALM}/members/read/me ${SCOPES_BASE_REALM}/speakers/write ${SCOPES_BASE_REALM}/attendees/write ${SCOPES_BASE_REALM}/members/write ${SCOPES_BASE_REALM}/organizations/write ${SCOPES_BASE_REALM}/organizations/read ${SCOPES_BASE_REALM}/summits/write-presentation-materials ${SCOPES_BASE_REALM}/summits/registration-orders/update ${SCOPES_BASE_REALM}/summits/registration-orders/delete ${SCOPES_BASE_REALM}/summits/registration-orders/create/offline ${SCOPES_BASE_REALM}/summits/badge-scans/read entity-updates/publish ${SCOPES_BASE_REALM}/audit-logs/read"
+INVENTORY_API_SCOPES="inventory-items/get inventory-items/add inventory-items/update inventory-items/delete"
+SCOPES="profile openid offline_access ${EMAIL_SCOPES} ${FILE_UPLOAD_SCOPES} ${INVENTORY_API_SCOPES} ${SCOPES_BASE_REALM}/summits/delete-event ${SCOPES_BASE_REALM}/summits/write ${SCOPES_BASE_REALM}/summits/write-event ${SCOPES_BASE_REALM}/summits/read/all ${SCOPES_BASE_REALM}/summits/read ${SCOPES_BASE_REALM}/summits/publish-event ${SCOPES_BASE_REALM}/members/read ${SCOPES_BASE_REALM}/members/read/me ${SCOPES_BASE_REALM}/speakers/write ${SCOPES_BASE_REALM}/attendees/write ${SCOPES_BASE_REALM}/members/write ${SCOPES_BASE_REALM}/organizations/write ${SCOPES_BASE_REALM}/organizations/read ${SCOPES_BASE_REALM}/summits/write-presentation-materials ${SCOPES_BASE_REALM}/summits/registration-orders/update ${SCOPES_BASE_REALM}/summits/registration-orders/delete ${SCOPES_BASE_REALM}/summits/registration-orders/create/offline ${SCOPES_BASE_REALM}/summits/badge-scans/read entity-updates/publish ${SCOPES_BASE_REALM}/audit-logs/read"
 GOOGLE_API_KEY=
 ALLOWED_USER_GROUPS="super-admins administrators summit-front-end-administrators summit-room-administrators track-chairs-admins sponsors"
 APP_CLIENT_NAME = "openstack"
diff --git a/src/actions/inventory-item-actions.js b/src/actions/inventory-item-actions.js
new file mode 100644
index 000000000..960130bab
--- /dev/null
+++ b/src/actions/inventory-item-actions.js
@@ -0,0 +1,192 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import T from "i18n-react/dist/i18n-react";
+import {
+  getRequest,
+  putRequest,
+  postRequest,
+  deleteRequest,
+  createAction,
+  stopLoading,
+  startLoading,
+  showMessage,
+  showSuccessMessage,
+  authErrorHandler,
+  escapeFilterValue
+} from "openstack-uicore-foundation/lib/utils/actions";
+import history from "../history";
+import { getAccessTokenSafely } from "../utils/methods";
+import {
+  DEFAULT_CURRENT_PAGE,
+  DEFAULT_ORDER_DIR,
+  DEFAULT_PER_PAGE
+} from "../utils/constants";
+
+export const ADD_INVENTORY_ITEM = "ADD_INVENTORY_ITEM";
+export const CHANGE_INVENTORY_ITEM_SEARCH_TERM =
+  "CHANGE_INVENTORY_ITEM_SEARCH_TERM";
+export const INVENTORY_ITEM_ADDED = "INVENTORY_ITEM_ADDED";
+export const INVENTORY_ITEM_DELETED = "INVENTORY_ITEM_DELETED";
+export const INVENTORY_ITEM_UPDATED = "INVENTORY_ITEM_UPDATED";
+export const RECEIVE_INVENTORY_ITEM = "RECEIVE_INVENTORY_ITEM";
+export const RECEIVE_INVENTORY_ITEMS = "RECEIVE_INVENTORY_ITEMS";
+export const REQUEST_INVENTORY_ITEMS = "REQUEST_INVENTORY_ITEMS";
+export const RESET_INVENTORY_ITEM_FORM = "RESET_INVENTORY_ITEM_FORM";
+export const UPDATE_INVENTORY_ITEM = "UPDATE_INVENTORY_ITEM";
+
+export const getInventoryItems =
+  (
+    term = null,
+    page = DEFAULT_CURRENT_PAGE,
+    perPage = DEFAULT_PER_PAGE,
+    order = "id",
+    orderDir = DEFAULT_ORDER_DIR
+  ) =>
+  async (dispatch) => {
+    const accessToken = await getAccessTokenSafely();
+    const filter = [];
+
+    dispatch(startLoading());
+
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filter.push(`name=@${escapedTerm}`);
+    }
+
+    const params = {
+      page,
+      fields: "id,code,name",
+      per_page: perPage,
+      access_token: accessToken
+    };
+
+    if (filter.length > 0) {
+      params["filter[]"] = filter;
+    }
+
+    // order
+    if (order != null && orderDir != null) {
+      const orderDirSign = orderDir === 1 ? "+" : "-";
+      params.order = `${orderDirSign}${order}`;
+    }
+
+    return getRequest(
+      createAction(REQUEST_INVENTORY_ITEMS),
+      createAction(RECEIVE_INVENTORY_ITEMS),
+      `${window.INVENTORY_API_BASE_URL}/api/v1/inventory-items/`,
+      authErrorHandler,
+      { order, orderDir, page, term }
+    )(params)(dispatch).then(() => {
+      dispatch(stopLoading());
+    });
+  };
+
+export const getInventoryItem = (inventoryItemId) => async (dispatch) => {
+  const accessToken = await getAccessTokenSafely();
+
+  dispatch(startLoading());
+
+  const params = {
+    access_token: accessToken,
+    expand: "images,meta_fields,meta_fields.values"
+  };
+
+  return getRequest(
+    null,
+    createAction(RECEIVE_INVENTORY_ITEM),
+    `${window.INVENTORY_API_BASE_URL}/api/v1/inventory-items/${inventoryItemId}/`,
+    authErrorHandler
+  )(params)(dispatch).then(() => {
+    dispatch(stopLoading());
+  });
+};
+
+export const deleteInventoryItem = (inventoryItemId) => async (dispatch) => {
+  const accessToken = await getAccessTokenSafely();
+
+  dispatch(startLoading());
+
+  const params = {
+    access_token: accessToken
+  };
+
+  return deleteRequest(
+    null,
+    createAction(INVENTORY_ITEM_DELETED)({ inventoryItemId }),
+    `${window.INVENTORY_API_BASE_URL}/api/v1/inventory-items/${inventoryItemId}/`,
+    null,
+    authErrorHandler
+  )(params)(dispatch).then(() => {
+    dispatch(stopLoading());
+  });
+};
+
+export const resetInventoryItemForm = () => (dispatch) => {
+  dispatch(createAction(RESET_INVENTORY_ITEM_FORM)({}));
+};
+
+export const saveInventoryItem = (entity) => async (dispatch) => {
+  const accessToken = await getAccessTokenSafely();
+  dispatch(startLoading());
+
+  const params = {
+    access_token: accessToken
+  };
+
+  const normalizedEntity = normalizeEntity(entity);
+
+  if (entity.id) {
+    putRequest(
+      createAction(UPDATE_INVENTORY_ITEM),
+      createAction(INVENTORY_ITEM_UPDATED),
+      `${window.INVENTORY_API_BASE_URL}/api/v1/inventory-items/${entity.id}/`,
+      normalizedEntity,
+      authErrorHandler,
+      entity
+    )(params)(dispatch).then(() => {
+      dispatch(
+        showSuccessMessage(
+          T.translate("edit_inventory_item.inventory_item_saved")
+        )
+      );
+    });
+  } else {
+    const success_message = {
+      title: T.translate("general.done"),
+      html: T.translate("edit_inventory_item.inventory_item_created"),
+      type: "success"
+    };
+
+    postRequest(
+      createAction(ADD_INVENTORY_ITEM),
+      createAction(INVENTORY_ITEM_ADDED),
+      `${window.INVENTORY_API_BASE_URL}/api/v1/inventory-items/`,
+      normalizedEntity,
+      authErrorHandler,
+      entity
+    )(params)(dispatch).then(() => {
+      dispatch(
+        showMessage(success_message, () => {
+          history.push("/app/sponsors-inventory");
+        })
+      );
+    });
+  }
+};
+
+const normalizeEntity = (entity) => {
+  const normalizedEntity = { ...entity };
+
+  return normalizedEntity;
+};
diff --git a/src/app.js b/src/app.js
index c65ec8c7c..2df3d4cae 100644
--- a/src/app.js
+++ b/src/app.js
@@ -71,6 +71,7 @@ window.REPORT_API_BASE_URL = process.env.REPORT_API_BASE_URL;
 window.MARKETING_API_BASE_URL = process.env.MARKETING_API_BASE_URL;
 window.EMAIL_API_BASE_URL = process.env.EMAIL_API_BASE_URL;
 window.FILE_UPLOAD_API_BASE_URL = process.env.FILE_UPLOAD_API_BASE_URL;
+window.INVENTORY_API_BASE_URL = process.env.INVENTORY_API_BASE_URL;
 window.SIGNAGE_BASE_URL = process.env.SIGNAGE_BASE_URL;
 window.OAUTH2_CLIENT_ID = process.env.OAUTH2_CLIENT_ID;
 window.SCOPES = process.env.SCOPES;
diff --git a/src/components/form-repeater/index.js b/src/components/form-repeater/index.js
new file mode 100644
index 000000000..49744784e
--- /dev/null
+++ b/src/components/form-repeater/index.js
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+
+const FormRepeater = ({ renderContent }) => {
+  const [lines, setLines] = useState([{ id: Date.now(), value: "" }]);
+
+  const handleAddLine = (id) => {
+    const newLine = { id: Date.now(), value: "" };
+    const index = lines.findIndex((line) => line.id === id);
+    const updatedLines = [
+      ...lines.slice(0, index + 1),
+      newLine,
+      ...lines.slice(index + 1)
+    ];
+    setLines(updatedLines);
+  };
+
+  const handleRemoveLine = (id) => {
+    setLines(lines.filter((line) => line.id !== id));
+  };
+
+  return (
+    <div>
+      {lines.map((line) => (
+        <div
+          key={line.id}
+          style={{ display: "flex", alignItems: "center", marginBottom: "8px" }}
+        >
+          <div style={{ marginRight: "8px", flex: 1 }}>
+            {renderContent(line, (value) => {
+              const updatedLines = lines.map((l) =>
+                l.id === line.id ? { ...l, value } : l
+              );
+              setLines(updatedLines);
+            })}
+          </div>
+          <button
+            type="button"
+            onClick={() => handleAddLine(line.id)}
+            style={{
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              marginRight: "4px"
+            }}
+          >
+            <i className="fa fa-plus" aria-hidden="true" title="Add" />
+          </button>
+          {lines.length > 1 && (
+            <button
+              type="button"
+              onClick={() => handleRemoveLine(line.id)}
+              style={{
+                border: "none",
+                background: "none",
+                cursor: "pointer"
+              }}
+            >
+              <i className="fa fa-trash" aria-hidden="true" title="Remove" />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FormRepeater;
diff --git a/src/components/forms/inventory-item-form.js b/src/components/forms/inventory-item-form.js
new file mode 100644
index 000000000..1bb8a2340
--- /dev/null
+++ b/src/components/forms/inventory-item-form.js
@@ -0,0 +1,175 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useState, useEffect } from "react";
+import T from "i18n-react/dist/i18n-react";
+import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
+import {
+  Dropdown,
+  Input,
+  TextEditor
+} from "openstack-uicore-foundation/lib/components";
+import FormRepeater from "../form-repeater";
+import {
+  scrollToError,
+  shallowEqual,
+  hasErrors
+} from "../../utils/methods";
+
+const InventoryItemForm = ({
+  entity: initialEntity,
+  errors: initialErrors,
+  onSubmit
+}) => {
+  const [entity, setEntity] = useState({ ...initialEntity });
+  const [errors, setErrors] = useState(initialErrors);
+
+  useEffect(() => {
+    scrollToError(initialErrors);
+    if (!shallowEqual(initialEntity, entity)) {
+      setEntity({ ...initialEntity });
+      setErrors({});
+    }
+
+    if (!shallowEqual(initialErrors, errors)) {
+      setErrors({ ...initialErrors });
+    }
+  }, [initialEntity, initialErrors]);
+
+  const handleChange = (ev) => {
+    const { id, value, checked, type } = ev.target;
+    setEntity((prevEntity) => ({
+      ...prevEntity,
+      [id]: type === "checkbox" ? checked : value
+    }));
+    setErrors((prevErrors) => ({ ...prevErrors, [id]: "" }));
+  };
+
+  const handleSubmit = (ev) => {
+    ev.preventDefault();
+    onSubmit(entity);
+  };
+
+  // const renderLineContent = (line, updateValue) => (
+  const renderLineContent = () => (
+    <div className="row form-group">
+      <div className="col-md-3">
+        <Input
+          id="meta-field-title"
+          className="form-control"
+          // error={hasErrors("meta-field-title", errors)}
+          onChange={handleChange}
+          value={entity.code}
+          placeholder="Field Title"
+        />
+      </div>
+      <div className="col-md-2">
+        <div className="form-check abc-checkbox">
+          <input
+            type="checkbox"
+            id="is_required"
+            checked={false}
+            onChange={handleChange}
+            className="form-check-input"
+          />
+          <label className="form-check-label" htmlFor="is_required">
+            Required
+          </label>
+        </div>
+      </div>
+      <div className="col-md-2">
+        <Dropdown
+          id="meta-field-type"
+          placeholder="Field Type"
+          // value={enabledFilters}
+          onChange={() => {}}
+          // options={(filters_ddl) => {}}
+        />
+      </div>
+      <div className="col-md-3">
+        <Input
+          id="meta-field-value"
+          className="form-control"
+          // error={hasErrors("meta-field-title", errors)}
+          onChange={handleChange}
+          value={entity.code}
+          placeholder="Field Value"
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <form className="badge-type-form">
+      <input type="hidden" id="id" value={entity.id} />
+      <input type="hidden" id="order" value={entity.order} />
+      <div className="row form-group">
+        <div className="col-md-4">
+          <label>{T.translate("edit_inventory_item.code")} *</label>
+          <Input
+            id="code"
+            className="form-control"
+            error={hasErrors("code", errors)}
+            onChange={handleChange}
+            value={entity.code}
+          />
+        </div>
+        <div className="col-md-8">
+          <label>{T.translate("edit_inventory_item.name")} *</label>
+          <Input
+            id="name"
+            className="form-control"
+            error={hasErrors("name", errors)}
+            onChange={handleChange}
+            value={entity.name}
+          />
+        </div>
+      </div>
+
+      <div className="row form-group">
+        <div className="col-md-12">
+          <label>{T.translate("edit_inventory_item.description")} *</label>
+          <TextEditor
+            id="description"
+            value={entity.description}
+            onChange={handleChange}
+            error={hasErrors("description", errors)}
+          />
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="row">
+        <div className="col-md-12">
+          <FormRepeater renderContent={renderLineContent} />
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="row">
+        <div className="col-md-12 submit-buttons">
+          <input
+            type="button"
+            onClick={handleSubmit}
+            className="btn btn-primary pull-right"
+            value={T.translate("general.save")}
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default InventoryItemForm;
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 329a54fd4..4be9b683a 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -49,6 +49,17 @@ const getGlobalItems = () => [
     linkUrl: "companies",
     accessRoute: "companies"
   },
+  {
+    name: "sponsors_inventory",
+    iconClass: "fa-users",
+    accessRoute: "sponsors-inventory",
+    childs: [
+      {
+        name: "inventory",
+        linkUrl: "sponsors-inventory/inventory"
+      }
+    ]
+  },
   {
     name: "sponsorship_types",
     iconClass: "fa fa-handshake-o",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ab67e2579..e38396d53 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -157,7 +157,10 @@
     "schedule_settings": "Schedule",
     "registration_stats": "Registration Stats",
     "audit_log": "Audit Log",
-    "submission_invitations": "Submission Invitations"
+    "submission_invitations": "Submission Invitations",
+    "sponsors_inventory": "Sponsors",
+    "form_templates": "Form Templates",
+    "inventory": "Inventory"
   },
   "schedule": {
     "schedule": "Schedule",
@@ -3154,5 +3157,23 @@
   },
   "url_input": {
     "url_error": "URL must start with http:// or https://"
+  },
+  "sponsors_inventory": {
+    "inventory": "Inventory"
+  },
+  "inventory_item_list": {
+    "inventory_items": "Inventory Items",
+    "delete_inventory_item_warning": "Are you sure you want to delete inventory item ",
+    "add_inventory_item": "Create new Item",
+    "placeholders": {
+      "search_inventory_items": "Search"
+    }
+  },
+  "edit_inventory_item": {
+    "inventory_item": "Item",
+    "inventory_item_created": "Inventory Item created successfully.",
+    "code": "Code",
+    "name": "Name",
+    "description": "Description"
   }
 }
diff --git a/src/layouts/inventory-item-layout.js b/src/layouts/inventory-item-layout.js
new file mode 100644
index 000000000..40e2fc2c5
--- /dev/null
+++ b/src/layouts/inventory-item-layout.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import { Switch, Route, withRouter } from "react-router-dom";
+import T from "i18n-react/dist/i18n-react";
+import { Breadcrumb } from "react-breadcrumbs";
+import Restrict from "../routes/restrict";
+import InventoryListPage from "../pages/sponsors_inventory/inventory-list-page";
+import EditInventoryItemPage from "../pages/sponsors_inventory/edit-inventory-item-page";
+import NoMatchPage from "../pages/no-match-page";
+
+const InventoryItemLayout = ({ match }) => (
+    <div>
+      <Breadcrumb
+        data={{
+          title: T.translate("inventory_item_list.inventory_items"),
+          pathname: match.url
+        }}
+      />
+      <Switch>
+        <Route
+          strict
+          exact
+          path={`${match.url}/new`}
+          component={EditInventoryItemPage}
+        />
+        <Route
+          strict
+          exact
+          path={`${match.url}/:inventory_item_id(\\d+)`}
+          component={EditInventoryItemPage}
+        />
+        <Route
+          strict
+          exact
+          path={`${match.url}`}
+          component={InventoryListPage}
+        />
+        <Route component={NoMatchPage} />
+      </Switch>
+    </div>
+  );
+
+export default Restrict(withRouter(InventoryItemLayout), "inventory-item");
diff --git a/src/layouts/primary-layout.js b/src/layouts/primary-layout.js
index 06a369534..1d4a8ff49 100644
--- a/src/layouts/primary-layout.js
+++ b/src/layouts/primary-layout.js
@@ -21,6 +21,7 @@ import SummitLayout from "./summit-layout";
 import SummitDirectoryPage from "../pages/summits/summit-directory-page";
 import SpeakerLayout from "./speaker-layout";
 import CompanyLayout from "./company-layout";
+import SponsorInventoryLayout from "./sponsor-inventory-layout";
 import EmailLayout from "./email-layout";
 import AdminAccessLayout from "./admin-access-layout";
 import MediaFileTypeLayout from "./media-file-type-layout";
@@ -61,6 +62,10 @@ const PrimaryLayout = ({ match, currentSummit, location, member }) => {
           />
           <Route path="/app/speakers" component={SpeakerLayout} />
           <Route path="/app/companies" component={CompanyLayout} />
+          <Route
+            path="/app/sponsors-inventory"
+            component={SponsorInventoryLayout}
+          />
           <Route path="/app/sponsorship-types" component={SponsorshipLayout} />
           <Route path="/app/tags" component={TagLayout} />
           <Route
diff --git a/src/layouts/sponsor-inventory-layout.js b/src/layouts/sponsor-inventory-layout.js
new file mode 100644
index 000000000..6110cfa60
--- /dev/null
+++ b/src/layouts/sponsor-inventory-layout.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import { Switch, Redirect, Route, withRouter } from "react-router-dom";
+import T from "i18n-react/dist/i18n-react";
+import { Breadcrumb } from "react-breadcrumbs";
+import Restrict from "../routes/restrict";
+import InventoryItemLayout from "./inventory-item-layout";
+
+const SponsorInventoryLayout = ({ match }) => (
+    <div>
+      <Breadcrumb
+        data={{
+          title: T.translate("sponsors_inventory.inventory"),
+          pathname: match.url
+        }}
+      />
+      <Switch>
+        <Route
+          path={`${match.url}/inventory`}
+          component={InventoryItemLayout}
+        />
+        <Redirect to="/app/sponsors-inventory/inventory" />
+      </Switch>
+    </div>
+  );
+
+export default Restrict(
+  withRouter(SponsorInventoryLayout),
+  "sponsors-inventory"
+);
diff --git a/src/pages/sponsors_inventory/edit-inventory-item-page.js b/src/pages/sponsors_inventory/edit-inventory-item-page.js
new file mode 100644
index 000000000..cc46c5c9a
--- /dev/null
+++ b/src/pages/sponsors_inventory/edit-inventory-item-page.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { Breadcrumb } from "react-breadcrumbs";
+import T from "i18n-react/dist/i18n-react";
+import InventoryItemForm from "../../components/forms/inventory-item-form";
+import {
+  getInventoryItem,
+  resetInventoryItemForm,
+  saveInventoryItem
+} from "../../actions/inventory-item-actions";
+
+const EditInventoryItemPage = (props) => {
+  const {
+    match,
+    entity,
+    errors,
+    getInventoryItem,
+    resetInventoryItemForm,
+    saveInventoryItem
+  } = props;
+  const inventoryItemId = match.params.inventory_item_id;
+
+  useEffect(() => {
+    if (!inventoryItemId) {
+      resetInventoryItemForm();
+    } else {
+      getInventoryItem(inventoryItemId);
+    }
+  }, [inventoryItemId, getInventoryItem, resetInventoryItemForm]);
+
+  const title = entity.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+  const breadcrumb = entity.id ? entity.name : T.translate("general.new");
+
+  return (
+    <div className="container">
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <h3>
+        {title} {T.translate("edit_inventory_item.inventory_item")}
+      </h3>
+      <hr />
+      <InventoryItemForm
+        entity={entity}
+        errors={errors}
+        onSubmit={saveInventoryItem}
+      />
+    </div>
+  );
+};
+
+const mapStateToProps = ({ currentInventoryItemState }) => ({
+  ...currentInventoryItemState
+});
+
+export default connect(mapStateToProps, {
+  getInventoryItem,
+  resetInventoryItemForm,
+  saveInventoryItem
+})(EditInventoryItemPage);
diff --git a/src/pages/sponsors_inventory/inventory-list-page.js b/src/pages/sponsors_inventory/inventory-list-page.js
new file mode 100644
index 000000000..f909bc6ce
--- /dev/null
+++ b/src/pages/sponsors_inventory/inventory-list-page.js
@@ -0,0 +1,157 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import T from "i18n-react/dist/i18n-react";
+import Swal from "sweetalert2";
+import { Pagination } from "react-bootstrap";
+import {
+  FreeTextSearch,
+  Table
+} from "openstack-uicore-foundation/lib/components";
+import {
+  getInventoryItems,
+  deleteInventoryItem
+} from "../../actions/inventory-item-actions";
+
+const InventoryListPage = ({
+  inventoryItems,
+  lastPage,
+  currentPage,
+  perPage,
+  term,
+  order,
+  orderDir,
+  totalInventoryItems,
+  history,
+  deleteInventoryItem,
+  getInventoryItems
+}) => {
+  useEffect(() => {
+    getInventoryItems(term, currentPage, perPage, order, orderDir);
+  }, []);
+
+  const handleEdit = (itemId) => {
+    history.push(`/app/sponsors-inventory/inventory/${itemId}`);
+  };
+
+  const handleDelete = (itemId) => {
+    const inventoryItem = inventoryItems.find((s) => s.id === itemId);
+
+    Swal.fire({
+      title: T.translate("general.are_you_sure"),
+      text: `${T.translate(
+        "inventory_item_list.delete_inventory_item_warning"
+      )} ${inventoryItem.name}?`,
+      type: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#DD6B55",
+      confirmButtonText: T.translate("general.yes_delete")
+    }).then((result) => {
+      if (result.value) {
+        deleteInventoryItem(itemId);
+      }
+    });
+  };
+
+  const handlePageChange = (page) => {
+    getInventoryItems(term, page, perPage, order, orderDir);
+  };
+
+  const handleSort = (index, key, dir) => {
+    getInventoryItems(term, page, perPage, key, dir);
+  };
+
+  const handleSearch = (term) => {
+    getInventoryItems(term, page, perPage, order, orderDir);
+  };
+
+  const handleNewInventoryItem = () => {
+    history.push("/app/sponsors-inventory/inventory/new");
+  };
+
+  const columns = [
+    { columnKey: "id", value: "Id", sortable: true },
+    { columnKey: "code", value: T.translate("general.code"), sortable: true },
+    { columnKey: "name", value: T.translate("general.name"), sortable: true }
+  ];
+
+  const table_options = {
+    sortCol: order,
+    sortDir: orderDir,
+    actions: {
+      edit: { onClick: handleEdit },
+      delete: { onClick: handleDelete }
+    }
+  };
+
+  return (
+    <div className="container">
+      <h3>
+        {" "}
+        {T.translate("inventory_item_list.inventory_items")} (
+        {totalInventoryItems}){" "}
+      </h3>
+      <div className="row">
+        <div className="col-md-6">
+          <FreeTextSearch
+            value={term ?? ""}
+            placeholder={T.translate(
+              "inventory_item_list.placeholders.search_inventory_items"
+            )}
+            onSearch={handleSearch}
+          />
+        </div>
+        <div className="col-md-6 text-right">
+          <button className="btn btn-primary" onClick={handleNewInventoryItem}>
+            {T.translate("inventory_item_list.add_inventory_item")}
+          </button>
+        </div>
+      </div>
+
+      {inventoryItems.length > 0 && (
+        <div>
+          <Table
+            options={table_options}
+            data={inventoryItems}
+            columns={columns}
+            onSort={handleSort}
+          />
+          <Pagination
+            bsSize="medium"
+            prev
+            next
+            first
+            last
+            ellipsis
+            boundaryLinks
+            maxButtons={10}
+            items={lastPage}
+            activePage={currentPage}
+            onSelect={handlePageChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = ({ currentInventoryItemListState }) => ({
+  ...currentInventoryItemListState
+});
+
+export default connect(mapStateToProps, {
+  getInventoryItems,
+  deleteInventoryItem
+})(InventoryListPage);
diff --git a/src/reducers/inventory_items/inventory-item-list-reducer.js b/src/reducers/inventory_items/inventory-item-list-reducer.js
new file mode 100644
index 000000000..2a77b8a31
--- /dev/null
+++ b/src/reducers/inventory_items/inventory-item-list-reducer.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
+import {
+  RECEIVE_INVENTORY_ITEMS,
+  REQUEST_INVENTORY_ITEMS,
+  INVENTORY_ITEM_DELETED,
+  CHANGE_INVENTORY_ITEM_SEARCH_TERM
+} from "../../actions/inventory-item-actions";
+
+const DEFAULT_STATE = {
+  inventoryItems: [],
+  term: null,
+  order: "name",
+  orderDir: 1,
+  currentPage: 1,
+  lastPage: 1,
+  perPage: 10,
+  totalInventoryItems: 0,
+  filters: {}
+};
+
+const inventoryItemListReducer = (state = DEFAULT_STATE, action = {}) => {
+  const { type, payload } = action;
+  switch (type) {
+    case LOGOUT_USER: {
+      return DEFAULT_STATE;
+    }
+    case REQUEST_INVENTORY_ITEMS: {
+      const { order, orderDir, page, ...rest } = payload;
+
+      if (
+        order !== state.order ||
+        orderDir !== state.orderDir ||
+        page !== state.currentPage
+      ) {
+        // if the change was in page or order, keep selection
+        return {
+          ...state,
+          order,
+          orderDir,
+          currentPage: page,
+          ...rest
+        };
+      }
+
+      return {
+        ...state,
+        order,
+        orderDir,
+        inventoryItems: [],
+        currentPage: page,
+        ...rest
+      };
+    }
+    case RECEIVE_INVENTORY_ITEMS: {
+      const { current_page, total, last_page } = payload.response;
+
+      const inventoryItems = payload.response.data.map((a) => ({
+          id: a.id,
+          code: a.code,
+          name: a.name
+        }));
+
+      return {
+        ...state,
+        inventoryItems,
+        currentPage: current_page,
+        totalInventoryItems: total,
+        lastPage: last_page
+      };
+    }
+    case INVENTORY_ITEM_DELETED: {
+      const { inventoryItemId } = payload;
+      return {
+        ...state,
+        inventoryItems: state.inventoryItems.filter(
+          (a) => a.id !== inventoryItemId
+        )
+      };
+    }
+    case CHANGE_INVENTORY_ITEM_SEARCH_TERM: {
+      const { term } = payload;
+      return { ...state, term };
+    }
+    default:
+      return state;
+  }
+};
+
+export default inventoryItemListReducer;
diff --git a/src/reducers/inventory_items/inventory-item-reducer.js b/src/reducers/inventory_items/inventory-item-reducer.js
new file mode 100644
index 000000000..f7400d1c7
--- /dev/null
+++ b/src/reducers/inventory_items/inventory-item-reducer.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright 2024 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
+import {
+  RECEIVE_INVENTORY_ITEM,
+  RESET_INVENTORY_ITEM_FORM,
+  INVENTORY_ITEM_ADDED,
+  INVENTORY_ITEM_UPDATED
+} from "../../actions/inventory-item-actions";
+
+
+export const DEFAULT_ENTITY = {
+  id: 0,
+  code: "",
+  name: "",
+  description: "",
+  default_quantity: 0,
+  quantity_limit_per_show: 0,
+  quantity_limit_per_sponsor: 0,
+  early_bird_rate: 0,
+  standard_rate: 0,
+  onsite_rate: 0
+  // images: []
+};
+
+const DEFAULT_STATE = {
+  entity: DEFAULT_ENTITY,
+  errors: {}
+};
+
+const inventoryItemReducer = (state = DEFAULT_STATE, action) => {
+  const { type, payload } = action;
+  switch (type) {
+    case LOGOUT_USER: {
+      // we need this in case the token expired while editing the form
+      if (payload.hasOwnProperty("persistStore")) {
+        return state;
+      } 
+        return DEFAULT_STATE;
+      
+    }
+    case RESET_INVENTORY_ITEM_FORM: {
+      return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
+    }
+    case RECEIVE_INVENTORY_ITEM: {
+      const entity = { ...payload.response };
+
+      for (const key in entity) {
+        if (entity.hasOwnProperty(key)) {
+          entity[key] = entity[key] == null ? "" : entity[key];
+        }
+      }
+
+      return {
+        ...state,
+        entity: {
+          ...DEFAULT_ENTITY,
+          ...entity
+        }
+      };
+    }
+    case INVENTORY_ITEM_ADDED:
+    case INVENTORY_ITEM_UPDATED: {
+      const entity = { ...payload.response };
+
+      for (const key in entity) {
+        if (entity.hasOwnProperty(key)) {
+          entity[key] = entity[key] == null ? "" : entity[key];
+        }
+      }
+
+      return {
+        ...state,
+        entity: {
+          ...DEFAULT_ENTITY,
+          ...entity,
+          original_mjml_content: entity.mjml_content,
+          original_html_content: entity.html_content
+        }
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export default inventoryItemReducer;
diff --git a/src/store.js b/src/store.js
index 5a5046430..8320187e2 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,9 +9,13 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import { createStore, applyMiddleware, compose } from "redux";
+import { loggedUserReducer } from "openstack-uicore-foundation/lib/security/reducers";
+import thunk from "redux-thunk";
+import { persistStore, persistCombineReducers } from "redux-persist";
+import storage from "redux-persist/es/storage";
 import baseReducer from "./reducers/base-reducer";
 import currentSummitReducer from "./reducers/summits/current-summit-reducer";
 import directoryReducer from "./reducers/summits/directory-reducer";
@@ -56,7 +60,6 @@ import roomOccupancyReducer from "./reducers/events/room-occupancy-reducer";
 import tagGroupListReducer from "./reducers/tags/tag-group-list-reducer";
 import tagGroupReducer from "./reducers/tags/tag-group-reducer";
 import reportReducer from "./reducers/reports/report-reducer";
-import { loggedUserReducer } from "openstack-uicore-foundation/lib/security/reducers";
 import roomBookingReducer from "./reducers/room_bookings/room-booking-reducer";
 import roomBookingListReducer from "./reducers/room_bookings/room-booking-list-reducer";
 import roomBookingAttributeTypeReducer from "./reducers/room_bookings/room-booking-attribute-type-reducer";
@@ -136,15 +139,14 @@ import SubmmissionInvitationListReducer from "./reducers/speakers/submission-inv
 import submissionInvitationReducer from "./reducers/speakers/submission-invitation-reducer";
 import trackTimeframesListReducer from "./reducers/track_chairs/track-timeframes-list-reducer";
 import trackTimeframeReducer from "./reducers/track_chairs/track-timeframe-reducer";
-import thunk from "redux-thunk";
-import { persistStore, persistCombineReducers } from "redux-persist";
-import storage from "redux-persist/es/storage";
 import currentRegFeedMetadataListReducer from "./reducers/summits/reg-feed-metadata-list-reducer";
 import currentRegFeedMetadataReducer from "./reducers/summits/reg-feed-metadata-reducer";
 import badgePrintReducer from "./reducers/tickets/badge-print-reducer";
 import notesReducer from "./reducers/notes/notes-reducer";
 import emailFlowEventSettingsReducer from "./reducers/email_flow_events/email-flows-event-settings-reducer";
 import badgeScanReducer from "./reducers/sponsors/badge-scan-reducer";
+import inventoryItemReducer from "./reducers/inventory_items/inventory-item-reducer";
+import inventoryItemListReducer from "./reducers/inventory_items/inventory-item-list-reducer";
 
 // default: localStorage if web, AsyncStorage if react-native
 
@@ -284,7 +286,9 @@ const reducers = persistCombineReducers(config, {
   trackTimeframesListState: trackTimeframesListReducer,
   trackTimeframeState: trackTimeframeReducer,
   currentRegFeedMetadataListState: currentRegFeedMetadataListReducer,
-  currentRegFeedMetadataState: currentRegFeedMetadataReducer
+  currentRegFeedMetadataState: currentRegFeedMetadataReducer,
+  currentInventoryItemState: inventoryItemReducer,
+  currentInventoryItemListState: inventoryItemListReducer
 });
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;