From c3cfd41bf77024b6bd6721e2bcc303003895ac0d Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Tue, 31 Mar 2026 11:57:19 +0000
Subject: [PATCH] Initial version

---
 .cursorrules                                  |   305 +
 .dockerignore                                 |     3 +
 .gitignore                                    |     3 +
 .perm_test_apache                             |     0
 .perm_test_exec                               |     0
 502.html                                      |   187 +
 Dockerfile                                    |    21 +
 Dockerfile.dev                                |    85 +
 LICENSE                                       |     1 +
 README.md                                     |   244 +
 backend/.env                                  |    14 +
 backend/.eslintignore                         |     4 +
 backend/.eslintrc.cjs                         |    15 +
 backend/.prettierrc                           |    11 +
 backend/.sequelizerc                          |     7 +
 backend/Dockerfile                            |    23 +
 backend/README.md                             |    56 +
 backend/package.json                          |    56 +
 backend/src/ai/LocalAIApi.js                  |   484 +
 backend/src/auth/auth.js                      |    68 +
 backend/src/config.js                         |    80 +
 backend/src/db/api/activity_logs.js           |   571 +
 backend/src/db/api/approval_steps.js          |   620 +
 backend/src/db/api/approval_workflows.js      |   520 +
 backend/src/db/api/approvals.js               |   695 +
 backend/src/db/api/companies.js               |   793 +
 backend/src/db/api/departments.js             |   533 +
 backend/src/db/api/document_links.js          |   490 +
 backend/src/db/api/document_types.js          |   503 +
 backend/src/db/api/documents.js               |   752 +
 backend/src/db/api/file.js                    |    87 +
 backend/src/db/api/goods_receipt_lines.js     |   631 +
 backend/src/db/api/goods_receipts.js          |   743 +
 backend/src/db/api/invoice_lines.js           |   631 +
 backend/src/db/api/organizations.js           |   476 +
 backend/src/db/api/payments.js                |   718 +
 backend/src/db/api/permissions.js             |   362 +
 backend/src/db/api/product_categories.js      |   498 +
 backend/src/db/api/products.js                |   790 +
 backend/src/db/api/purchase_order_lines.js    |   709 +
 backend/src/db/api/purchase_orders.js         |   897 +
 .../src/db/api/purchase_requisition_lines.js  |   631 +
 backend/src/db/api/purchase_requisitions.js   |   725 +
 .../src/db/api/role_permission_mappings.js    |   481 +
 backend/src/db/api/roles.js                   |   472 +
 backend/src/db/api/ui_announcements.js        |   604 +
 backend/src/db/api/user_role_assignments.js   |   610 +
 backend/src/db/api/users.js                   |  1048 +
 backend/src/db/api/vendor_invoices.js         |   856 +
 backend/src/db/api/vendors.js                 |   622 +
 backend/src/db/api/warehouses.js              |   550 +
 backend/src/db/db.config.js                   |    33 +
 backend/src/db/migrations/1774958148418.js    |  7181 +++++++
 .../migrations/20260316000000-create-files.js |   124 +
 ...ate-users-custom-permissions-join-table.js |    77 +
 backend/src/db/models/activity_logs.js        |   211 +
 backend/src/db/models/approval_steps.js       |   157 +
 backend/src/db/models/approval_workflows.js   |   165 +
 backend/src/db/models/approvals.js            |   199 +
 backend/src/db/models/companies.js            |   311 +
 backend/src/db/models/departments.js          |   143 +
 backend/src/db/models/document_links.js       |   142 +
 backend/src/db/models/document_types.js       |   156 +
 backend/src/db/models/documents.js            |   226 +
 backend/src/db/models/file.js                 |    53 +
 backend/src/db/models/goods_receipt_lines.js  |   147 +
 backend/src/db/models/goods_receipts.js       |   200 +
 backend/src/db/models/index.js                |    38 +
 backend/src/db/models/invoice_lines.js        |   146 +
 backend/src/db/models/organizations.js        |   302 +
 backend/src/db/models/payments.js             |   207 +
 backend/src/db/models/permissions.js          |   102 +
 backend/src/db/models/product_categories.js   |   132 +
 backend/src/db/models/products.js             |   238 +
 backend/src/db/models/purchase_order_lines.js |   169 +
 backend/src/db/models/purchase_orders.js      |   276 +
 .../db/models/purchase_requisition_lines.js   |   147 +
 .../src/db/models/purchase_requisitions.js    |   208 +
 .../src/db/models/role_permission_mappings.js |   121 +
 backend/src/db/models/roles.js                |   161 +
 backend/src/db/models/ui_announcements.js     |   166 +
 .../src/db/models/user_role_assignments.js    |   143 +
 backend/src/db/models/users.js                |   332 +
 backend/src/db/models/vendor_invoices.js      |   258 +
 backend/src/db/models/vendors.js              |   195 +
 backend/src/db/models/warehouses.js           |   168 +
 backend/src/db/reset.js                       |    16 +
 .../db/seeders/20200430130759-admin-user.js   |    77 +
 .../db/seeders/20200430130760-user-roles.js   |   699 +
 .../db/seeders/20231127130745-sample-data.js  | 16311 ++++++++++++++++
 backend/src/db/utils.js                       |    27 +
 backend/src/helpers.js                        |    23 +
 backend/src/index.js                          |   247 +
 backend/src/middlewares/check-permissions.js  |   149 +
 backend/src/middlewares/upload.js             |    11 +
 backend/src/routes/activity_logs.js           |   448 +
 backend/src/routes/approval_steps.js          |   449 +
 backend/src/routes/approval_workflows.js      |   444 +
 backend/src/routes/approvals.js               |   445 +
 backend/src/routes/auth.js                    |   209 +
 backend/src/routes/companies.js               |   473 +
 backend/src/routes/contactForm.js             |     0
 backend/src/routes/departments.js             |   443 +
 backend/src/routes/document_links.js          |   444 +
 backend/src/routes/document_types.js          |   447 +
 backend/src/routes/documents.js               |   451 +
 backend/src/routes/file.js                    |    32 +
 backend/src/routes/goods_receipt_lines.js     |   449 +
 backend/src/routes/goods_receipts.js          |   444 +
 backend/src/routes/invoice_lines.js           |   452 +
 backend/src/routes/openai.js                  |   328 +
 backend/src/routes/organizationLogin.js       |    55 +
 backend/src/routes/organizations.js           |   440 +
 backend/src/routes/payments.js                |   448 +
 backend/src/routes/permissions.js             |   429 +
 backend/src/routes/pexels.js                  |   104 +
 backend/src/routes/product_categories.js      |   446 +
 backend/src/routes/products.js                |   462 +
 backend/src/routes/purchase_order_lines.js    |   455 +
 backend/src/routes/purchase_orders.js         |   457 +
 .../src/routes/purchase_requisition_lines.js  |   449 +
 backend/src/routes/purchase_requisitions.js   |   447 +
 .../src/routes/role_permission_mappings.js    |   437 +
 backend/src/routes/roles.js                   |   438 +
 backend/src/routes/search.js                  |    56 +
 backend/src/routes/sql.js                     |    61 +
 backend/src/routes/ui_announcements.js        |   444 +
 backend/src/routes/user_role_assignments.js   |   437 +
 backend/src/routes/users.js                   |   451 +
 backend/src/routes/vendor_invoices.js         |   454 +
 backend/src/routes/vendors.js                 |   459 +
 backend/src/routes/warehouses.js              |   446 +
 backend/src/services/activity_logs.js         |   138 +
 backend/src/services/approval_steps.js        |   138 +
 backend/src/services/approval_workflows.js    |   138 +
 backend/src/services/approvals.js             |   138 +
 backend/src/services/auth.js                  |   314 +
 backend/src/services/companies.js             |   138 +
 backend/src/services/departments.js           |   138 +
 backend/src/services/document_links.js        |   138 +
 backend/src/services/document_types.js        |   138 +
 backend/src/services/documents.js             |   138 +
 .../emailAddressVerification.html             |    52 +
 .../invitation/invitationTemplate.html        |    55 +
 .../passwordReset/passwordResetEmail.html     |    52 +
 backend/src/services/email/index.js           |    44 +
 .../email/list/addressVerification.js         |    38 +
 backend/src/services/email/list/invitation.js |    37 +
 .../src/services/email/list/passwordReset.js  |    38 +
 backend/src/services/file.js                  |   213 +
 backend/src/services/goods_receipt_lines.js   |   138 +
 backend/src/services/goods_receipts.js        |   138 +
 backend/src/services/invoice_lines.js         |   138 +
 .../notifications/errors/forbidden.js         |    17 +
 .../notifications/errors/validation.js        |    18 +
 backend/src/services/notifications/helpers.js |    35 +
 backend/src/services/notifications/list.js    |   104 +
 backend/src/services/openai.js                |    80 +
 backend/src/services/organizations.js         |   138 +
 backend/src/services/payments.js              |   138 +
 backend/src/services/permissions.js           |   138 +
 backend/src/services/product_categories.js    |   138 +
 backend/src/services/products.js              |   138 +
 backend/src/services/purchase_order_lines.js  |   138 +
 backend/src/services/purchase_orders.js       |   138 +
 .../services/purchase_requisition_lines.js    |   138 +
 backend/src/services/purchase_requisitions.js |   138 +
 .../src/services/role_permission_mappings.js  |   138 +
 backend/src/services/roles.js                 |   399 +
 backend/src/services/search.js                |   708 +
 backend/src/services/ui_announcements.js      |   138 +
 backend/src/services/user_role_assignments.js |   138 +
 backend/src/services/users.js                 |   179 +
 backend/src/services/vendor_invoices.js       |   138 +
 backend/src/services/vendors.js               |   138 +
 backend/src/services/warehouses.js            |   138 +
 backend/watcher.js                            |    49 +
 backend/yarn.lock                             |  4470 +++++
 docker/.gitignore                             |     1 +
 docker/README.md                              |    46 +
 docker/docker-compose.yml                     |    58 +
 docker/start-backend.sh                       |     2 +
 docker/wait-for-it.sh                         |   182 +
 frontend/.eslintignore                        |     3 +
 frontend/.eslintrc.cjs                        |    25 +
 frontend/.gitignore                           |    33 +
 frontend/.prettierrc                          |    10 +
 frontend/Dockerfile                           |    19 +
 frontend/LICENSE-justboil                     |    21 +
 frontend/README.md                            |    92 +
 frontend/next-env.d.ts                        |     6 +
 frontend/next.config.mjs                      |    32 +
 frontend/package.json                         |    79 +
 frontend/postcss.config.js                    |     9 +
 frontend/prettier.config.js                   |    13 +
 frontend/public/data-sources/clients.json     |     1 +
 frontend/public/data-sources/history.json     |     1 +
 frontend/public/favicon.svg                   |    27 +
 frontend/public/locales/de/common.json        |    55 +
 frontend/public/locales/en/common.json        |    52 +
 frontend/public/locales/es/common.json        |    55 +
 frontend/public/locales/fr/common.json        |    55 +
 frontend/src/colors.ts                        |   138 +
 .../Activity_logs/CardActivity_logs.tsx       |   183 +
 .../Activity_logs/ListActivity_logs.tsx       |   136 +
 .../Activity_logs/TableActivity_logs.tsx      |   463 +
 .../configureActivity_logsCols.tsx            |   183 +
 .../Approval_steps/CardApproval_steps.tsx     |   183 +
 .../Approval_steps/ListApproval_steps.tsx     |   136 +
 .../Approval_steps/TableApproval_steps.tsx    |   463 +
 .../configureApproval_stepsCols.tsx           |   191 +
 .../CardApproval_workflows.tsx                |   159 +
 .../ListApproval_workflows.tsx                |   120 +
 .../TableApproval_workflows.tsx               |   476 +
 .../configureApproval_workflowsCols.tsx       |   151 +
 .../components/Approvals/CardApprovals.tsx    |   219 +
 .../components/Approvals/ListApprovals.tsx    |   160 +
 .../components/Approvals/TableApprovals.tsx   |   507 +
 .../Approvals/configureApprovalsCols.tsx      |   252 +
 frontend/src/components/AsideMenu.tsx         |    30 +
 frontend/src/components/AsideMenuItem.tsx     |   102 +
 frontend/src/components/AsideMenuLayer.tsx    |    94 +
 frontend/src/components/AsideMenuList.tsx     |    35 +
 frontend/src/components/BaseButton.tsx        |    96 +
 frontend/src/components/BaseButtons.tsx       |    38 +
 frontend/src/components/BaseDivider.tsx       |    14 +
 frontend/src/components/BaseIcon.tsx          |    32 +
 frontend/src/components/BigCalendar.tsx       |   175 +
 frontend/src/components/CardBox.tsx           |    64 +
 .../src/components/CardBoxComponentBody.tsx   |    12 +
 .../src/components/CardBoxComponentEmpty.tsx  |    11 +
 .../src/components/CardBoxComponentFooter.tsx |    10 +
 .../src/components/CardBoxComponentTitle.tsx  |    17 +
 frontend/src/components/CardBoxModal.tsx      |    59 +
 .../src/components/ChartLineSample/config.ts  |    54 +
 .../src/components/ChartLineSample/index.tsx  |    37 +
 frontend/src/components/ClickOutside.tsx      |    35 +
 .../components/Companies/CardCompanies.tsx    |   280 +
 .../components/Companies/ListCompanies.tsx    |   203 +
 .../components/Companies/TableCompanies.tsx   |   476 +
 .../Companies/configureCompaniesCols.tsx      |   285 +
 .../src/components/DataGridMultiSelect.tsx    |    55 +
 .../Departments/CardDepartments.tsx           |   159 +
 .../Departments/ListDepartments.tsx           |   120 +
 .../Departments/TableDepartments.tsx          |   476 +
 .../Departments/configureDepartmentsCols.tsx  |   158 +
 frontend/src/components/DevModeBadge.tsx      |   150 +
 .../Document_links/CardDocument_links.tsx     |   147 +
 .../Document_links/ListDocument_links.tsx     |   112 +
 .../Document_links/TableDocument_links.tsx    |   463 +
 .../configureDocument_linksCols.tsx           |   135 +
 .../Document_types/CardDocument_types.tsx     |   159 +
 .../Document_types/ListDocument_types.tsx     |   120 +
 .../Document_types/TableDocument_types.tsx    |   463 +
 .../configureDocument_typesCols.tsx           |   144 +
 .../components/Documents/CardDocuments.tsx    |   250 +
 .../components/Documents/ListDocuments.tsx    |   183 +
 .../components/Documents/TableDocuments.tsx   |   509 +
 .../Documents/configureDocumentsCols.tsx      |   286 +
 .../src/components/DragDropFilePicker.tsx     |   124 +
 frontend/src/components/ErrorBoundary.tsx     |   218 +
 frontend/src/components/FooterBar.tsx         |    35 +
 frontend/src/components/FormCheckRadio.tsx    |    20 +
 .../src/components/FormCheckRadioGroup.tsx    |    20 +
 frontend/src/components/FormField.tsx         |    80 +
 frontend/src/components/FormFilePicker.tsx    |    92 +
 frontend/src/components/FormImagePicker.tsx   |    90 +
 .../CardGoods_receipt_lines.tsx               |   183 +
 .../ListGoods_receipt_lines.tsx               |   136 +
 .../TableGoods_receipt_lines.tsx              |   463 +
 .../configureGoods_receipt_linesCols.tsx      |   197 +
 .../Goods_receipts/CardGoods_receipts.tsx     |   226 +
 .../Goods_receipts/ListGoods_receipts.tsx     |   167 +
 .../Goods_receipts/TableGoods_receipts.tsx    |   489 +
 .../configureGoods_receiptsCols.tsx           |   263 +
 frontend/src/components/IconRounded.tsx       |    34 +
 frontend/src/components/ImageField.tsx        |    51 +
 frontend/src/components/IntroGuide.tsx        |    55 +
 .../Invoice_lines/CardInvoice_lines.tsx       |   183 +
 .../Invoice_lines/ListInvoice_lines.tsx       |   136 +
 .../Invoice_lines/TableInvoice_lines.tsx      |   463 +
 .../configureInvoice_linesCols.tsx            |   191 +
 .../components/KanbanBoard/KanbanBoard.tsx    |    51 +
 .../src/components/KanbanBoard/KanbanCard.tsx |    64 +
 .../components/KanbanBoard/KanbanColumn.tsx   |   209 +
 frontend/src/components/LanguageSwitcher.tsx  |    96 +
 .../src/components/ListActionsPopover.tsx     |   115 +
 frontend/src/components/LoadingSpinner.tsx    |    18 +
 frontend/src/components/Logo/index.tsx        |    15 +
 frontend/src/components/NavBar.tsx            |    57 +
 frontend/src/components/NavBarItem.tsx        |   132 +
 frontend/src/components/NavBarItemPlain.tsx   |    30 +
 frontend/src/components/NavBarMenuList.tsx    |    19 +
 frontend/src/components/NotificationBar.tsx   |    57 +
 .../Organizations/CardOrganizations.tsx       |   111 +
 .../Organizations/ListOrganizations.tsx       |    88 +
 .../Organizations/TableOrganizations.tsx      |   463 +
 .../configureOrganizationsCols.tsx            |    83 +
 frontend/src/components/OverlayLayer.tsx      |    41 +
 frontend/src/components/Pagination.tsx        |    85 +
 .../src/components/PasswordSetOrReset.tsx     |   113 +
 .../src/components/Payments/CardPayments.tsx  |   226 +
 .../src/components/Payments/ListPayments.tsx  |   167 +
 .../src/components/Payments/TablePayments.tsx |   468 +
 .../Payments/configurePaymentsCols.tsx        |   254 +
 .../Permissions/CardPermissions.tsx           |   111 +
 .../Permissions/ListPermissions.tsx           |    88 +
 .../Permissions/TablePermissions.tsx          |   463 +
 .../Permissions/configurePermissionsCols.tsx  |    83 +
 .../CardProduct_categories.tsx                |   147 +
 .../ListProduct_categories.tsx                |   112 +
 .../TableProduct_categories.tsx               |   476 +
 .../configureProduct_categoriesCols.tsx       |   135 +
 .../src/components/Products/CardProducts.tsx  |   268 +
 .../src/components/Products/ListProducts.tsx  |   195 +
 .../src/components/Products/TableProducts.tsx |   463 +
 .../Products/configureProductsCols.tsx        |   287 +
 .../CardPurchase_order_lines.tsx              |   207 +
 .../ListPurchase_order_lines.tsx              |   152 +
 .../TablePurchase_order_lines.tsx             |   463 +
 .../configurePurchase_order_linesCols.tsx     |   229 +
 .../Purchase_orders/CardPurchase_orders.tsx   |   286 +
 .../Purchase_orders/ListPurchase_orders.tsx   |   207 +
 .../Purchase_orders/TablePurchase_orders.tsx  |   513 +
 .../configurePurchase_ordersCols.tsx          |   342 +
 .../CardPurchase_requisition_lines.tsx        |   183 +
 .../ListPurchase_requisition_lines.tsx        |   136 +
 .../TablePurchase_requisition_lines.tsx       |   463 +
 ...onfigurePurchase_requisition_linesCols.tsx |   197 +
 .../CardPurchase_requisitions.tsx             |   226 +
 .../ListPurchase_requisitions.tsx             |   167 +
 .../TablePurchase_requisitions.tsx            |   511 +
 .../configurePurchase_requisitionsCols.tsx    |   257 +
 frontend/src/components/RichTextField.tsx     |    44 +
 .../CardRole_permission_mappings.tsx          |   135 +
 .../ListRole_permission_mappings.tsx          |   104 +
 .../TableRole_permission_mappings.tsx         |   463 +
 .../configureRole_permission_mappingsCols.tsx |   128 +
 frontend/src/components/Roles/CardRoles.tsx   |   135 +
 frontend/src/components/Roles/ListRoles.tsx   |   104 +
 frontend/src/components/Roles/TableRoles.tsx  |   463 +
 .../components/Roles/configureRolesCols.tsx   |   119 +
 frontend/src/components/Search.tsx            |    50 +
 frontend/src/components/SearchResults.tsx     |    83 +
 frontend/src/components/SectionFullScreen.tsx |    27 +
 frontend/src/components/SectionMain.tsx       |    10 +
 frontend/src/components/SectionTitle.tsx      |    27 +
 .../components/SectionTitleLineWithButton.tsx |    29 +
 frontend/src/components/SelectField.tsx       |    53 +
 frontend/src/components/SelectFieldMany.tsx   |    67 +
 .../components/SmartWidget/SmartWidget.tsx    |    99 +
 .../SmartWidget/components/AreaChart.tsx      |    18 +
 .../components/AreaChart/ApexAreaChart.tsx    |   135 +
 .../components/AreaChart/ChartJSAreaChart.tsx |    96 +
 .../SmartWidget/components/BarChart.tsx       |    18 +
 .../components/BarChart/ApexBarChart.tsx      |   131 +
 .../components/BarChart/ChartJSBarChart.tsx   |    92 +
 .../SmartWidget/components/FunnelChart.tsx    |   134 +
 .../SmartWidget/components/LineChart.tsx      |    18 +
 .../components/LineChart/ApexLineChart.tsx    |   135 +
 .../components/LineChart/ChartJSLineChart.tsx |    97 +
 .../SmartWidget/components/PieChart.tsx       |    18 +
 .../components/PieChart/ApexPieChart.tsx      |   106 +
 .../components/PieChart/ChartJSPieChart.tsx   |    81 +
 .../SmartWidget/models/widget.model.ts        |    35 +
 .../components/SmartWidget/widgetHelpers.tsx  |    36 +
 frontend/src/components/SwitchField.tsx       |    22 +
 .../src/components/TableSampleClients.tsx     |   141 +
 .../Ui_announcements/CardUi_announcements.tsx |   183 +
 .../Ui_announcements/ListUi_announcements.tsx |   136 +
 .../TableUi_announcements.tsx                 |   489 +
 .../configureUi_announcementsCols.tsx         |   187 +
 .../src/components/Uploaders/FilesUploader.js |   150 +
 .../components/Uploaders/ImagesUploader.js    |   237 +
 .../src/components/Uploaders/UploadService.js |    79 +
 frontend/src/components/UserAvatar.tsx        |    46 +
 .../src/components/UserAvatarCurrentUser.tsx  |    43 +
 frontend/src/components/UserCard.tsx          |    49 +
 .../CardUser_role_assignments.tsx             |   171 +
 .../ListUser_role_assignments.tsx             |   128 +
 .../TableUser_role_assignments.tsx            |   489 +
 .../configureUser_role_assignmentsCols.tsx    |   186 +
 frontend/src/components/Users/CardUsers.tsx   |   220 +
 frontend/src/components/Users/ListUsers.tsx   |   163 +
 frontend/src/components/Users/TableUsers.tsx  |   463 +
 .../components/Users/configureUsersCols.tsx   |   229 +
 .../Vendor_invoices/CardVendor_invoices.tsx   |   274 +
 .../Vendor_invoices/ListVendor_invoices.tsx   |   199 +
 .../Vendor_invoices/TableVendor_invoices.tsx  |   511 +
 .../configureVendor_invoicesCols.tsx          |   326 +
 .../src/components/Vendors/CardVendors.tsx    |   207 +
 .../src/components/Vendors/ListVendors.tsx    |   152 +
 .../src/components/Vendors/TableVendors.tsx   |   463 +
 .../Vendors/configureVendorsCols.tsx          |   210 +
 .../components/Warehouses/CardWarehouses.tsx  |   171 +
 .../components/Warehouses/ListWarehouses.tsx  |   128 +
 .../components/Warehouses/TableWarehouses.tsx |   476 +
 .../Warehouses/configureWarehousesCols.tsx    |   167 +
 .../components/WidgetCreator/RoleSelect.tsx   |    53 +
 .../WidgetCreator/WidgetCreator.tsx           |   140 +
 frontend/src/config.ts                        |    15 +
 frontend/src/css/_app.css                     |    32 +
 frontend/src/css/_calendar.css                |    39 +
 frontend/src/css/_checkbox-radio-switch.css   |    59 +
 frontend/src/css/_helper.css                  |    23 +
 frontend/src/css/_progress.css                |    21 +
 frontend/src/css/_rich-text.css               |     1 +
 frontend/src/css/_scrollbars.css              |    41 +
 frontend/src/css/_select-dropdown.css         |    31 +
 frontend/src/css/_table.css                   |   117 +
 frontend/src/css/_theme.css                   |   103 +
 frontend/src/css/main.css                     |    35 +
 frontend/src/css/tailwind/_base.css           |     1 +
 frontend/src/css/tailwind/_components.css     |     1 +
 frontend/src/css/tailwind/_utilities.css      |     1 +
 frontend/src/helpers/dataFormatter.js         |   461 +
 frontend/src/helpers/fileSaver.ts             |     6 +
 frontend/src/helpers/humanize.ts              |    11 +
 frontend/src/helpers/notifyStateHandler.ts    |    31 +
 frontend/src/helpers/pexels.ts                |    76 +
 frontend/src/helpers/userPermissions.ts       |    18 +
 frontend/src/hooks/sampleData.ts              |    22 +
 frontend/src/hooks/useDevCompilationStatus.ts |    44 +
 frontend/src/i18n.ts                          |    21 +
 frontend/src/interfaces/index.ts              |   109 +
 frontend/src/layouts/Authenticated.tsx        |   129 +
 frontend/src/layouts/Guest.tsx                |    17 +
 frontend/src/menuAside.ts                     |   259 +
 frontend/src/menuNavBar.ts                    |    53 +
 frontend/src/pages/_app.tsx                   |   201 +
 .../pages/activity_logs/[activity_logsId].tsx |   811 +
 .../activity_logs/activity_logs-edit.tsx      |   808 +
 .../activity_logs/activity_logs-list.tsx      |   166 +
 .../pages/activity_logs/activity_logs-new.tsx |   522 +
 .../activity_logs/activity_logs-table.tsx     |   168 +
 .../activity_logs/activity_logs-view.tsx      |   505 +
 frontend/src/pages/api/hello.js               |     5 +
 frontend/src/pages/api/logError.ts            |    83 +
 .../approval_steps/[approval_stepsId].tsx     |   843 +
 .../approval_steps/approval_steps-edit.tsx    |   840 +
 .../approval_steps/approval_steps-list.tsx    |   170 +
 .../approval_steps/approval_steps-new.tsx     |   487 +
 .../approval_steps/approval_steps-table.tsx   |   172 +
 .../approval_steps/approval_steps-view.tsx    |   666 +
 .../[approval_workflowsId].tsx                |   645 +
 .../approval_workflows-edit.tsx               |   642 +
 .../approval_workflows-list.tsx               |   170 +
 .../approval_workflows-new.tsx                |   388 +
 .../approval_workflows-table.tsx              |   168 +
 .../approval_workflows-view.tsx               |   624 +
 .../src/pages/approvals/[approvalsId].tsx     |  1183 ++
 .../src/pages/approvals/approvals-edit.tsx    |  1180 ++
 .../src/pages/approvals/approvals-list.tsx    |   180 +
 .../src/pages/approvals/approvals-new.tsx     |   637 +
 .../src/pages/approvals/approvals-table.tsx   |   180 +
 .../src/pages/approvals/approvals-view.tsx    |   795 +
 .../src/pages/companies/[companiesId].tsx     |  1172 ++
 .../src/pages/companies/companies-edit.tsx    |  1169 ++
 .../src/pages/companies/companies-list.tsx    |   166 +
 .../src/pages/companies/companies-new.tsx     |   858 +
 .../src/pages/companies/companies-table.tsx   |   164 +
 .../src/pages/companies/companies-view.tsx    |  2045 ++
 frontend/src/pages/dashboard.tsx              |   992 +
 .../src/pages/departments/[departmentsId].tsx |   710 +
 .../pages/departments/departments-edit.tsx    |   707 +
 .../pages/departments/departments-list.tsx    |   174 +
 .../src/pages/departments/departments-new.tsx |   382 +
 .../pages/departments/departments-table.tsx   |   172 +
 .../pages/departments/departments-view.tsx    |   602 +
 .../document_links/[document_linksId].tsx     |   583 +
 .../document_links/document_links-edit.tsx    |   580 +
 .../document_links/document_links-list.tsx    |   166 +
 .../document_links/document_links-new.tsx     |   340 +
 .../document_links/document_links-table.tsx   |   168 +
 .../document_links/document_links-view.tsx    |   401 +
 .../document_types/[document_typesId].tsx     |   580 +
 .../document_types/document_types-edit.tsx    |   577 +
 .../document_types/document_types-list.tsx    |   162 +
 .../document_types/document_types-new.tsx     |   393 +
 .../document_types/document_types-table.tsx   |   164 +
 .../document_types/document_types-view.tsx    |   497 +
 .../src/pages/documents/[documentsId].tsx     |  1257 ++
 .../src/pages/documents/documents-edit.tsx    |  1254 ++
 .../src/pages/documents/documents-list.tsx    |   176 +
 .../src/pages/documents/documents-new.tsx     |   753 +
 .../src/pages/documents/documents-table.tsx   |   176 +
 .../src/pages/documents/documents-view.tsx    |   867 +
 frontend/src/pages/error.tsx                  |    35 +
 frontend/src/pages/forgot.tsx                 |    82 +
 frontend/src/pages/forms.tsx                  |   142 +
 .../[goods_receipt_linesId].tsx               |   904 +
 .../goods_receipt_lines-edit.tsx              |   901 +
 .../goods_receipt_lines-list.tsx              |   174 +
 .../goods_receipt_lines-new.tsx               |   478 +
 .../goods_receipt_lines-table.tsx             |   176 +
 .../goods_receipt_lines-view.tsx              |   621 +
 .../goods_receipts/[goods_receiptsId].tsx     |  1183 ++
 .../goods_receipts/goods_receipts-edit.tsx    |  1180 ++
 .../goods_receipts/goods_receipts-list.tsx    |   182 +
 .../goods_receipts/goods_receipts-new.tsx     |   646 +
 .../goods_receipts/goods_receipts-table.tsx   |   180 +
 .../goods_receipts/goods_receipts-view.tsx    |  1014 +
 frontend/src/pages/index.tsx                  |   166 +
 .../pages/invoice_lines/[invoice_linesId].tsx |   840 +
 .../invoice_lines/invoice_lines-edit.tsx      |   837 +
 .../invoice_lines/invoice_lines-list.tsx      |   170 +
 .../pages/invoice_lines/invoice_lines-new.tsx |   484 +
 .../invoice_lines/invoice_lines-table.tsx     |   172 +
 .../invoice_lines/invoice_lines-view.tsx      |   559 +
 frontend/src/pages/login.tsx                  |   283 +
 .../pages/organizations/[organizationsId].tsx |   191 +
 .../organizations/organizations-edit.tsx      |   188 +
 .../organizations/organizations-list.tsx      |   162 +
 .../pages/organizations/organizations-new.tsx |   143 +
 .../organizations/organizations-table.tsx     |   160 +
 .../organizations/organizations-view.tsx      |  2582 +++
 frontend/src/pages/password-reset.tsx         |    12 +
 frontend/src/pages/payments/[paymentsId].tsx  |  1124 ++
 frontend/src/pages/payments/payments-edit.tsx |  1121 ++
 frontend/src/pages/payments/payments-list.tsx |   178 +
 frontend/src/pages/payments/payments-new.tsx  |   653 +
 .../src/pages/payments/payments-table.tsx     |   176 +
 frontend/src/pages/payments/payments-view.tsx |   734 +
 .../src/pages/permissions/[permissionsId].tsx |   191 +
 .../pages/permissions/permissions-edit.tsx    |   188 +
 .../pages/permissions/permissions-list.tsx    |   162 +
 .../src/pages/permissions/permissions-new.tsx |   143 +
 .../pages/permissions/permissions-table.tsx   |   160 +
 .../pages/permissions/permissions-view.tsx    |   195 +
 frontend/src/pages/privacy-policy.tsx         |   292 +
 .../[product_categoriesId].tsx                |   576 +
 .../product_categories-edit.tsx               |   573 +
 .../product_categories-list.tsx               |   170 +
 .../product_categories-new.tsx                |   332 +
 .../product_categories-table.tsx              |   168 +
 .../product_categories-view.tsx               |   534 +
 frontend/src/pages/products/[productsId].tsx  |  1242 ++
 frontend/src/pages/products/products-edit.tsx |  1239 ++
 frontend/src/pages/products/products-list.tsx |   170 +
 frontend/src/pages/products/products-new.tsx  |   803 +
 .../src/pages/products/products-table.tsx     |   172 +
 frontend/src/pages/products/products-view.tsx |  1108 ++
 frontend/src/pages/profile.tsx                |   180 +
 .../[purchase_order_linesId].tsx              |  1036 +
 .../purchase_order_lines-edit.tsx             |  1033 +
 .../purchase_order_lines-list.tsx             |   174 +
 .../purchase_order_lines-new.tsx              |   582 +
 .../purchase_order_lines-table.tsx            |   176 +
 .../purchase_order_lines-view.tsx             |   764 +
 .../purchase_orders/[purchase_ordersId].tsx   |  1533 ++
 .../purchase_orders/purchase_orders-edit.tsx  |  1530 ++
 .../purchase_orders/purchase_orders-list.tsx  |   180 +
 .../purchase_orders/purchase_orders-new.tsx   |   917 +
 .../purchase_orders/purchase_orders-table.tsx |   180 +
 .../purchase_orders/purchase_orders-view.tsx  |  1295 ++
 .../[purchase_requisition_linesId].tsx        |   904 +
 .../purchase_requisition_lines-edit.tsx       |   901 +
 .../purchase_requisition_lines-list.tsx       |   174 +
 .../purchase_requisition_lines-new.tsx        |   478 +
 .../purchase_requisition_lines-table.tsx      |   176 +
 .../purchase_requisition_lines-view.tsx       |   621 +
 .../[purchase_requisitionsId].tsx             |  1125 ++
 .../purchase_requisitions-edit.tsx            |  1122 ++
 .../purchase_requisitions-list.tsx            |   176 +
 .../purchase_requisitions-new.tsx             |   648 +
 .../purchase_requisitions-table.tsx           |   176 +
 .../purchase_requisitions-view.tsx            |   962 +
 frontend/src/pages/register.tsx               |   134 +
 .../[role_permission_mappingsId].tsx          |   580 +
 .../role_permission_mappings-edit.tsx         |   577 +
 .../role_permission_mappings-list.tsx         |   170 +
 .../role_permission_mappings-new.tsx          |   280 +
 .../role_permission_mappings-table.tsx        |   172 +
 .../role_permission_mappings-view.tsx         |   435 +
 frontend/src/pages/roles/[rolesId].tsx        |   382 +
 frontend/src/pages/roles/roles-edit.tsx       |   379 +
 frontend/src/pages/roles/roles-list.tsx       |   162 +
 frontend/src/pages/roles/roles-new.tsx        |   245 +
 frontend/src/pages/roles/roles-table.tsx      |   160 +
 frontend/src/pages/roles/roles-view.tsx       |   603 +
 frontend/src/pages/search.tsx                 |    96 +
 frontend/src/pages/tables.tsx                 |    33 +
 frontend/src/pages/terms-of-use.tsx           |   206 +
 .../ui_announcements/[ui_announcementsId].tsx |   793 +
 .../ui_announcements-edit.tsx                 |   790 +
 .../ui_announcements-list.tsx                 |   170 +
 .../ui_announcements/ui_announcements-new.tsx |   508 +
 .../ui_announcements-table.tsx                |   168 +
 .../ui_announcements-view.tsx                 |   520 +
 .../[user_role_assignmentsId].tsx             |   852 +
 .../user_role_assignments-edit.tsx            |   849 +
 .../user_role_assignments-list.tsx            |   178 +
 .../user_role_assignments-new.tsx             |   440 +
 .../user_role_assignments-table.tsx           |   176 +
 .../user_role_assignments-view.tsx            |   609 +
 frontend/src/pages/users/[usersId].tsx        |   920 +
 frontend/src/pages/users/users-edit.tsx       |   917 +
 frontend/src/pages/users/users-list.tsx       |   168 +
 frontend/src/pages/users/users-new.tsx        |   548 +
 frontend/src/pages/users/users-table.tsx      |   166 +
 frontend/src/pages/users/users-view.tsx       |  1530 ++
 .../vendor_invoices/[vendor_invoicesId].tsx   |  1465 ++
 .../vendor_invoices/vendor_invoices-edit.tsx  |  1462 ++
 .../vendor_invoices/vendor_invoices-list.tsx  |   180 +
 .../vendor_invoices/vendor_invoices-new.tsx   |   863 +
 .../vendor_invoices/vendor_invoices-table.tsx |   180 +
 .../vendor_invoices/vendor_invoices-view.tsx  |  1124 ++
 frontend/src/pages/vendors/[vendorsId].tsx    |   904 +
 frontend/src/pages/vendors/vendors-edit.tsx   |   901 +
 frontend/src/pages/vendors/vendors-list.tsx   |   166 +
 frontend/src/pages/vendors/vendors-new.tsx    |   591 +
 frontend/src/pages/vendors/vendors-table.tsx  |   168 +
 frontend/src/pages/vendors/vendors-view.tsx   |   936 +
 frontend/src/pages/verify-email.tsx           |    62 +
 .../src/pages/warehouses/[warehousesId].tsx   |   704 +
 .../src/pages/warehouses/warehouses-edit.tsx  |   701 +
 .../src/pages/warehouses/warehouses-list.tsx  |   170 +
 .../src/pages/warehouses/warehouses-new.tsx   |   432 +
 .../src/pages/warehouses/warehouses-table.tsx |   168 +
 .../src/pages/warehouses/warehouses-view.tsx  |   746 +
 .../activity_logs/activity_logsSlice.ts       |   231 +
 .../approval_steps/approval_stepsSlice.ts     |   231 +
 .../approval_workflowsSlice.ts                |   231 +
 .../src/stores/approvals/approvalsSlice.ts    |   231 +
 frontend/src/stores/authSlice.ts              |   124 +
 .../src/stores/companies/companiesSlice.ts    |   231 +
 .../stores/departments/departmentsSlice.ts    |   231 +
 .../document_links/document_linksSlice.ts     |   231 +
 .../document_types/document_typesSlice.ts     |   231 +
 .../src/stores/documents/documentsSlice.ts    |   231 +
 .../goods_receipt_linesSlice.ts               |   231 +
 .../goods_receipts/goods_receiptsSlice.ts     |   231 +
 frontend/src/stores/hooks.ts                  |     6 +
 frontend/src/stores/introSteps.ts             |   139 +
 .../invoice_lines/invoice_linesSlice.ts       |   231 +
 frontend/src/stores/mainSlice.ts              |    36 +
 frontend/src/stores/openAiSlice.ts            |   151 +
 .../organizations/organizationsSlice.ts       |   231 +
 frontend/src/stores/payments/paymentsSlice.ts |   231 +
 .../stores/permissions/permissionsSlice.ts    |   231 +
 .../product_categoriesSlice.ts                |   231 +
 frontend/src/stores/products/productsSlice.ts |   231 +
 .../purchase_order_linesSlice.ts              |   231 +
 .../purchase_orders/purchase_ordersSlice.ts   |   231 +
 .../purchase_requisition_linesSlice.ts        |   231 +
 .../purchase_requisitionsSlice.ts             |   231 +
 .../role_permission_mappingsSlice.ts          |   231 +
 frontend/src/stores/roles/rolesSlice.ts       |   280 +
 frontend/src/stores/store.ts                  |    79 +
 frontend/src/stores/styleSlice.ts             |   103 +
 .../ui_announcements/ui_announcementsSlice.ts |   231 +
 .../user_role_assignmentsSlice.ts             |   231 +
 frontend/src/stores/users/usersSlice.ts       |   231 +
 frontend/src/stores/usersSlice.ts             |   117 +
 .../vendor_invoices/vendor_invoicesSlice.ts   |   231 +
 frontend/src/stores/vendors/vendorsSlice.ts   |   231 +
 .../src/stores/warehouses/warehousesSlice.ts  |   231 +
 frontend/src/styles.ts                        |   107 +
 frontend/tailwind.config.js                   |   110 +
 frontend/tsconfig.json                        |    30 +
 frontend/yarn.lock                            |  3608 ++++
 nginx.conf                                    |    96 +
 package.json                                  |     8 +
 663 files changed, 227426 insertions(+)
 create mode 100644 .cursorrules
 create mode 100644 .dockerignore
 create mode 100644 .gitignore
 create mode 100644 .perm_test_apache
 create mode 100644 .perm_test_exec
 create mode 100644 502.html
 create mode 100644 Dockerfile
 create mode 100644 Dockerfile.dev
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 backend/.env
 create mode 100644 backend/.eslintignore
 create mode 100644 backend/.eslintrc.cjs
 create mode 100644 backend/.prettierrc
 create mode 100644 backend/.sequelizerc
 create mode 100644 backend/Dockerfile
 create mode 100644 backend/README.md
 create mode 100644 backend/package.json
 create mode 100644 backend/src/ai/LocalAIApi.js
 create mode 100644 backend/src/auth/auth.js
 create mode 100644 backend/src/config.js
 create mode 100644 backend/src/db/api/activity_logs.js
 create mode 100644 backend/src/db/api/approval_steps.js
 create mode 100644 backend/src/db/api/approval_workflows.js
 create mode 100644 backend/src/db/api/approvals.js
 create mode 100644 backend/src/db/api/companies.js
 create mode 100644 backend/src/db/api/departments.js
 create mode 100644 backend/src/db/api/document_links.js
 create mode 100644 backend/src/db/api/document_types.js
 create mode 100644 backend/src/db/api/documents.js
 create mode 100644 backend/src/db/api/file.js
 create mode 100644 backend/src/db/api/goods_receipt_lines.js
 create mode 100644 backend/src/db/api/goods_receipts.js
 create mode 100644 backend/src/db/api/invoice_lines.js
 create mode 100644 backend/src/db/api/organizations.js
 create mode 100644 backend/src/db/api/payments.js
 create mode 100644 backend/src/db/api/permissions.js
 create mode 100644 backend/src/db/api/product_categories.js
 create mode 100644 backend/src/db/api/products.js
 create mode 100644 backend/src/db/api/purchase_order_lines.js
 create mode 100644 backend/src/db/api/purchase_orders.js
 create mode 100644 backend/src/db/api/purchase_requisition_lines.js
 create mode 100644 backend/src/db/api/purchase_requisitions.js
 create mode 100644 backend/src/db/api/role_permission_mappings.js
 create mode 100644 backend/src/db/api/roles.js
 create mode 100644 backend/src/db/api/ui_announcements.js
 create mode 100644 backend/src/db/api/user_role_assignments.js
 create mode 100644 backend/src/db/api/users.js
 create mode 100644 backend/src/db/api/vendor_invoices.js
 create mode 100644 backend/src/db/api/vendors.js
 create mode 100644 backend/src/db/api/warehouses.js
 create mode 100644 backend/src/db/db.config.js
 create mode 100644 backend/src/db/migrations/1774958148418.js
 create mode 100644 backend/src/db/migrations/20260316000000-create-files.js
 create mode 100644 backend/src/db/migrations/20260316001000-create-users-custom-permissions-join-table.js
 create mode 100644 backend/src/db/models/activity_logs.js
 create mode 100644 backend/src/db/models/approval_steps.js
 create mode 100644 backend/src/db/models/approval_workflows.js
 create mode 100644 backend/src/db/models/approvals.js
 create mode 100644 backend/src/db/models/companies.js
 create mode 100644 backend/src/db/models/departments.js
 create mode 100644 backend/src/db/models/document_links.js
 create mode 100644 backend/src/db/models/document_types.js
 create mode 100644 backend/src/db/models/documents.js
 create mode 100644 backend/src/db/models/file.js
 create mode 100644 backend/src/db/models/goods_receipt_lines.js
 create mode 100644 backend/src/db/models/goods_receipts.js
 create mode 100644 backend/src/db/models/index.js
 create mode 100644 backend/src/db/models/invoice_lines.js
 create mode 100644 backend/src/db/models/organizations.js
 create mode 100644 backend/src/db/models/payments.js
 create mode 100644 backend/src/db/models/permissions.js
 create mode 100644 backend/src/db/models/product_categories.js
 create mode 100644 backend/src/db/models/products.js
 create mode 100644 backend/src/db/models/purchase_order_lines.js
 create mode 100644 backend/src/db/models/purchase_orders.js
 create mode 100644 backend/src/db/models/purchase_requisition_lines.js
 create mode 100644 backend/src/db/models/purchase_requisitions.js
 create mode 100644 backend/src/db/models/role_permission_mappings.js
 create mode 100644 backend/src/db/models/roles.js
 create mode 100644 backend/src/db/models/ui_announcements.js
 create mode 100644 backend/src/db/models/user_role_assignments.js
 create mode 100644 backend/src/db/models/users.js
 create mode 100644 backend/src/db/models/vendor_invoices.js
 create mode 100644 backend/src/db/models/vendors.js
 create mode 100644 backend/src/db/models/warehouses.js
 create mode 100644 backend/src/db/reset.js
 create mode 100644 backend/src/db/seeders/20200430130759-admin-user.js
 create mode 100644 backend/src/db/seeders/20200430130760-user-roles.js
 create mode 100644 backend/src/db/seeders/20231127130745-sample-data.js
 create mode 100644 backend/src/db/utils.js
 create mode 100644 backend/src/helpers.js
 create mode 100644 backend/src/index.js
 create mode 100644 backend/src/middlewares/check-permissions.js
 create mode 100644 backend/src/middlewares/upload.js
 create mode 100644 backend/src/routes/activity_logs.js
 create mode 100644 backend/src/routes/approval_steps.js
 create mode 100644 backend/src/routes/approval_workflows.js
 create mode 100644 backend/src/routes/approvals.js
 create mode 100644 backend/src/routes/auth.js
 create mode 100644 backend/src/routes/companies.js
 create mode 100644 backend/src/routes/contactForm.js
 create mode 100644 backend/src/routes/departments.js
 create mode 100644 backend/src/routes/document_links.js
 create mode 100644 backend/src/routes/document_types.js
 create mode 100644 backend/src/routes/documents.js
 create mode 100644 backend/src/routes/file.js
 create mode 100644 backend/src/routes/goods_receipt_lines.js
 create mode 100644 backend/src/routes/goods_receipts.js
 create mode 100644 backend/src/routes/invoice_lines.js
 create mode 100644 backend/src/routes/openai.js
 create mode 100644 backend/src/routes/organizationLogin.js
 create mode 100644 backend/src/routes/organizations.js
 create mode 100644 backend/src/routes/payments.js
 create mode 100644 backend/src/routes/permissions.js
 create mode 100644 backend/src/routes/pexels.js
 create mode 100644 backend/src/routes/product_categories.js
 create mode 100644 backend/src/routes/products.js
 create mode 100644 backend/src/routes/purchase_order_lines.js
 create mode 100644 backend/src/routes/purchase_orders.js
 create mode 100644 backend/src/routes/purchase_requisition_lines.js
 create mode 100644 backend/src/routes/purchase_requisitions.js
 create mode 100644 backend/src/routes/role_permission_mappings.js
 create mode 100644 backend/src/routes/roles.js
 create mode 100644 backend/src/routes/search.js
 create mode 100644 backend/src/routes/sql.js
 create mode 100644 backend/src/routes/ui_announcements.js
 create mode 100644 backend/src/routes/user_role_assignments.js
 create mode 100644 backend/src/routes/users.js
 create mode 100644 backend/src/routes/vendor_invoices.js
 create mode 100644 backend/src/routes/vendors.js
 create mode 100644 backend/src/routes/warehouses.js
 create mode 100644 backend/src/services/activity_logs.js
 create mode 100644 backend/src/services/approval_steps.js
 create mode 100644 backend/src/services/approval_workflows.js
 create mode 100644 backend/src/services/approvals.js
 create mode 100644 backend/src/services/auth.js
 create mode 100644 backend/src/services/companies.js
 create mode 100644 backend/src/services/departments.js
 create mode 100644 backend/src/services/document_links.js
 create mode 100644 backend/src/services/document_types.js
 create mode 100644 backend/src/services/documents.js
 create mode 100644 backend/src/services/email/htmlTemplates/addressVerification/emailAddressVerification.html
 create mode 100644 backend/src/services/email/htmlTemplates/invitation/invitationTemplate.html
 create mode 100644 backend/src/services/email/htmlTemplates/passwordReset/passwordResetEmail.html
 create mode 100644 backend/src/services/email/index.js
 create mode 100644 backend/src/services/email/list/addressVerification.js
 create mode 100644 backend/src/services/email/list/invitation.js
 create mode 100644 backend/src/services/email/list/passwordReset.js
 create mode 100644 backend/src/services/file.js
 create mode 100644 backend/src/services/goods_receipt_lines.js
 create mode 100644 backend/src/services/goods_receipts.js
 create mode 100644 backend/src/services/invoice_lines.js
 create mode 100644 backend/src/services/notifications/errors/forbidden.js
 create mode 100644 backend/src/services/notifications/errors/validation.js
 create mode 100644 backend/src/services/notifications/helpers.js
 create mode 100644 backend/src/services/notifications/list.js
 create mode 100644 backend/src/services/openai.js
 create mode 100644 backend/src/services/organizations.js
 create mode 100644 backend/src/services/payments.js
 create mode 100644 backend/src/services/permissions.js
 create mode 100644 backend/src/services/product_categories.js
 create mode 100644 backend/src/services/products.js
 create mode 100644 backend/src/services/purchase_order_lines.js
 create mode 100644 backend/src/services/purchase_orders.js
 create mode 100644 backend/src/services/purchase_requisition_lines.js
 create mode 100644 backend/src/services/purchase_requisitions.js
 create mode 100644 backend/src/services/role_permission_mappings.js
 create mode 100644 backend/src/services/roles.js
 create mode 100644 backend/src/services/search.js
 create mode 100644 backend/src/services/ui_announcements.js
 create mode 100644 backend/src/services/user_role_assignments.js
 create mode 100644 backend/src/services/users.js
 create mode 100644 backend/src/services/vendor_invoices.js
 create mode 100644 backend/src/services/vendors.js
 create mode 100644 backend/src/services/warehouses.js
 create mode 100644 backend/watcher.js
 create mode 100644 backend/yarn.lock
 create mode 100644 docker/.gitignore
 create mode 100644 docker/README.md
 create mode 100644 docker/docker-compose.yml
 create mode 100644 docker/start-backend.sh
 create mode 100644 docker/wait-for-it.sh
 create mode 100644 frontend/.eslintignore
 create mode 100644 frontend/.eslintrc.cjs
 create mode 100644 frontend/.gitignore
 create mode 100644 frontend/.prettierrc
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/LICENSE-justboil
 create mode 100644 frontend/README.md
 create mode 100644 frontend/next-env.d.ts
 create mode 100644 frontend/next.config.mjs
 create mode 100644 frontend/package.json
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/prettier.config.js
 create mode 100644 frontend/public/data-sources/clients.json
 create mode 100644 frontend/public/data-sources/history.json
 create mode 100644 frontend/public/favicon.svg
 create mode 100644 frontend/public/locales/de/common.json
 create mode 100644 frontend/public/locales/en/common.json
 create mode 100644 frontend/public/locales/es/common.json
 create mode 100644 frontend/public/locales/fr/common.json
 create mode 100644 frontend/src/colors.ts
 create mode 100644 frontend/src/components/Activity_logs/CardActivity_logs.tsx
 create mode 100644 frontend/src/components/Activity_logs/ListActivity_logs.tsx
 create mode 100644 frontend/src/components/Activity_logs/TableActivity_logs.tsx
 create mode 100644 frontend/src/components/Activity_logs/configureActivity_logsCols.tsx
 create mode 100644 frontend/src/components/Approval_steps/CardApproval_steps.tsx
 create mode 100644 frontend/src/components/Approval_steps/ListApproval_steps.tsx
 create mode 100644 frontend/src/components/Approval_steps/TableApproval_steps.tsx
 create mode 100644 frontend/src/components/Approval_steps/configureApproval_stepsCols.tsx
 create mode 100644 frontend/src/components/Approval_workflows/CardApproval_workflows.tsx
 create mode 100644 frontend/src/components/Approval_workflows/ListApproval_workflows.tsx
 create mode 100644 frontend/src/components/Approval_workflows/TableApproval_workflows.tsx
 create mode 100644 frontend/src/components/Approval_workflows/configureApproval_workflowsCols.tsx
 create mode 100644 frontend/src/components/Approvals/CardApprovals.tsx
 create mode 100644 frontend/src/components/Approvals/ListApprovals.tsx
 create mode 100644 frontend/src/components/Approvals/TableApprovals.tsx
 create mode 100644 frontend/src/components/Approvals/configureApprovalsCols.tsx
 create mode 100644 frontend/src/components/AsideMenu.tsx
 create mode 100644 frontend/src/components/AsideMenuItem.tsx
 create mode 100644 frontend/src/components/AsideMenuLayer.tsx
 create mode 100644 frontend/src/components/AsideMenuList.tsx
 create mode 100644 frontend/src/components/BaseButton.tsx
 create mode 100644 frontend/src/components/BaseButtons.tsx
 create mode 100644 frontend/src/components/BaseDivider.tsx
 create mode 100644 frontend/src/components/BaseIcon.tsx
 create mode 100644 frontend/src/components/BigCalendar.tsx
 create mode 100644 frontend/src/components/CardBox.tsx
 create mode 100644 frontend/src/components/CardBoxComponentBody.tsx
 create mode 100644 frontend/src/components/CardBoxComponentEmpty.tsx
 create mode 100644 frontend/src/components/CardBoxComponentFooter.tsx
 create mode 100644 frontend/src/components/CardBoxComponentTitle.tsx
 create mode 100644 frontend/src/components/CardBoxModal.tsx
 create mode 100644 frontend/src/components/ChartLineSample/config.ts
 create mode 100644 frontend/src/components/ChartLineSample/index.tsx
 create mode 100644 frontend/src/components/ClickOutside.tsx
 create mode 100644 frontend/src/components/Companies/CardCompanies.tsx
 create mode 100644 frontend/src/components/Companies/ListCompanies.tsx
 create mode 100644 frontend/src/components/Companies/TableCompanies.tsx
 create mode 100644 frontend/src/components/Companies/configureCompaniesCols.tsx
 create mode 100644 frontend/src/components/DataGridMultiSelect.tsx
 create mode 100644 frontend/src/components/Departments/CardDepartments.tsx
 create mode 100644 frontend/src/components/Departments/ListDepartments.tsx
 create mode 100644 frontend/src/components/Departments/TableDepartments.tsx
 create mode 100644 frontend/src/components/Departments/configureDepartmentsCols.tsx
 create mode 100644 frontend/src/components/DevModeBadge.tsx
 create mode 100644 frontend/src/components/Document_links/CardDocument_links.tsx
 create mode 100644 frontend/src/components/Document_links/ListDocument_links.tsx
 create mode 100644 frontend/src/components/Document_links/TableDocument_links.tsx
 create mode 100644 frontend/src/components/Document_links/configureDocument_linksCols.tsx
 create mode 100644 frontend/src/components/Document_types/CardDocument_types.tsx
 create mode 100644 frontend/src/components/Document_types/ListDocument_types.tsx
 create mode 100644 frontend/src/components/Document_types/TableDocument_types.tsx
 create mode 100644 frontend/src/components/Document_types/configureDocument_typesCols.tsx
 create mode 100644 frontend/src/components/Documents/CardDocuments.tsx
 create mode 100644 frontend/src/components/Documents/ListDocuments.tsx
 create mode 100644 frontend/src/components/Documents/TableDocuments.tsx
 create mode 100644 frontend/src/components/Documents/configureDocumentsCols.tsx
 create mode 100644 frontend/src/components/DragDropFilePicker.tsx
 create mode 100644 frontend/src/components/ErrorBoundary.tsx
 create mode 100644 frontend/src/components/FooterBar.tsx
 create mode 100644 frontend/src/components/FormCheckRadio.tsx
 create mode 100644 frontend/src/components/FormCheckRadioGroup.tsx
 create mode 100644 frontend/src/components/FormField.tsx
 create mode 100644 frontend/src/components/FormFilePicker.tsx
 create mode 100644 frontend/src/components/FormImagePicker.tsx
 create mode 100644 frontend/src/components/Goods_receipt_lines/CardGoods_receipt_lines.tsx
 create mode 100644 frontend/src/components/Goods_receipt_lines/ListGoods_receipt_lines.tsx
 create mode 100644 frontend/src/components/Goods_receipt_lines/TableGoods_receipt_lines.tsx
 create mode 100644 frontend/src/components/Goods_receipt_lines/configureGoods_receipt_linesCols.tsx
 create mode 100644 frontend/src/components/Goods_receipts/CardGoods_receipts.tsx
 create mode 100644 frontend/src/components/Goods_receipts/ListGoods_receipts.tsx
 create mode 100644 frontend/src/components/Goods_receipts/TableGoods_receipts.tsx
 create mode 100644 frontend/src/components/Goods_receipts/configureGoods_receiptsCols.tsx
 create mode 100644 frontend/src/components/IconRounded.tsx
 create mode 100644 frontend/src/components/ImageField.tsx
 create mode 100644 frontend/src/components/IntroGuide.tsx
 create mode 100644 frontend/src/components/Invoice_lines/CardInvoice_lines.tsx
 create mode 100644 frontend/src/components/Invoice_lines/ListInvoice_lines.tsx
 create mode 100644 frontend/src/components/Invoice_lines/TableInvoice_lines.tsx
 create mode 100644 frontend/src/components/Invoice_lines/configureInvoice_linesCols.tsx
 create mode 100644 frontend/src/components/KanbanBoard/KanbanBoard.tsx
 create mode 100644 frontend/src/components/KanbanBoard/KanbanCard.tsx
 create mode 100644 frontend/src/components/KanbanBoard/KanbanColumn.tsx
 create mode 100644 frontend/src/components/LanguageSwitcher.tsx
 create mode 100644 frontend/src/components/ListActionsPopover.tsx
 create mode 100644 frontend/src/components/LoadingSpinner.tsx
 create mode 100644 frontend/src/components/Logo/index.tsx
 create mode 100644 frontend/src/components/NavBar.tsx
 create mode 100644 frontend/src/components/NavBarItem.tsx
 create mode 100644 frontend/src/components/NavBarItemPlain.tsx
 create mode 100644 frontend/src/components/NavBarMenuList.tsx
 create mode 100644 frontend/src/components/NotificationBar.tsx
 create mode 100644 frontend/src/components/Organizations/CardOrganizations.tsx
 create mode 100644 frontend/src/components/Organizations/ListOrganizations.tsx
 create mode 100644 frontend/src/components/Organizations/TableOrganizations.tsx
 create mode 100644 frontend/src/components/Organizations/configureOrganizationsCols.tsx
 create mode 100644 frontend/src/components/OverlayLayer.tsx
 create mode 100644 frontend/src/components/Pagination.tsx
 create mode 100644 frontend/src/components/PasswordSetOrReset.tsx
 create mode 100644 frontend/src/components/Payments/CardPayments.tsx
 create mode 100644 frontend/src/components/Payments/ListPayments.tsx
 create mode 100644 frontend/src/components/Payments/TablePayments.tsx
 create mode 100644 frontend/src/components/Payments/configurePaymentsCols.tsx
 create mode 100644 frontend/src/components/Permissions/CardPermissions.tsx
 create mode 100644 frontend/src/components/Permissions/ListPermissions.tsx
 create mode 100644 frontend/src/components/Permissions/TablePermissions.tsx
 create mode 100644 frontend/src/components/Permissions/configurePermissionsCols.tsx
 create mode 100644 frontend/src/components/Product_categories/CardProduct_categories.tsx
 create mode 100644 frontend/src/components/Product_categories/ListProduct_categories.tsx
 create mode 100644 frontend/src/components/Product_categories/TableProduct_categories.tsx
 create mode 100644 frontend/src/components/Product_categories/configureProduct_categoriesCols.tsx
 create mode 100644 frontend/src/components/Products/CardProducts.tsx
 create mode 100644 frontend/src/components/Products/ListProducts.tsx
 create mode 100644 frontend/src/components/Products/TableProducts.tsx
 create mode 100644 frontend/src/components/Products/configureProductsCols.tsx
 create mode 100644 frontend/src/components/Purchase_order_lines/CardPurchase_order_lines.tsx
 create mode 100644 frontend/src/components/Purchase_order_lines/ListPurchase_order_lines.tsx
 create mode 100644 frontend/src/components/Purchase_order_lines/TablePurchase_order_lines.tsx
 create mode 100644 frontend/src/components/Purchase_order_lines/configurePurchase_order_linesCols.tsx
 create mode 100644 frontend/src/components/Purchase_orders/CardPurchase_orders.tsx
 create mode 100644 frontend/src/components/Purchase_orders/ListPurchase_orders.tsx
 create mode 100644 frontend/src/components/Purchase_orders/TablePurchase_orders.tsx
 create mode 100644 frontend/src/components/Purchase_orders/configurePurchase_ordersCols.tsx
 create mode 100644 frontend/src/components/Purchase_requisition_lines/CardPurchase_requisition_lines.tsx
 create mode 100644 frontend/src/components/Purchase_requisition_lines/ListPurchase_requisition_lines.tsx
 create mode 100644 frontend/src/components/Purchase_requisition_lines/TablePurchase_requisition_lines.tsx
 create mode 100644 frontend/src/components/Purchase_requisition_lines/configurePurchase_requisition_linesCols.tsx
 create mode 100644 frontend/src/components/Purchase_requisitions/CardPurchase_requisitions.tsx
 create mode 100644 frontend/src/components/Purchase_requisitions/ListPurchase_requisitions.tsx
 create mode 100644 frontend/src/components/Purchase_requisitions/TablePurchase_requisitions.tsx
 create mode 100644 frontend/src/components/Purchase_requisitions/configurePurchase_requisitionsCols.tsx
 create mode 100644 frontend/src/components/RichTextField.tsx
 create mode 100644 frontend/src/components/Role_permission_mappings/CardRole_permission_mappings.tsx
 create mode 100644 frontend/src/components/Role_permission_mappings/ListRole_permission_mappings.tsx
 create mode 100644 frontend/src/components/Role_permission_mappings/TableRole_permission_mappings.tsx
 create mode 100644 frontend/src/components/Role_permission_mappings/configureRole_permission_mappingsCols.tsx
 create mode 100644 frontend/src/components/Roles/CardRoles.tsx
 create mode 100644 frontend/src/components/Roles/ListRoles.tsx
 create mode 100644 frontend/src/components/Roles/TableRoles.tsx
 create mode 100644 frontend/src/components/Roles/configureRolesCols.tsx
 create mode 100644 frontend/src/components/Search.tsx
 create mode 100644 frontend/src/components/SearchResults.tsx
 create mode 100644 frontend/src/components/SectionFullScreen.tsx
 create mode 100644 frontend/src/components/SectionMain.tsx
 create mode 100644 frontend/src/components/SectionTitle.tsx
 create mode 100644 frontend/src/components/SectionTitleLineWithButton.tsx
 create mode 100644 frontend/src/components/SelectField.tsx
 create mode 100644 frontend/src/components/SelectFieldMany.tsx
 create mode 100644 frontend/src/components/SmartWidget/SmartWidget.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/AreaChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/AreaChart/ApexAreaChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/AreaChart/ChartJSAreaChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/BarChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/BarChart/ApexBarChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/BarChart/ChartJSBarChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/FunnelChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/LineChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/LineChart/ApexLineChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/LineChart/ChartJSLineChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/PieChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/PieChart/ApexPieChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/components/PieChart/ChartJSPieChart.tsx
 create mode 100644 frontend/src/components/SmartWidget/models/widget.model.ts
 create mode 100644 frontend/src/components/SmartWidget/widgetHelpers.tsx
 create mode 100644 frontend/src/components/SwitchField.tsx
 create mode 100644 frontend/src/components/TableSampleClients.tsx
 create mode 100644 frontend/src/components/Ui_announcements/CardUi_announcements.tsx
 create mode 100644 frontend/src/components/Ui_announcements/ListUi_announcements.tsx
 create mode 100644 frontend/src/components/Ui_announcements/TableUi_announcements.tsx
 create mode 100644 frontend/src/components/Ui_announcements/configureUi_announcementsCols.tsx
 create mode 100644 frontend/src/components/Uploaders/FilesUploader.js
 create mode 100644 frontend/src/components/Uploaders/ImagesUploader.js
 create mode 100644 frontend/src/components/Uploaders/UploadService.js
 create mode 100644 frontend/src/components/UserAvatar.tsx
 create mode 100644 frontend/src/components/UserAvatarCurrentUser.tsx
 create mode 100644 frontend/src/components/UserCard.tsx
 create mode 100644 frontend/src/components/User_role_assignments/CardUser_role_assignments.tsx
 create mode 100644 frontend/src/components/User_role_assignments/ListUser_role_assignments.tsx
 create mode 100644 frontend/src/components/User_role_assignments/TableUser_role_assignments.tsx
 create mode 100644 frontend/src/components/User_role_assignments/configureUser_role_assignmentsCols.tsx
 create mode 100644 frontend/src/components/Users/CardUsers.tsx
 create mode 100644 frontend/src/components/Users/ListUsers.tsx
 create mode 100644 frontend/src/components/Users/TableUsers.tsx
 create mode 100644 frontend/src/components/Users/configureUsersCols.tsx
 create mode 100644 frontend/src/components/Vendor_invoices/CardVendor_invoices.tsx
 create mode 100644 frontend/src/components/Vendor_invoices/ListVendor_invoices.tsx
 create mode 100644 frontend/src/components/Vendor_invoices/TableVendor_invoices.tsx
 create mode 100644 frontend/src/components/Vendor_invoices/configureVendor_invoicesCols.tsx
 create mode 100644 frontend/src/components/Vendors/CardVendors.tsx
 create mode 100644 frontend/src/components/Vendors/ListVendors.tsx
 create mode 100644 frontend/src/components/Vendors/TableVendors.tsx
 create mode 100644 frontend/src/components/Vendors/configureVendorsCols.tsx
 create mode 100644 frontend/src/components/Warehouses/CardWarehouses.tsx
 create mode 100644 frontend/src/components/Warehouses/ListWarehouses.tsx
 create mode 100644 frontend/src/components/Warehouses/TableWarehouses.tsx
 create mode 100644 frontend/src/components/Warehouses/configureWarehousesCols.tsx
 create mode 100644 frontend/src/components/WidgetCreator/RoleSelect.tsx
 create mode 100644 frontend/src/components/WidgetCreator/WidgetCreator.tsx
 create mode 100644 frontend/src/config.ts
 create mode 100644 frontend/src/css/_app.css
 create mode 100644 frontend/src/css/_calendar.css
 create mode 100644 frontend/src/css/_checkbox-radio-switch.css
 create mode 100644 frontend/src/css/_helper.css
 create mode 100644 frontend/src/css/_progress.css
 create mode 100644 frontend/src/css/_rich-text.css
 create mode 100644 frontend/src/css/_scrollbars.css
 create mode 100644 frontend/src/css/_select-dropdown.css
 create mode 100644 frontend/src/css/_table.css
 create mode 100644 frontend/src/css/_theme.css
 create mode 100644 frontend/src/css/main.css
 create mode 100644 frontend/src/css/tailwind/_base.css
 create mode 100644 frontend/src/css/tailwind/_components.css
 create mode 100644 frontend/src/css/tailwind/_utilities.css
 create mode 100644 frontend/src/helpers/dataFormatter.js
 create mode 100644 frontend/src/helpers/fileSaver.ts
 create mode 100644 frontend/src/helpers/humanize.ts
 create mode 100644 frontend/src/helpers/notifyStateHandler.ts
 create mode 100644 frontend/src/helpers/pexels.ts
 create mode 100644 frontend/src/helpers/userPermissions.ts
 create mode 100644 frontend/src/hooks/sampleData.ts
 create mode 100644 frontend/src/hooks/useDevCompilationStatus.ts
 create mode 100644 frontend/src/i18n.ts
 create mode 100644 frontend/src/interfaces/index.ts
 create mode 100644 frontend/src/layouts/Authenticated.tsx
 create mode 100644 frontend/src/layouts/Guest.tsx
 create mode 100644 frontend/src/menuAside.ts
 create mode 100644 frontend/src/menuNavBar.ts
 create mode 100644 frontend/src/pages/_app.tsx
 create mode 100644 frontend/src/pages/activity_logs/[activity_logsId].tsx
 create mode 100644 frontend/src/pages/activity_logs/activity_logs-edit.tsx
 create mode 100644 frontend/src/pages/activity_logs/activity_logs-list.tsx
 create mode 100644 frontend/src/pages/activity_logs/activity_logs-new.tsx
 create mode 100644 frontend/src/pages/activity_logs/activity_logs-table.tsx
 create mode 100644 frontend/src/pages/activity_logs/activity_logs-view.tsx
 create mode 100644 frontend/src/pages/api/hello.js
 create mode 100644 frontend/src/pages/api/logError.ts
 create mode 100644 frontend/src/pages/approval_steps/[approval_stepsId].tsx
 create mode 100644 frontend/src/pages/approval_steps/approval_steps-edit.tsx
 create mode 100644 frontend/src/pages/approval_steps/approval_steps-list.tsx
 create mode 100644 frontend/src/pages/approval_steps/approval_steps-new.tsx
 create mode 100644 frontend/src/pages/approval_steps/approval_steps-table.tsx
 create mode 100644 frontend/src/pages/approval_steps/approval_steps-view.tsx
 create mode 100644 frontend/src/pages/approval_workflows/[approval_workflowsId].tsx
 create mode 100644 frontend/src/pages/approval_workflows/approval_workflows-edit.tsx
 create mode 100644 frontend/src/pages/approval_workflows/approval_workflows-list.tsx
 create mode 100644 frontend/src/pages/approval_workflows/approval_workflows-new.tsx
 create mode 100644 frontend/src/pages/approval_workflows/approval_workflows-table.tsx
 create mode 100644 frontend/src/pages/approval_workflows/approval_workflows-view.tsx
 create mode 100644 frontend/src/pages/approvals/[approvalsId].tsx
 create mode 100644 frontend/src/pages/approvals/approvals-edit.tsx
 create mode 100644 frontend/src/pages/approvals/approvals-list.tsx
 create mode 100644 frontend/src/pages/approvals/approvals-new.tsx
 create mode 100644 frontend/src/pages/approvals/approvals-table.tsx
 create mode 100644 frontend/src/pages/approvals/approvals-view.tsx
 create mode 100644 frontend/src/pages/companies/[companiesId].tsx
 create mode 100644 frontend/src/pages/companies/companies-edit.tsx
 create mode 100644 frontend/src/pages/companies/companies-list.tsx
 create mode 100644 frontend/src/pages/companies/companies-new.tsx
 create mode 100644 frontend/src/pages/companies/companies-table.tsx
 create mode 100644 frontend/src/pages/companies/companies-view.tsx
 create mode 100644 frontend/src/pages/dashboard.tsx
 create mode 100644 frontend/src/pages/departments/[departmentsId].tsx
 create mode 100644 frontend/src/pages/departments/departments-edit.tsx
 create mode 100644 frontend/src/pages/departments/departments-list.tsx
 create mode 100644 frontend/src/pages/departments/departments-new.tsx
 create mode 100644 frontend/src/pages/departments/departments-table.tsx
 create mode 100644 frontend/src/pages/departments/departments-view.tsx
 create mode 100644 frontend/src/pages/document_links/[document_linksId].tsx
 create mode 100644 frontend/src/pages/document_links/document_links-edit.tsx
 create mode 100644 frontend/src/pages/document_links/document_links-list.tsx
 create mode 100644 frontend/src/pages/document_links/document_links-new.tsx
 create mode 100644 frontend/src/pages/document_links/document_links-table.tsx
 create mode 100644 frontend/src/pages/document_links/document_links-view.tsx
 create mode 100644 frontend/src/pages/document_types/[document_typesId].tsx
 create mode 100644 frontend/src/pages/document_types/document_types-edit.tsx
 create mode 100644 frontend/src/pages/document_types/document_types-list.tsx
 create mode 100644 frontend/src/pages/document_types/document_types-new.tsx
 create mode 100644 frontend/src/pages/document_types/document_types-table.tsx
 create mode 100644 frontend/src/pages/document_types/document_types-view.tsx
 create mode 100644 frontend/src/pages/documents/[documentsId].tsx
 create mode 100644 frontend/src/pages/documents/documents-edit.tsx
 create mode 100644 frontend/src/pages/documents/documents-list.tsx
 create mode 100644 frontend/src/pages/documents/documents-new.tsx
 create mode 100644 frontend/src/pages/documents/documents-table.tsx
 create mode 100644 frontend/src/pages/documents/documents-view.tsx
 create mode 100644 frontend/src/pages/error.tsx
 create mode 100644 frontend/src/pages/forgot.tsx
 create mode 100644 frontend/src/pages/forms.tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/[goods_receipt_linesId].tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/goods_receipt_lines-edit.tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/goods_receipt_lines-list.tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/goods_receipt_lines-new.tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/goods_receipt_lines-table.tsx
 create mode 100644 frontend/src/pages/goods_receipt_lines/goods_receipt_lines-view.tsx
 create mode 100644 frontend/src/pages/goods_receipts/[goods_receiptsId].tsx
 create mode 100644 frontend/src/pages/goods_receipts/goods_receipts-edit.tsx
 create mode 100644 frontend/src/pages/goods_receipts/goods_receipts-list.tsx
 create mode 100644 frontend/src/pages/goods_receipts/goods_receipts-new.tsx
 create mode 100644 frontend/src/pages/goods_receipts/goods_receipts-table.tsx
 create mode 100644 frontend/src/pages/goods_receipts/goods_receipts-view.tsx
 create mode 100644 frontend/src/pages/index.tsx
 create mode 100644 frontend/src/pages/invoice_lines/[invoice_linesId].tsx
 create mode 100644 frontend/src/pages/invoice_lines/invoice_lines-edit.tsx
 create mode 100644 frontend/src/pages/invoice_lines/invoice_lines-list.tsx
 create mode 100644 frontend/src/pages/invoice_lines/invoice_lines-new.tsx
 create mode 100644 frontend/src/pages/invoice_lines/invoice_lines-table.tsx
 create mode 100644 frontend/src/pages/invoice_lines/invoice_lines-view.tsx
 create mode 100644 frontend/src/pages/login.tsx
 create mode 100644 frontend/src/pages/organizations/[organizationsId].tsx
 create mode 100644 frontend/src/pages/organizations/organizations-edit.tsx
 create mode 100644 frontend/src/pages/organizations/organizations-list.tsx
 create mode 100644 frontend/src/pages/organizations/organizations-new.tsx
 create mode 100644 frontend/src/pages/organizations/organizations-table.tsx
 create mode 100644 frontend/src/pages/organizations/organizations-view.tsx
 create mode 100644 frontend/src/pages/password-reset.tsx
 create mode 100644 frontend/src/pages/payments/[paymentsId].tsx
 create mode 100644 frontend/src/pages/payments/payments-edit.tsx
 create mode 100644 frontend/src/pages/payments/payments-list.tsx
 create mode 100644 frontend/src/pages/payments/payments-new.tsx
 create mode 100644 frontend/src/pages/payments/payments-table.tsx
 create mode 100644 frontend/src/pages/payments/payments-view.tsx
 create mode 100644 frontend/src/pages/permissions/[permissionsId].tsx
 create mode 100644 frontend/src/pages/permissions/permissions-edit.tsx
 create mode 100644 frontend/src/pages/permissions/permissions-list.tsx
 create mode 100644 frontend/src/pages/permissions/permissions-new.tsx
 create mode 100644 frontend/src/pages/permissions/permissions-table.tsx
 create mode 100644 frontend/src/pages/permissions/permissions-view.tsx
 create mode 100644 frontend/src/pages/privacy-policy.tsx
 create mode 100644 frontend/src/pages/product_categories/[product_categoriesId].tsx
 create mode 100644 frontend/src/pages/product_categories/product_categories-edit.tsx
 create mode 100644 frontend/src/pages/product_categories/product_categories-list.tsx
 create mode 100644 frontend/src/pages/product_categories/product_categories-new.tsx
 create mode 100644 frontend/src/pages/product_categories/product_categories-table.tsx
 create mode 100644 frontend/src/pages/product_categories/product_categories-view.tsx
 create mode 100644 frontend/src/pages/products/[productsId].tsx
 create mode 100644 frontend/src/pages/products/products-edit.tsx
 create mode 100644 frontend/src/pages/products/products-list.tsx
 create mode 100644 frontend/src/pages/products/products-new.tsx
 create mode 100644 frontend/src/pages/products/products-table.tsx
 create mode 100644 frontend/src/pages/products/products-view.tsx
 create mode 100644 frontend/src/pages/profile.tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/[purchase_order_linesId].tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/purchase_order_lines-edit.tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/purchase_order_lines-list.tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/purchase_order_lines-new.tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/purchase_order_lines-table.tsx
 create mode 100644 frontend/src/pages/purchase_order_lines/purchase_order_lines-view.tsx
 create mode 100644 frontend/src/pages/purchase_orders/[purchase_ordersId].tsx
 create mode 100644 frontend/src/pages/purchase_orders/purchase_orders-edit.tsx
 create mode 100644 frontend/src/pages/purchase_orders/purchase_orders-list.tsx
 create mode 100644 frontend/src/pages/purchase_orders/purchase_orders-new.tsx
 create mode 100644 frontend/src/pages/purchase_orders/purchase_orders-table.tsx
 create mode 100644 frontend/src/pages/purchase_orders/purchase_orders-view.tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/[purchase_requisition_linesId].tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-edit.tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-list.tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-new.tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-table.tsx
 create mode 100644 frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-view.tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/[purchase_requisitionsId].tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/purchase_requisitions-edit.tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/purchase_requisitions-list.tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/purchase_requisitions-new.tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/purchase_requisitions-table.tsx
 create mode 100644 frontend/src/pages/purchase_requisitions/purchase_requisitions-view.tsx
 create mode 100644 frontend/src/pages/register.tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/[role_permission_mappingsId].tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/role_permission_mappings-edit.tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/role_permission_mappings-list.tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/role_permission_mappings-new.tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/role_permission_mappings-table.tsx
 create mode 100644 frontend/src/pages/role_permission_mappings/role_permission_mappings-view.tsx
 create mode 100644 frontend/src/pages/roles/[rolesId].tsx
 create mode 100644 frontend/src/pages/roles/roles-edit.tsx
 create mode 100644 frontend/src/pages/roles/roles-list.tsx
 create mode 100644 frontend/src/pages/roles/roles-new.tsx
 create mode 100644 frontend/src/pages/roles/roles-table.tsx
 create mode 100644 frontend/src/pages/roles/roles-view.tsx
 create mode 100644 frontend/src/pages/search.tsx
 create mode 100644 frontend/src/pages/tables.tsx
 create mode 100644 frontend/src/pages/terms-of-use.tsx
 create mode 100644 frontend/src/pages/ui_announcements/[ui_announcementsId].tsx
 create mode 100644 frontend/src/pages/ui_announcements/ui_announcements-edit.tsx
 create mode 100644 frontend/src/pages/ui_announcements/ui_announcements-list.tsx
 create mode 100644 frontend/src/pages/ui_announcements/ui_announcements-new.tsx
 create mode 100644 frontend/src/pages/ui_announcements/ui_announcements-table.tsx
 create mode 100644 frontend/src/pages/ui_announcements/ui_announcements-view.tsx
 create mode 100644 frontend/src/pages/user_role_assignments/[user_role_assignmentsId].tsx
 create mode 100644 frontend/src/pages/user_role_assignments/user_role_assignments-edit.tsx
 create mode 100644 frontend/src/pages/user_role_assignments/user_role_assignments-list.tsx
 create mode 100644 frontend/src/pages/user_role_assignments/user_role_assignments-new.tsx
 create mode 100644 frontend/src/pages/user_role_assignments/user_role_assignments-table.tsx
 create mode 100644 frontend/src/pages/user_role_assignments/user_role_assignments-view.tsx
 create mode 100644 frontend/src/pages/users/[usersId].tsx
 create mode 100644 frontend/src/pages/users/users-edit.tsx
 create mode 100644 frontend/src/pages/users/users-list.tsx
 create mode 100644 frontend/src/pages/users/users-new.tsx
 create mode 100644 frontend/src/pages/users/users-table.tsx
 create mode 100644 frontend/src/pages/users/users-view.tsx
 create mode 100644 frontend/src/pages/vendor_invoices/[vendor_invoicesId].tsx
 create mode 100644 frontend/src/pages/vendor_invoices/vendor_invoices-edit.tsx
 create mode 100644 frontend/src/pages/vendor_invoices/vendor_invoices-list.tsx
 create mode 100644 frontend/src/pages/vendor_invoices/vendor_invoices-new.tsx
 create mode 100644 frontend/src/pages/vendor_invoices/vendor_invoices-table.tsx
 create mode 100644 frontend/src/pages/vendor_invoices/vendor_invoices-view.tsx
 create mode 100644 frontend/src/pages/vendors/[vendorsId].tsx
 create mode 100644 frontend/src/pages/vendors/vendors-edit.tsx
 create mode 100644 frontend/src/pages/vendors/vendors-list.tsx
 create mode 100644 frontend/src/pages/vendors/vendors-new.tsx
 create mode 100644 frontend/src/pages/vendors/vendors-table.tsx
 create mode 100644 frontend/src/pages/vendors/vendors-view.tsx
 create mode 100644 frontend/src/pages/verify-email.tsx
 create mode 100644 frontend/src/pages/warehouses/[warehousesId].tsx
 create mode 100644 frontend/src/pages/warehouses/warehouses-edit.tsx
 create mode 100644 frontend/src/pages/warehouses/warehouses-list.tsx
 create mode 100644 frontend/src/pages/warehouses/warehouses-new.tsx
 create mode 100644 frontend/src/pages/warehouses/warehouses-table.tsx
 create mode 100644 frontend/src/pages/warehouses/warehouses-view.tsx
 create mode 100644 frontend/src/stores/activity_logs/activity_logsSlice.ts
 create mode 100644 frontend/src/stores/approval_steps/approval_stepsSlice.ts
 create mode 100644 frontend/src/stores/approval_workflows/approval_workflowsSlice.ts
 create mode 100644 frontend/src/stores/approvals/approvalsSlice.ts
 create mode 100644 frontend/src/stores/authSlice.ts
 create mode 100644 frontend/src/stores/companies/companiesSlice.ts
 create mode 100644 frontend/src/stores/departments/departmentsSlice.ts
 create mode 100644 frontend/src/stores/document_links/document_linksSlice.ts
 create mode 100644 frontend/src/stores/document_types/document_typesSlice.ts
 create mode 100644 frontend/src/stores/documents/documentsSlice.ts
 create mode 100644 frontend/src/stores/goods_receipt_lines/goods_receipt_linesSlice.ts
 create mode 100644 frontend/src/stores/goods_receipts/goods_receiptsSlice.ts
 create mode 100644 frontend/src/stores/hooks.ts
 create mode 100644 frontend/src/stores/introSteps.ts
 create mode 100644 frontend/src/stores/invoice_lines/invoice_linesSlice.ts
 create mode 100644 frontend/src/stores/mainSlice.ts
 create mode 100644 frontend/src/stores/openAiSlice.ts
 create mode 100644 frontend/src/stores/organizations/organizationsSlice.ts
 create mode 100644 frontend/src/stores/payments/paymentsSlice.ts
 create mode 100644 frontend/src/stores/permissions/permissionsSlice.ts
 create mode 100644 frontend/src/stores/product_categories/product_categoriesSlice.ts
 create mode 100644 frontend/src/stores/products/productsSlice.ts
 create mode 100644 frontend/src/stores/purchase_order_lines/purchase_order_linesSlice.ts
 create mode 100644 frontend/src/stores/purchase_orders/purchase_ordersSlice.ts
 create mode 100644 frontend/src/stores/purchase_requisition_lines/purchase_requisition_linesSlice.ts
 create mode 100644 frontend/src/stores/purchase_requisitions/purchase_requisitionsSlice.ts
 create mode 100644 frontend/src/stores/role_permission_mappings/role_permission_mappingsSlice.ts
 create mode 100644 frontend/src/stores/roles/rolesSlice.ts
 create mode 100644 frontend/src/stores/store.ts
 create mode 100644 frontend/src/stores/styleSlice.ts
 create mode 100644 frontend/src/stores/ui_announcements/ui_announcementsSlice.ts
 create mode 100644 frontend/src/stores/user_role_assignments/user_role_assignmentsSlice.ts
 create mode 100644 frontend/src/stores/users/usersSlice.ts
 create mode 100644 frontend/src/stores/usersSlice.ts
 create mode 100644 frontend/src/stores/vendor_invoices/vendor_invoicesSlice.ts
 create mode 100644 frontend/src/stores/vendors/vendorsSlice.ts
 create mode 100644 frontend/src/stores/warehouses/warehousesSlice.ts
 create mode 100644 frontend/src/styles.ts
 create mode 100644 frontend/tailwind.config.js
 create mode 100644 frontend/tsconfig.json
 create mode 100644 frontend/yarn.lock
 create mode 100644 nginx.conf
 create mode 100644 package.json

diff --git a/.cursorrules b/.cursorrules
new file mode 100644
index 0000000..496b86f
--- /dev/null
+++ b/.cursorrules
@@ -0,0 +1,305 @@
+# Cursor Rules - Group 1: Development Philosophy & Coding Conventions
+1. Overall Architecture & Structure:
+   - Enforce a clear separation of concerns between the backend and the frontend:
+     - **Backend**: Use Express for routing, Passport for authentication, and Swagger for API documentation. Organize code into modules such as routes, services, and helpers.
+       - **Example**:
+         - Routes: `src/routes/auth.js` for authentication routes.
+         - Services: `src/services/auth.js` for authentication logic.
+         - Helpers: `src/helpers/wrapAsync.js` for wrapping asynchronous functions.
+     - **Frontend**: Use Next.js with React and TypeScript. Structure components using functional components, hooks, and layouts.
+       - **Example**:
+         - Pages: `pages/index.tsx` for the main page.
+         - Components: `components/Header.tsx` for the header component.
+         - Layouts: `layouts/MainLayout.tsx` for common page layouts.
+   - Ensure that backend modules and frontend components are organized for reusability and maintainability:
+     - **Backend**: Separate business logic into services and use middleware for common tasks.
+     - **Frontend**: Use reusable components and hooks to manage state and lifecycle.
+
+2. Coding Style & Formatting:
+   - For the backend (JavaScript):
+       • Use ES6+ features (const/let, arrow functions) consistently.
+       • Follow Prettier and ESLint configurations (e.g., consistent 2-space indentation, semicolons, and single quotes).
+       • Maintain clear asynchronous patterns with helper wrappers (e.g., wrapAsync).
+         - **Example from auth.js**:
+           ```javascript
+           router.post('/signin/local', wrapAsync(async (req, res) => {
+             const payload = await AuthService.signin(req.body.email, req.body.password, req);
+             res.status(200).send(payload);
+           }));
+           ```
+      • Document API endpoints with inline Swagger comments to ensure API clarity and consistency.
+         - **Example**:
+           ```javascript
+           /**
+            * @swagger
+            * /api/auth/signin:
+            *   post:
+            *     summary: Sign in a user
+            *     responses:
+            *       200:
+            *         description: Successful login
+            */
+           ```
+   - For the frontend (TypeScript/React):
+       • Use functional components with strict typing and separation of concerns.
+         - **Example**:
+           ```typescript
+           const Button: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+             <button onClick={onClick}>Click me</button>
+           );
+           ```
+       • Follow naming conventions: PascalCase for components and types/interfaces, camelCase for variables, hooks, and function names.
+         - **Example**:
+           ```typescript
+           const useCustomHook = () => {
+             const [state, setState] = useState(false);
+             return [state, setState];
+           };
+           ```
+       • Utilize hooks (useEffect, useState) to manage state and lifecycle in a clear and concise manner.
+         - **Example**:
+           ```typescript
+           useEffect(() => {
+             console.log('Component mounted');
+           }, []);
+           ```
+
+3. Code Quality & Best Practices:
+   - Ensure code modularity by splitting complex logic into smaller, testable units.
+     - **Example**: In `auth.js`, routes are separated from business logic, which is handled in `AuthService`.
+   - Write self-documenting code and add comments where the logic is non-trivial.
+     - **Example**: Use descriptive function and variable names in `auth.js`, and add comments for complex asynchronous operations.
+   - Embrace declarative programming and adhere to SOLID principles.
+     - **Example**: In service functions, ensure each function has a single responsibility and dependencies are injected rather than hardcoded.
+
+4. Consistency & Tools Integration:
+   - Leverage existing tools like Prettier and ESLint to automatically enforce style and formatting rules.
+     - **Example**: Use `.prettierrc` and `.eslintrc.cjs` for configuration in your project.
+   - Use TypeScript in the frontend to ensure type safety and catch errors early.
+     - **Example**: Define interfaces and types in your React components to enforce strict typing.
+   - Maintain uniformity in API design and error handling strategies.
+     - **Example**: Consistently use Passport for authentication and a common error handling middleware in `auth.js`.
+
+## Group 2 – Naming Conventions
+1. File Naming and Structure:
+   • Frontend:
+     - Page Files: Use lower-case filenames (e.g., index.tsx) as prescribed by Next.js conventions.
+       - **Example**: `pages/index.tsx`, `pages/about.tsx`
+     - Component Files: Use PascalCase for React component files (e.g., WebSiteHeader.tsx, NavBar.tsx).
+       - **Example**: `components/Header.tsx`, `components/Footer.tsx`
+     - Directories: Use clear, descriptive names (e.g., 'pages', 'components', 'WebPageComponents').
+       - **Example**: `src/pages`, `src/components`
+   • Backend:
+     - Use lower-case filenames for modules (e.g., index.js, auth.js, projects.js).
+       - **Example**: `routes/auth.js`, `services/user.js`
+     - When needed, use hyphenation for clarity, but maintain consistency.
+       - **Example**: `helpers/wrap-async.js`
+
+2. Component and Module Naming:
+   • Frontend:
+     - React Components: Define components in PascalCase.
+     - TypeScript Interfaces/Types: Use PascalCase (e.g., WebSiteHeaderProps).
+   • Backend:
+     - Classes (if any) and constructors should be in PascalCase; most helper functions and modules use camelCase.
+
+3. Variable, Function, and Hook Naming:
+   • Use camelCase for variables and function names in both frontend and backend.
+     - **Example**:
+       ```javascript
+       const userName = 'John Doe';
+       function handleLogin() { ... }
+       ```
+   • Custom Hooks: Prefix with 'use' (e.g., useAuth, useForm).
+     - **Example**:
+       ```typescript
+       const useAuth = () => {
+         const [isAuthenticated, setIsAuthenticated] = useState(false);
+         return { isAuthenticated, setIsAuthenticated };
+       };
+       ```
+
+4. Consistency and Readability:
+   • Maintain uniform naming across the project to ensure clarity and ease of maintenance.
+     - **Example**: Use consistent naming conventions for variables, functions, and components, such as camelCase for variables and functions, and PascalCase for components.
+     - **Example**: In `auth.js`, ensure that all function names clearly describe their purpose, such as `handleLogin` or `validateUserInput`.
+
+## Group 3 – Frontend & React Best Practices
+1. Use of Functional Components & TypeScript:
+   • Build all components as functional components.
+     - **Example**:
+       ```typescript
+       const Header: React.FC = () => {
+         return <header>Header Content</header>;
+       };
+       ```
+   • Leverage TypeScript for static type checking and enforce strict prop and state types.
+     - **Example**:
+       ```typescript
+       interface ButtonProps {
+         onClick: () => void;
+       }
+       const Button: React.FC<ButtonProps> = ({ onClick }) => (
+         <button onClick={onClick}>Click me</button>
+       );
+       ```
+
+2. Effective Use of React Hooks:
+   • Utilize useState and useEffect appropriately with proper dependency arrays.
+     - **Example**:
+       ```typescript
+       const [count, setCount] = useState(0);
+       useEffect(() => {
+         console.log('Component mounted');
+       }, []);
+       ```
+   • Create custom hooks to encapsulate shared logic (e.g., useAppSelector).
+     - **Example**:
+       ```typescript
+       const useAuth = () => {
+         const [isAuthenticated, setIsAuthenticated] = useState(false);
+         return { isAuthenticated, setIsAuthenticated };
+       };
+       ```
+
+3. Component Composition & Separation of Concerns:
+   • Separate presentational (stateless) components from container components managing logic.
+     - **Example**: Use `LayoutGuest` to encapsulate common page structures.
+
+4. Code Quality & Readability:
+   • Maintain consistent formatting and adhere to Prettier and ESLint rules.
+   • Use descriptive names for variables, functions, and components.
+   • Document non-trivial logic with inline comments and consider implementing error boundaries where needed.
+   • New code must adhere to these conventions to avoid ambiguity.
+   • Use descriptive names that reflect the purpose and domain, avoiding abbreviations unless standard in the project.
+
+## Group 4 – Backend & API Guidelines
+1. API Endpoint Design & Documentation:
+   • Follow RESTful naming conventions; all route handlers should be named clearly and consistently.
+     - **Example**: Use verbs like `GET`, `POST`, `PUT`, `DELETE` to define actions, e.g., `GET /api/auth/me` to retrieve user info.
+   • Document endpoints with Swagger annotations to provide descriptions, expected request bodies, and response codes.
+     - **Example**:
+       ```javascript
+       /**
+        * @swagger
+        * /api/auth/signin:
+        *   post:
+        *     summary: Sign in a user
+        *     requestBody:
+        *       description: User credentials
+        *       content:
+        *         application/json:
+        *           schema:
+        *             $ref: "#/components/schemas/Auth"
+        *     responses:
+        *       200:
+        *         description: Successful login
+        *       400:
+        *         description: Invalid username/password supplied
+        */
+       ```
+   • Examples (for Auth endpoints):
+       - POST /api/auth/signin/local
+           • Description: Logs the user into the system.
+           • Request Body (application/json):
+               { "email": "admin@flatlogic.com", "password": "password" }
+           • Responses:
+               - 200: Successful login (returns token and user data).
+               - 400: Invalid username/password supplied.
+       - GET /api/auth/me
+           • Description: Retrieves current authorized user information.
+           • Secured via Passport JWT; uses req.currentUser.
+           • Responses:
+               - 200: Returns current user info.
+               - 400: Invalid credentials or missing user data.
+       - POST /api/auth/signup
+           • Description: Registers a new user.
+           • Request Body (application/json):
+               { "email": "admin@flatlogic.com", "password": "password" }
+           • Responses:
+               - 200: New user signed up successfully.
+               - 400: Invalid input supplied.
+               - 500: Server error.
+
+## Group 5 – Testing, Quality Assurance & Error Handling
+1. Testing Guidelines:
+   • Write unit tests for critical backend and frontend components using frameworks such as Jest, React Testing Library, and Mocha/Chai.
+     - **Example**:
+       ```javascript
+       test('should return user data', async () => {
+         const user = await getUserData();
+         expect(user).toHaveProperty('email');
+       });
+       ```
+   • Practice test-driven development and maintain high test coverage.
+   • Regularly update tests following changes in business logic.
+
+2. Quality Assurance:
+   • Enforce code quality with ESLint, Prettier, and static analysis tools.
+   • Integrate continuous testing workflows (CI/CD) to catch issues early.
+     - **Example**: Use GitHub Actions for automated testing and deployment.
+   • Ensure documentation is kept up-to-date with the implemented code.
+
+3. Error Handling:
+   • Back-end:
+       - Wrap asynchronous route handlers with a helper (e.g., wrapAsync) to capture errors.
+         - **Example**:
+           ```javascript
+           router.post('/signin', wrapAsync(async (req, res) => {
+             const user = await AuthService.signin(req.body);
+             res.send(user);
+           }));
+           ```
+       - Use centralized error handling middleware (e.g., commonErrorHandler) for uniform error responses.
+   • Front-end:
+       - Implement error boundaries in React to gracefully handle runtime errors.
+       - Display user-friendly error messages and log errors for further analysis.
+
+2. Authentication & Security:
+   • Protect endpoints by using Passport.js with JWT (e.g., passport.authenticate('jwt', { session: false })).
+     - **Example**:
+       ```javascript
+       router.get('/profile', passport.authenticate('jwt', { session: false }), (req, res) => {
+         res.send(req.user);
+       });
+       ```
+   • Ensure that secure routes check for existence of req.currentUser. If absent, return a ForbiddenError.
+
+3. Consistent Error Handling & Middleware Usage:
+   • Wrap asynchronous route handlers with helpers like wrapAsync for error propagation.
+   • Use centralized error handling middleware (e.g., commonErrorHandler) to capture and format errors uniformly.
+
+4. Modular Code Organization:
+   • Organize backend code into separate files for routes, services, and database access (e.g., auth.js, projects.js, tasks.js).
+   • Use descriptive, lowercase filenames for modules and routes.
+
+5. Endpoint Security Best Practices:
+   • Validate input data and sanitize requests where necessary.
+   • Restrict sensitive operations to authenticated users with proper role-based permissions.
+
+
+────────────────────────────────────────
+Group 6 – Accessibility, UI, and Styling Guidelines (Updated)
+────────────────────────────────────────
+1. Sidebar Styling:
+   • The sidebar is implemented in the authenticated layout via the AsideMenu component, with the actual element defined in AsideMenuLayer (located at frontend/src/components/AsideMenuLayer.tsx) as an <aside> element with id="asideMenu".
+     - **Example**:
+       ```css
+       #asideMenu {
+           background-color: #F8F4E1 !important;
+       }
+       ```
+   • When modifying sidebar styles, target #asideMenu and its child elements rather than generic selectors (e.g., avoid .app-sidebar) to ensure that the changes affect the actual rendered sidebar.
+   • Remove or override any conflicting background utilities (such as an unwanted bg-white) so our desired background color (#F8F4E1) is fully visible. Use a highly specific selector if necessary.
+   • Adjust spacing (padding/margins) at both the container (#asideMenu) and the individual menu item level to maintain a consistent, compact design.
+
+2. General Project Styling and Tailwind CSS Usage:
+   • The application leverages Tailwind CSS extensively, with core styling defined in _theme.css using the @apply directive. Any new modifications should follow this pattern to ensure consistency.
+     - **Example**:
+       ```css
+       .btn {
+           @apply bg-blue-500 text-white;
+       }
+       ```
+   • The themed blocks (like .theme-pink and .theme-green) standardize the UI's appearance. When applying custom overrides, ensure they integrate cleanly into these structures and avoid conflicts or circular dependency errors (e.g., issues when redefining utilities such as text-blue-600).
+   • Adjustments via Tailwind CSS generally require modifying class names in the components and ensuring that global overrides are applied in the correct order. Consistent use of design tokens and custom color codes (e.g., #F8F4E1) throughout the app is crucial to a cohesive design.
+   • Specificity is key. If a change isn't visually reflected as expected, inspect the rendered HTML to identify which classes are taking precedence.
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..2c83cc6
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+backend/node_modules
+frontend/node_modules
+frontend/build
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e427ff3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+*/node_modules/
+*/build/
diff --git a/.perm_test_apache b/.perm_test_apache
new file mode 100644
index 0000000..e69de29
diff --git a/.perm_test_exec b/.perm_test_exec
new file mode 100644
index 0000000..e69de29
diff --git a/502.html b/502.html
new file mode 100644
index 0000000..47789b8
--- /dev/null
+++ b/502.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Service Starting</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: #EFF2FF;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            text-align: center;
+            padding: 30px 40px;
+            background-color: #fff;
+            border-radius: 20px;
+            margin-bottom: 20px;
+            max-width: 538px;
+            width: 100%;
+            box-shadow: 0 13px 34px 0 rgba(167, 187, 242, 0.2);
+            box-sizing: border-box;
+        }
+
+        #status-heading {
+            font-size: 24px;
+            font-weight: 700;
+            color: #02004E;
+            margin-bottom: 20px;
+        }
+
+        h2 {
+            color: #333;
+            margin-bottom: 15px;
+        }
+
+        p {
+            color: #666;
+            font-size: 1.1em;
+            margin-bottom: 10px;
+        }
+
+        .tip {
+            font-weight: 300;
+            font-size: 17px;
+            line-height: 150%;
+            letter-spacing: 0;
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .loader-container {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .loader {
+            width: 100px;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background:
+                radial-gradient(farthest-side, #5C7EF1 94%, #0000) top/8px 8px no-repeat,
+                conic-gradient(#0000 30%, #5C7EF1);
+            -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+            animation: l13 2s infinite linear;
+        }
+
+        @keyframes l13 {
+            100% {
+                transform: rotate(1turn)
+            }
+        }
+
+        .app-logo {
+            position: absolute;
+            width: 36px;
+        }
+
+        .panel {
+            padding: 0 18px;
+            display: none;
+            background-color: white;
+            overflow: hidden;
+            margin-top: 10px;
+        }
+        .show {
+            display: block;
+        }
+
+        .project-info {
+            border: 1px solid #8C9DFF;
+            border-radius: 10px;
+            padding: 12px 16px;
+            max-width: 600px;
+            margin: 40px auto;
+            background-color: #FBFCFF;
+        }
+
+        .project-info h2 {
+            color: #02004E;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 10px;
+            text-align: left;
+        }
+
+        .project-info p {
+            color: #686791;
+            font-size: 12px;
+            font-weight: 400;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2 id="status-heading">Loading the app, just a moment…</h2>
+        <p class="tip">The application is currently launching. The page will automatically refresh once site is
+            available.</p>
+        <div class="project-info">
+            <h2>Modern ERP Redesign</h2>
+            <p>Modern redesign of an ERP with improved navigation and a smooth Purchase Order to Document workflow.</p>
+        </div>
+        <div class="loader-container">
+            <img src="https://flatlogic.com/blog/wp-content/uploads/2025/05/logo-bot-1.png" alt="App Logo"
+                class="app-logo">
+            <div class="loader"></div>
+        </div>
+        <div class="panel">
+            <video width="100%" height="315" controls loop>
+                <source
+                    src="https://flatlogic.com/blog/wp-content/uploads/2025/04/20250430_1336_professional_dynamo_spinner_simple_compose_01jt349yvtenxt7xhg8hhr85j8.mp4"
+                    type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+    <script>
+        function checkAvailability() {
+            fetch('/')
+                .then(response => {
+                    if (response.ok) {
+                        window.location.reload();
+                    } else {
+                        setTimeout(checkAvailability, 5000);
+                    }
+                })
+                .catch(() => {
+                    setTimeout(checkAvailability, 5000);
+                });
+        }
+        document.addEventListener('DOMContentLoaded', checkAvailability);
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const appTitle = document.querySelector('#status-heading');
+            const panel = document.querySelector('.panel');
+            const video = panel.querySelector('video');
+            let clickCount = 0;
+
+            appTitle.addEventListener('click', function () {
+                clickCount++;
+                if (clickCount === 5) {
+                    panel.classList.toggle('show');
+                    if (panel.classList.contains('show')) {
+                        video.play();
+                    } else {
+                        video.pause();
+                    }
+                    clickCount = 0;
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..970d54f
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20.15.1-alpine AS builder
+RUN apk add --no-cache git
+WORKDIR /app
+COPY frontend/package.json frontend/yarn.lock ./
+RUN yarn install --pure-lockfile
+COPY frontend .
+RUN yarn build
+
+
+
+FROM node:20.15.1-alpine
+WORKDIR /app
+COPY backend/package.json backend/yarn.lock ./
+RUN yarn install --pure-lockfile
+COPY backend .
+
+COPY --from=builder /app/build /app/public
+CMD ["yarn", "start"]
+
+
+
diff --git a/Dockerfile.dev b/Dockerfile.dev
new file mode 100644
index 0000000..a8353d5
--- /dev/null
+++ b/Dockerfile.dev
@@ -0,0 +1,85 @@
+# Base image for Node.js dependencies
+FROM node:20.15.1-alpine AS frontend-deps
+RUN apk add --no-cache git
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/yarn.lock ./
+RUN yarn install --pure-lockfile
+
+FROM node:20.15.1-alpine AS backend-deps
+RUN apk add --no-cache git
+WORKDIR /app/backend
+COPY backend/package.json backend/yarn.lock ./
+RUN yarn install --pure-lockfile
+
+FROM node:20.15.1-alpine AS app-shell-deps
+RUN apk add --no-cache git
+WORKDIR /app/app-shell
+COPY app-shell/package.json app-shell/yarn.lock ./
+RUN yarn install --pure-lockfile
+
+# Nginx setup and application build
+FROM node:20.15.1-alpine AS build
+RUN apk add --no-cache git nginx curl
+RUN apk add --no-cache lsof procps
+RUN yarn global add concurrently
+
+RUN apk add --no-cache \
+    chromium \
+    nss \
+    freetype \
+    harfbuzz \
+    ttf-freefont \
+    fontconfig
+
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+RUN mkdir -p /app/pids
+
+# Make sure to add yarn global bin to PATH
+ENV PATH /root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:$PATH
+
+# Copy dependencies
+WORKDIR /app
+COPY --from=frontend-deps /app/frontend /app/frontend
+COPY --from=backend-deps /app/backend /app/backend
+COPY --from=app-shell-deps /app/app-shell /app/app-shell
+
+COPY frontend /app/frontend
+COPY backend /app/backend
+COPY app-shell /app/app-shell
+COPY docker /app/docker
+
+# Copy all files from root to /app
+COPY . /app
+
+# Copy Nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy custom error page
+COPY 502.html /usr/share/nginx/html/502.html
+
+# Change owner and permissions of the error page
+RUN chown nginx:nginx /usr/share/nginx/html/502.html && \
+    chmod 644 /usr/share/nginx/html/502.html
+
+# Expose the port the app runs on
+EXPOSE 8080
+ENV NODE_ENV=dev_stage
+ENV FRONT_PORT=3001
+ENV BACKEND_PORT=3000
+ENV APP_SHELL_PORT=4000
+
+
+CMD ["sh", "-c", "\
+  yarn --cwd /app/frontend dev & echo $! > /app/pids/frontend.pid && \
+  yarn --cwd /app/backend start & echo $! > /app/pids/backend.pid && \
+  sleep 10 && nginx -g 'daemon off;' & \
+  NGINX_PID=$! && \
+  echo 'Waiting for backend (port 3000) to be available...' && \
+  while ! nc -z localhost ${BACKEND_PORT}; do \
+    sleep 2; \
+  done && \
+  echo 'Backend is up. Starting app_shell for Git check...' && \
+  yarn --cwd /app/app-shell start && \
+  wait $NGINX_PID"]
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5d69ed7
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1 @@
+https://flatlogic.com/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..bde10d0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,244 @@
+
+
+# Modern ERP Redesign
+
+
+## This project was generated by [Flatlogic Platform](https://flatlogic.com).
+
+  
+  - Frontend: [React.js](https://flatlogic.com/templates?framework%5B%5D=react&sort=default)
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+  
+  - Backend: [NodeJS](https://flatlogic.com/templates?backend%5B%5D=nodejs&sort=default)
+  
+    <details><summary>Backend Folder Structure</summary>   
+    
+    The generated application has the following backend folder structure: 
+
+    `src` folder which contains your working files that will be used later to create the build. The src folder contains folders as:
+
+      - `auth` - config the library for authentication and authorization;
+
+      - `db` - contains such folders as:
+
+        - `api` - documentation that is automatically generated by jsdoc or other tools;
+
+        - `migrations` - is a skeleton of the database or all the actions that users do with the database;
+
+        - `models`- what will represent the database for the backend;
+
+        - `seeders` -  the entity that creates the data for the database.
+
+      - `routes` - this folder would contain all the routes that you have created using Express Router and what they do would be exported from a Controller file;
+
+      - `services` - contains such folders as `emails` and `notifications`.   
+    </details> 
+  
+  
+  
+  
+  
+
+
+  
+  
+  
+  - Database: PostgreSQL
+  
+
+  - app-shel: Core application framework that provides essential infrastructure services
+for the entire application.
+  -----------------------
+### We offer 2 ways how to start the project locally: by running Frontend and Backend or with Docker.
+-----------------------
+
+## To start the project:
+
+### Backend:
+
+> Please change current folder: `cd backend`
+
+
+
+#### Install local dependencies:
+`yarn install`
+
+  ------------
+
+#### Adjust local db:
+##### 1.  Install postgres:
+
+MacOS:
+
+`brew install postgres`
+
+    > if you don’t have ‘brew‘ please install it (https://brew.sh) and repeat step `brew install postgres`.
+
+Ubuntu:
+
+`sudo apt update`
+
+`sudo apt install postgresql postgresql-contrib`
+
+##### 2. Create db and admin user:
+Before run and test connection, make sure you have created a database as described in the above configuration. You can use the `psql` command to create a user and database.
+
+`psql postgres --u postgres`
+
+Next, type this command for creating a new user with password then give access for creating the database.
+
+`postgres-# CREATE ROLE admin WITH LOGIN PASSWORD 'admin_pass';`
+
+`postgres-# ALTER ROLE admin CREATEDB;`
+
+Quit `psql` then log in again using the new user that previously created.
+
+`postgres-# \q`
+
+`psql postgres -U admin`
+
+Type this command to creating a new database.
+
+`postgres=> CREATE DATABASE db_{your_project_name};`
+
+Then give that new user privileges to the new database then quit the `psql`.
+
+`postgres=> GRANT ALL PRIVILEGES ON DATABASE db_{your_project_name} TO admin;`
+
+`postgres=> \q`
+
+
+
+
+
+  ------------
+
+
+#### Create database:
+`yarn db:create`
+
+#### Start production build:
+`yarn start`
+
+
+
+
+
+### Frontend:
+
+> Please change current folder: `cd frontend`
+
+
+  
+    
+    
+    
+    
+  
+  
+  
+
+
+## To start the project with Docker:
+### Description:
+
+The project contains the **docker folder** and the `Dockerfile`.
+
+The `Dockerfile` is used to Deploy the project to Google Cloud.
+
+The **docker folder** contains a couple of helper scripts:
+
+- `docker-compose.yml` (all our services: web, backend, db are described here)
+- `start-backend.sh` (starts backend, but only after the database)
+- `wait-for-it.sh` (imported from https://github.com/vishnubob/wait-for-it)
+
+    > To avoid breaking the application, we recommend you don't edit the following files: everything that includes the **docker folder** and `Dokerfile`.
+
+## Run services:
+
+1. Install docker compose (https://docs.docker.com/compose/install/)
+
+2. Move to `docker` folder. All next steps should be done from this folder.
+
+   ``` cd docker ```
+
+3. Make executables from `wait-for-it.sh` and `start-backend.sh`:
+
+   ``` chmod +x start-backend.sh && chmod +x wait-for-it.sh ```
+
+4. Download dependend projects for services.
+
+5. Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile.
+
+6. Make sure you have needed ports (see them in `ports`) available on your local machine.
+
+7. Start services:
+
+   7.1. With an empty database `rm -rf data && docker-compose up`
+
+   7.2. With a stored (from previus runs) database data `docker-compose up`
+
+8. Check http://localhost:3000
+
+9. Stop services:
+
+   9.1. Just press `Ctr+C`
+
+## Most common errors:
+
+1. `connection refused`
+
+   There could be many reasons, but the most common are:
+
+  - The port is not open on the destination machine.
+
+  - The port is open on the destination machine, but its backlog of pending connections is full.
+
+  - A firewall between the client and server is blocking access (also check local firewalls).
+
+   After checking for firewalls and that the port is open, use telnet to connect to the IP/port to test connectivity. This removes any potential issues from your application.
+
+   ***MacOS:***
+
+   If you suspect that your SSH service might be down, you can run this command to find out:
+
+   `sudo service ssh status`
+
+   If the command line returns a status of down, then you’ve likely found the reason behind your connectivity error.
+
+   ***Ubuntu:***
+
+   Sometimes a connection refused error can also indicate that there is an IP address conflict on your network. You can search for possible IP conflicts by running:
+
+   `arp-scan -I eth0 -l | grep <ipaddress>`
+
+   `arp-scan -I eth0 -l | grep <ipaddress>`
+
+   and
+
+   `arping <ipaddress>`
+
+2. `yarn db:create` creates database with the assembled tables (on MacOS with Postgres database)
+
+   The workaround - put the next commands to your Postgres database terminal:
+
+   `DROP SCHEMA public CASCADE;`
+
+   `CREATE SCHEMA public;`
+
+   `GRANT ALL ON SCHEMA public TO postgres;`
+
+   `GRANT ALL ON SCHEMA public TO public;`
+
+   Afterwards, continue to start your project in the backend directory by running:
+
+   `yarn start`
\ No newline at end of file
diff --git a/backend/.env b/backend/.env
new file mode 100644
index 0000000..d2d6bcf
--- /dev/null
+++ b/backend/.env
@@ -0,0 +1,14 @@
+DB_NAME=app_39416
+DB_USER=app_39416
+DB_PASS=449280c1-0786-42c4-8e6d-b645054dc9ee
+DB_HOST=127.0.0.1
+DB_PORT=5432
+PORT=3000
+GOOGLE_CLIENT_ID=671001533244-kf1k1gmp6mnl0r030qmvdu6v36ghmim6.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=Yo4qbKZniqvojzUQ60iKlxqR
+MS_CLIENT_ID=4696f457-31af-40de-897c-e00d7d4cff73
+MS_CLIENT_SECRET=m8jzZ.5UpHF3=-dXzyxiZ4e[F8OF54@p
+EMAIL_USER=AKIAVEW7G4PQUBGM52OF
+EMAIL_PASS=BLnD4hKGb6YkSz3gaQrf8fnyLi3C3/EdjOOsLEDTDPTz
+SECRET_KEY=HUEyqESqgQ1yTwzVlO6wprC9Kf1J1xuA
+PEXELS_KEY=Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18
diff --git a/backend/.eslintignore b/backend/.eslintignore
new file mode 100644
index 0000000..3fabb75
--- /dev/null
+++ b/backend/.eslintignore
@@ -0,0 +1,4 @@
+# Ignore generated and runtime files
+node_modules/
+tmp/
+logs/
diff --git a/backend/.eslintrc.cjs b/backend/.eslintrc.cjs
new file mode 100644
index 0000000..f312476
--- /dev/null
+++ b/backend/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    node: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended'
+  ],
+  plugins: [
+    'import'
+  ],
+  rules: {
+    'import/no-unresolved': 'error'
+  }
+};
diff --git a/backend/.prettierrc b/backend/.prettierrc
new file mode 100644
index 0000000..bb087f2
--- /dev/null
+++ b/backend/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/backend/.sequelizerc b/backend/.sequelizerc
new file mode 100644
index 0000000..fe89188
--- /dev/null
+++ b/backend/.sequelizerc
@@ -0,0 +1,7 @@
+const path = require('path');
+module.exports = {
+  "config": path.resolve("src", "db", "db.config.js"),
+  "models-path": path.resolve("src", "db", "models"),
+  "seeders-path": path.resolve("src", "db", "seeders"),
+  "migrations-path": path.resolve("src", "db", "migrations")
+};
\ No newline at end of file
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 0000000..581cb98
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,23 @@
+FROM node:20.15.1-alpine
+
+RUN apk update && apk add bash
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN yarn install
+# If you are building your code for production
+# RUN npm ci --only=production
+
+
+# Bundle app source
+COPY . .
+
+
+EXPOSE 8080
+
+CMD [ "yarn", "start" ]
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 0000000..d22cf8b
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,56 @@
+
+#Modern ERP Redesign - template backend,
+
+#### Run App on local machine:
+
+##### Install local dependencies:
+- `yarn install`
+
+------------
+
+##### Adjust local db:
+###### 1.  Install postgres:
+ - MacOS:
+   - `brew install postgres`
+
+- Ubuntu:
+  - `sudo apt update`
+  - `sudo apt install postgresql postgresql-contrib`
+
+###### 2. Create db and admin user:
+ - Before run and test connection, make sure you have created a database as described in the above configuration. You can use the `psql` command to create a user and database.
+   - `psql postgres --u postgres`
+
+- Next, type this command for creating a new user with password then give access for creating the database.
+  - `postgres-# CREATE ROLE admin WITH LOGIN PASSWORD 'admin_pass';`
+  - `postgres-# ALTER ROLE admin CREATEDB;`
+
+- Quit `psql` then log in again using the new user that previously created.
+  - `postgres-# \q`
+  - `psql postgres -U admin`
+
+- Type this command to creating a new database.
+  - `postgres=> CREATE DATABASE db_modern_erp_redesign;`
+
+- Then give that new user privileges to the new database then quit the `psql`.
+  - `postgres=> GRANT ALL PRIVILEGES ON DATABASE db_modern_erp_redesign TO admin;`
+  - `postgres=> \q`
+ 
+------------
+
+#### Api Documentation (Swagger)
+
+http://localhost:8080/api-docs (local host)
+
+http://host_name/api-docs
+
+------------
+
+ ##### Setup database tables or update after schema change
+ - `yarn db:migrate`
+
+ ##### Seed the initial data (admin accounts, relevant for the first setup):
+ - `yarn db:seed`
+ 
+ ##### Start build:
+ - `yarn start`
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..ac0faab
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "modernerpredesign",
+  "description": "Modern ERP Redesign - template backend",
+  "scripts": {
+    "start": "npm run db:migrate && npm run db:seed && npm run watch",
+    "lint": "eslint . --ext .js",
+    "db:migrate": "sequelize-cli db:migrate",
+    "db:seed": "sequelize-cli db:seed:all",
+    "db:drop": "sequelize-cli db:drop",
+    "db:create": "sequelize-cli db:create",
+    "watch": "node watcher.js"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^5.18.2",
+    "axios": "^1.6.7",
+    "bcrypt": "5.1.1",
+    "chokidar": "^4.0.3",
+    "cors": "2.8.5",
+    "csv-parser": "^3.0.0",
+    "express": "4.18.2",
+    "formidable": "1.2.2",
+    "helmet": "4.1.1",
+    "json2csv": "^5.0.7",
+    "jsonwebtoken": "8.5.1",
+    "lodash": "4.17.21",
+    "moment": "2.30.1",
+    "multer": "^1.4.4",
+    "mysql2": "2.2.5",
+    "nodemailer": "6.9.9",
+    "passport": "^0.7.0",
+    "passport-google-oauth2": "^0.2.0",
+    "passport-jwt": "^4.0.1",
+    "passport-microsoft": "^0.1.0",
+    "pg": "8.4.1",
+    "pg-hstore": "2.3.4",
+    "sequelize": "6.35.2",
+    "sequelize-json-schema": "^2.1.1",
+    "sqlite": "4.0.15",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.0",
+    "tedious": "^18.2.4"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "private": true,
+  "devDependencies": {
+    "cross-env": "7.0.3",
+    "eslint": "^8.23.1",
+    "eslint-plugin-import": "^2.29.1",
+    "mocha": "8.1.3",
+    "node-mocks-http": "1.9.0",
+    "nodemon": "2.0.5",
+    "sequelize-cli": "6.6.2"
+  }
+}
diff --git a/backend/src/ai/LocalAIApi.js b/backend/src/ai/LocalAIApi.js
new file mode 100644
index 0000000..fd571ae
--- /dev/null
+++ b/backend/src/ai/LocalAIApi.js
@@ -0,0 +1,484 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const http = require("http");
+const https = require("https");
+const { URL } = require("url");
+
+let CONFIG_CACHE = null;
+
+class LocalAIApi {
+  static createResponse(params, options) {
+    return createResponse(params, options);
+  }
+
+  static request(pathValue, payload, options) {
+    return request(pathValue, payload, options);
+  }
+
+  static fetchStatus(aiRequestId, options) {
+    return fetchStatus(aiRequestId, options);
+  }
+
+  static awaitResponse(aiRequestId, options) {
+    return awaitResponse(aiRequestId, options);
+  }
+
+  static extractText(response) {
+    return extractText(response);
+  }
+
+  static decodeJsonFromResponse(response) {
+    return decodeJsonFromResponse(response);
+  }
+}
+
+async function createResponse(params, options = {}) {
+  const payload = { ...(params || {}) };
+
+  if (!Array.isArray(payload.input) || payload.input.length === 0) {
+    return {
+      success: false,
+      error: "input_missing",
+      message: 'Parameter "input" is required and must be a non-empty array.',
+    };
+  }
+
+  const cfg = config();
+  if (!payload.model) {
+    payload.model = cfg.defaultModel;
+  }
+
+  const initial = await request(options.path, payload, options);
+  if (!initial.success) {
+    return initial;
+  }
+
+  const data = initial.data;
+  if (data && typeof data === "object" && data.ai_request_id) {
+    const pollTimeout = Number(options.poll_timeout ?? 300);
+    const pollInterval = Number(options.poll_interval ?? 5);
+    return await awaitResponse(data.ai_request_id, {
+      interval: pollInterval,
+      timeout: pollTimeout,
+      headers: options.headers,
+      timeout_per_call: options.timeout,
+      verify_tls: options.verify_tls,
+    });
+  }
+
+  return initial;
+}
+
+async function request(pathValue, payload = {}, options = {}) {
+  const cfg = config();
+  const resolvedPath = pathValue || options.path || cfg.responsesPath;
+
+  if (!resolvedPath) {
+    return {
+      success: false,
+      error: "project_id_missing",
+      message: "PROJECT_ID is not defined; cannot resolve AI proxy endpoint.",
+    };
+  }
+
+  if (!cfg.projectUuid) {
+    return {
+      success: false,
+      error: "project_uuid_missing",
+      message: "PROJECT_UUID is not defined; aborting AI request.",
+    };
+  }
+
+  const bodyPayload = { ...(payload || {}) };
+  if (!bodyPayload.project_uuid) {
+    bodyPayload.project_uuid = cfg.projectUuid;
+  }
+
+  const url = buildUrl(resolvedPath, cfg.baseUrl);
+  const timeout = resolveTimeout(options.timeout, cfg.timeout);
+  const verifyTls = resolveVerifyTls(options.verify_tls, cfg.verifyTls);
+
+  const headers = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    [cfg.projectHeader]: cfg.projectUuid,
+  };
+  if (Array.isArray(options.headers)) {
+    for (const header of options.headers) {
+      if (typeof header === "string" && header.includes(":")) {
+        const [name, value] = header.split(":", 2);
+        headers[name.trim()] = value.trim();
+      }
+    }
+  }
+
+  const body = JSON.stringify(bodyPayload);
+  return sendRequest(url, "POST", body, headers, timeout, verifyTls);
+}
+
+async function fetchStatus(aiRequestId, options = {}) {
+  const cfg = config();
+  if (!cfg.projectUuid) {
+    return {
+      success: false,
+      error: "project_uuid_missing",
+      message: "PROJECT_UUID is not defined; aborting status check.",
+    };
+  }
+
+  const statusPath = resolveStatusPath(aiRequestId, cfg);
+  const url = buildUrl(statusPath, cfg.baseUrl);
+  const timeout = resolveTimeout(options.timeout, cfg.timeout);
+  const verifyTls = resolveVerifyTls(options.verify_tls, cfg.verifyTls);
+
+  const headers = {
+    Accept: "application/json",
+    [cfg.projectHeader]: cfg.projectUuid,
+  };
+  if (Array.isArray(options.headers)) {
+    for (const header of options.headers) {
+      if (typeof header === "string" && header.includes(":")) {
+        const [name, value] = header.split(":", 2);
+        headers[name.trim()] = value.trim();
+      }
+    }
+  }
+
+  return sendRequest(url, "GET", null, headers, timeout, verifyTls);
+}
+
+async function awaitResponse(aiRequestId, options = {}) {
+  const timeout = Number(options.timeout ?? 300);
+  const interval = Math.max(Number(options.interval ?? 5), 1);
+  const deadline = Date.now() + Math.max(timeout, interval) * 1000;
+
+  while (true) {
+    const statusResp = await fetchStatus(aiRequestId, {
+      headers: options.headers,
+      timeout: options.timeout_per_call,
+      verify_tls: options.verify_tls,
+    });
+
+    if (statusResp.success) {
+      const data = statusResp.data || {};
+      if (data && typeof data === "object") {
+        if (data.status === "success") {
+          return {
+            success: true,
+            status: 200,
+            data: data.response || data,
+          };
+        }
+        if (data.status === "failed") {
+          return {
+            success: false,
+            status: 500,
+            error: String(data.error || "AI request failed"),
+            data,
+          };
+        }
+      }
+    } else {
+      return statusResp;
+    }
+
+    if (Date.now() >= deadline) {
+      return {
+        success: false,
+        error: "timeout",
+        message: "Timed out waiting for AI response.",
+      };
+    }
+
+    await sleep(interval * 1000);
+  }
+}
+
+function extractText(response) {
+  const payload = response && typeof response === "object" ? response.data || response : null;
+  if (!payload || typeof payload !== "object") {
+    return "";
+  }
+
+  if (Array.isArray(payload.output)) {
+    let combined = "";
+    for (const item of payload.output) {
+      if (!item || !Array.isArray(item.content)) {
+        continue;
+      }
+      for (const block of item.content) {
+        if (
+          block &&
+          typeof block === "object" &&
+          block.type === "output_text" &&
+          typeof block.text === "string" &&
+          block.text.length > 0
+        ) {
+          combined += block.text;
+        }
+      }
+    }
+    if (combined) {
+      return combined;
+    }
+  }
+
+  if (
+    payload.choices &&
+    payload.choices[0] &&
+    payload.choices[0].message &&
+    typeof payload.choices[0].message.content === "string"
+  ) {
+    return payload.choices[0].message.content;
+  }
+
+  return "";
+}
+
+function decodeJsonFromResponse(response) {
+  const text = extractText(response);
+  if (!text) {
+    throw new Error("No text found in AI response.");
+  }
+
+  const parsed = parseJson(text);
+  if (parsed.ok && parsed.value && typeof parsed.value === "object") {
+    return parsed.value;
+  }
+
+  const stripped = stripJsonFence(text);
+  if (stripped !== text) {
+    const parsedStripped = parseJson(stripped);
+    if (parsedStripped.ok && parsedStripped.value && typeof parsedStripped.value === "object") {
+      return parsedStripped.value;
+    }
+    throw new Error(`JSON parse failed after stripping fences: ${parsedStripped.error}`);
+  }
+
+  throw new Error(`JSON parse failed: ${parsed.error}`);
+}
+
+function config() {
+  if (CONFIG_CACHE) {
+    return CONFIG_CACHE;
+  }
+
+  ensureEnvLoaded();
+
+  const baseUrl = process.env.AI_PROXY_BASE_URL || "https://flatlogic.com";
+  const projectId = process.env.PROJECT_ID || null;
+  let responsesPath = process.env.AI_RESPONSES_PATH || null;
+  if (!responsesPath && projectId) {
+    responsesPath = `/projects/${projectId}/ai-request`;
+  }
+
+  const timeout = resolveTimeout(process.env.AI_TIMEOUT, 30);
+  const verifyTls = resolveVerifyTls(process.env.AI_VERIFY_TLS, true);
+
+  CONFIG_CACHE = {
+    baseUrl,
+    responsesPath,
+    projectId,
+    projectUuid: process.env.PROJECT_UUID || null,
+    projectHeader: process.env.AI_PROJECT_HEADER || "project-uuid",
+    defaultModel: process.env.AI_DEFAULT_MODEL || "gpt-5-mini",
+    timeout,
+    verifyTls,
+  };
+
+  return CONFIG_CACHE;
+}
+
+function buildUrl(pathValue, baseUrl) {
+  const trimmed = String(pathValue || "").trim();
+  if (trimmed === "") {
+    return baseUrl;
+  }
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("/")) {
+    return `${baseUrl}${trimmed}`;
+  }
+  return `${baseUrl}/${trimmed}`;
+}
+
+function resolveStatusPath(aiRequestId, cfg) {
+  const basePath = (cfg.responsesPath || "").replace(/\/+$/, "");
+  if (!basePath) {
+    return `/ai-request/${encodeURIComponent(String(aiRequestId))}/status`;
+  }
+  const normalized = basePath.endsWith("/ai-request") ? basePath : `${basePath}/ai-request`;
+  return `${normalized}/${encodeURIComponent(String(aiRequestId))}/status`;
+}
+
+function sendRequest(urlString, method, body, headers, timeoutSeconds, verifyTls) {
+  return new Promise((resolve) => {
+    let targetUrl;
+    try {
+      targetUrl = new URL(urlString);
+    } catch (err) {
+      resolve({
+        success: false,
+        error: "invalid_url",
+        message: err.message,
+      });
+      return;
+    }
+
+    const isHttps = targetUrl.protocol === "https:";
+    const requestFn = isHttps ? https.request : http.request;
+    const options = {
+      protocol: targetUrl.protocol,
+      hostname: targetUrl.hostname,
+      port: targetUrl.port || (isHttps ? 443 : 80),
+      path: `${targetUrl.pathname}${targetUrl.search}`,
+      method: method.toUpperCase(),
+      headers,
+      timeout: Math.max(Number(timeoutSeconds || 30), 1) * 1000,
+    };
+    if (isHttps) {
+      options.rejectUnauthorized = Boolean(verifyTls);
+    }
+
+    const req = requestFn(options, (res) => {
+      let responseBody = "";
+      res.setEncoding("utf8");
+      res.on("data", (chunk) => {
+        responseBody += chunk;
+      });
+      res.on("end", () => {
+        const status = res.statusCode || 0;
+        const parsed = parseJson(responseBody);
+        const payload = parsed.ok ? parsed.value : responseBody;
+
+        if (status >= 200 && status < 300) {
+          const result = {
+            success: true,
+            status,
+            data: payload,
+          };
+          if (!parsed.ok) {
+            result.json_error = parsed.error;
+          }
+          resolve(result);
+          return;
+        }
+
+        const errorMessage =
+          parsed.ok && payload && typeof payload === "object"
+            ? String(payload.error || payload.message || "AI proxy request failed")
+            : String(responseBody || "AI proxy request failed");
+
+        resolve({
+          success: false,
+          status,
+          error: errorMessage,
+          response: payload,
+          json_error: parsed.ok ? undefined : parsed.error,
+        });
+      });
+    });
+
+    req.on("timeout", () => {
+      req.destroy(new Error("request_timeout"));
+    });
+
+    req.on("error", (err) => {
+      resolve({
+        success: false,
+        error: "request_failed",
+        message: err.message,
+      });
+    });
+
+    if (body) {
+      req.write(body);
+    }
+    req.end();
+  });
+}
+
+function parseJson(value) {
+  if (typeof value !== "string" || value.trim() === "") {
+    return { ok: false, error: "empty_response" };
+  }
+  try {
+    return { ok: true, value: JSON.parse(value) };
+  } catch (err) {
+    return { ok: false, error: err.message };
+  }
+}
+
+function stripJsonFence(text) {
+  const trimmed = text.trim();
+  if (trimmed.startsWith("```json")) {
+    return trimmed.replace(/^```json/, "").replace(/```$/, "").trim();
+  }
+  if (trimmed.startsWith("```")) {
+    return trimmed.replace(/^```/, "").replace(/```$/, "").trim();
+  }
+  return text;
+}
+
+function resolveTimeout(value, fallback) {
+  const parsed = Number.parseInt(String(value ?? fallback), 10);
+  return Number.isNaN(parsed) ? Number(fallback) : parsed;
+}
+
+function resolveVerifyTls(value, fallback) {
+  if (value === undefined || value === null) {
+    return Boolean(fallback);
+  }
+  return String(value).toLowerCase() !== "false" && String(value) !== "0";
+}
+
+function ensureEnvLoaded() {
+  if (process.env.PROJECT_UUID && process.env.PROJECT_ID) {
+    return;
+  }
+
+  const envPath = path.resolve(__dirname, "../../../../.env");
+  if (!fs.existsSync(envPath)) {
+    return;
+  }
+
+  let content;
+  try {
+    content = fs.readFileSync(envPath, "utf8");
+  } catch (err) {
+    throw new Error(`Failed to read executor .env: ${err.message}`);
+  }
+
+  for (const line of content.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#") || !trimmed.includes("=")) {
+      continue;
+    }
+    const [rawKey, ...rest] = trimmed.split("=");
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    const value = rest.join("=").trim().replace(/^['"]|['"]$/g, "");
+    if (!process.env[key]) {
+      process.env[key] = value;
+    }
+  }
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+module.exports = {
+  LocalAIApi,
+  createResponse,
+  request,
+  fetchStatus,
+  awaitResponse,
+  extractText,
+  decodeJsonFromResponse,
+};
diff --git a/backend/src/auth/auth.js b/backend/src/auth/auth.js
new file mode 100644
index 0000000..251c149
--- /dev/null
+++ b/backend/src/auth/auth.js
@@ -0,0 +1,68 @@
+const config = require('../config');
+const providers = config.providers;
+const helpers = require('../helpers');
+const db = require('../db/models');
+
+const passport = require('passport');
+const JWTstrategy = require('passport-jwt').Strategy;
+const ExtractJWT = require('passport-jwt').ExtractJwt;
+const GoogleStrategy = require('passport-google-oauth2').Strategy;
+const MicrosoftStrategy = require('passport-microsoft').Strategy;
+const UsersDBApi = require('../db/api/users');
+
+
+passport.use(new JWTstrategy({
+  passReqToCallback: true,
+  secretOrKey: config.secret_key,
+  jwtFromRequest: ExtractJWT.fromAuthHeaderAsBearerToken()
+}, async (req, token, done) => {
+  try {
+    const user = await UsersDBApi.findBy( {email: token.user.email});
+
+    if (user && user.disabled) {
+      return done (new Error(`User '${user.email}' is disabled`));
+    }
+
+    req.currentUser = user;
+
+    return done(null, user);
+  } catch (error) {
+    done(error);
+  }
+}));
+
+passport.use(new GoogleStrategy({
+    clientID: config.google.clientId,
+    clientSecret: config.google.clientSecret,
+    callbackURL: config.apiUrl + '/auth/signin/google/callback',
+    passReqToCallback: true
+  },
+  function (request, accessToken, refreshToken, profile, done) {
+    socialStrategy(profile.email, profile, providers.GOOGLE, done);
+  }
+));
+
+
+passport.use(new MicrosoftStrategy({
+    clientID: config.microsoft.clientId,
+    clientSecret: config.microsoft.clientSecret,
+    callbackURL: config.apiUrl + '/auth/signin/microsoft/callback',
+    passReqToCallback: true
+  },
+  function (request, accessToken, refreshToken, profile, done) {
+    const email = profile._json.mail || profile._json.userPrincipalName;
+    socialStrategy(email, profile, providers.MICROSOFT, done);
+  }
+));
+
+function socialStrategy(email, profile, provider, done) {
+  db.users.findOrCreate({where: {email, provider}}).then(([user, created]) => {
+    const body = {
+      id: user.id,
+      email: user.email,
+      name: profile.displayName,
+    };
+    const token = helpers.jwtSign({user: body});
+    return done(null, {token});
+  });
+}
diff --git a/backend/src/config.js b/backend/src/config.js
new file mode 100644
index 0000000..b76de13
--- /dev/null
+++ b/backend/src/config.js
@@ -0,0 +1,80 @@
+
+
+
+const os = require('os');
+
+const config = {
+  gcloud: {
+    bucket: "fldemo-files",
+    hash: "afeefb9d49f5b7977577876b99532ac7"
+  },
+  bcrypt: {
+    saltRounds: 12
+  },
+  admin_pass: "449280c1",
+  user_pass: "b645054dc9ee",
+  admin_email: "admin@flatlogic.com",
+  providers: {
+    LOCAL: 'local',
+    GOOGLE: 'google',
+    MICROSOFT: 'microsoft'
+  },
+  secret_key: process.env.SECRET_KEY || '449280c1-0786-42c4-8e6d-b645054dc9ee',
+  remote: '',
+  port: process.env.NODE_ENV === "production" ? "" : "8080",
+  hostUI: process.env.NODE_ENV === "production" ? "" : "http://localhost",
+  portUI: process.env.NODE_ENV === "production" ? "" : "3000",
+
+  portUIProd: process.env.NODE_ENV === "production" ? "" : ":3000",
+
+  swaggerUI: process.env.NODE_ENV === "production" ? "" : "http://localhost",
+  swaggerPort: process.env.NODE_ENV === "production" ? "" : ":8080",
+  google: {
+    clientId: process.env.GOOGLE_CLIENT_ID || '',
+    clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
+  },
+  microsoft: {
+      clientId: process.env.MS_CLIENT_ID || '',
+      clientSecret: process.env.MS_CLIENT_SECRET || '',
+  },
+  uploadDir: os.tmpdir(),
+  email: {
+    from: 'Modern ERP Redesign <app@flatlogic.app>',
+    host: 'email-smtp.us-east-1.amazonaws.com',
+    port: 587,
+    auth: {
+      user: process.env.EMAIL_USER || '',
+      pass: process.env.EMAIL_PASS,
+    },
+    tls: {
+      rejectUnauthorized: false
+    }
+  },
+  roles: {
+
+    super_admin: 'Super Administrator',
+
+    admin: 'Administrator',
+
+
+  user: 'User',
+
+  },
+
+  project_uuid: '449280c1-0786-42c4-8e6d-b645054dc9ee',
+  flHost: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'dev_stage' ? 'https://flatlogic.com/projects' : 'http://localhost:3000/projects',
+
+
+  gpt_key: process.env.GPT_KEY || '',
+};
+
+config.pexelsKey = process.env.PEXELS_KEY || '';
+
+config.pexelsQuery = 'Clean skyline at dawn';
+config.host = process.env.NODE_ENV === "production" ? config.remote : "http://localhost";
+config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
+config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
+config.uiUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}/#`;
+config.backUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}`;
+
+module.exports = config;
diff --git a/backend/src/db/api/activity_logs.js b/backend/src/db/api/activity_logs.js
new file mode 100644
index 0000000..37b5996
--- /dev/null
+++ b/backend/src/db/api/activity_logs.js
@@ -0,0 +1,571 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Activity_logsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const activity_logs = await db.activity_logs.create(
+            {
+                id: data.id || undefined,
+        
+        entity_type: data.entity_type
+        ||
+        null
+            ,
+            
+        entity_reference: data.entity_reference
+        ||
+        null
+            ,
+            
+        action: data.action
+        ||
+        null
+            ,
+            
+        event_time: data.event_time
+        ||
+        null
+            ,
+            
+        message: data.message
+        ||
+        null
+            ,
+            
+        ip_address: data.ip_address
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await activity_logs.setActor( data.actor || null, {
+            transaction,
+        });
+        
+        await activity_logs.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return activity_logs;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const activity_logsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                entity_type: item.entity_type
+            ||
+            null
+            ,
+            
+                entity_reference: item.entity_reference
+            ||
+            null
+            ,
+            
+                action: item.action
+            ||
+            null
+            ,
+            
+                event_time: item.event_time
+            ||
+            null
+            ,
+            
+                message: item.message
+            ||
+            null
+            ,
+            
+                ip_address: item.ip_address
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const activity_logs = await db.activity_logs.bulkCreate(activity_logsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return activity_logs;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const activity_logs = await db.activity_logs.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.entity_type !== undefined) updatePayload.entity_type = data.entity_type;
+        
+        
+        if (data.entity_reference !== undefined) updatePayload.entity_reference = data.entity_reference;
+        
+        
+        if (data.action !== undefined) updatePayload.action = data.action;
+        
+        
+        if (data.event_time !== undefined) updatePayload.event_time = data.event_time;
+        
+        
+        if (data.message !== undefined) updatePayload.message = data.message;
+        
+        
+        if (data.ip_address !== undefined) updatePayload.ip_address = data.ip_address;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await activity_logs.update(updatePayload, {transaction});
+
+        
+        
+        if (data.actor !== undefined) {
+            await activity_logs.setActor(
+              
+              data.actor,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await activity_logs.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return activity_logs;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const activity_logs = await db.activity_logs.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of activity_logs) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of activity_logs) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return activity_logs;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const activity_logs = await db.activity_logs.findByPk(id, options);
+
+        await activity_logs.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await activity_logs.destroy({
+            transaction
+        });
+
+        return activity_logs;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const activity_logs = await db.activity_logs.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!activity_logs) {
+            return activity_logs;
+        }
+
+        const output = activity_logs.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.actor = await activity_logs.getActor({
+            transaction
+        });
+        
+        
+        output.organizations = await activity_logs.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.users,
+        as: 'actor',
+        
+        where: filter.actor ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.actor.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.actor.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.entity_reference) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'activity_logs',
+                        'entity_reference',
+                        filter.entity_reference,
+                    ),
+                };
+            }
+            
+            if (filter.message) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'activity_logs',
+                        'message',
+                        filter.message,
+                    ),
+                };
+            }
+            
+            if (filter.ip_address) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'activity_logs',
+                        'ip_address',
+                        filter.ip_address,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.event_timeRange) {
+                const [start, end] = filter.event_timeRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    event_time: {
+                    ...where.event_time,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    event_time: {
+                    ...where.event_time,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.entity_type) {
+                where = {
+                    ...where,
+                entity_type: filter.entity_type,
+            };
+            }
+            
+            if (filter.action) {
+                where = {
+                    ...where,
+                action: filter.action,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.activity_logs.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'activity_logs',
+                        'entity_reference',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.activity_logs.findAll({
+            attributes: [ 'id', 'entity_reference' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['entity_reference', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.entity_reference,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/approval_steps.js b/backend/src/db/api/approval_steps.js
new file mode 100644
index 0000000..354d2a8
--- /dev/null
+++ b/backend/src/db/api/approval_steps.js
@@ -0,0 +1,620 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Approval_stepsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_steps = await db.approval_steps.create(
+            {
+                id: data.id || undefined,
+        
+        step_order: data.step_order
+        ||
+        null
+            ,
+            
+        step_name: data.step_name
+        ||
+        null
+            ,
+            
+        min_amount: data.min_amount
+        ||
+        null
+            ,
+            
+        max_amount: data.max_amount
+        ||
+        null
+            ,
+            
+        is_required: data.is_required
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await approval_steps.setApproval_workflow( data.approval_workflow || null, {
+            transaction,
+        });
+        
+        await approval_steps.setApprover_role( data.approver_role || null, {
+            transaction,
+        });
+        
+        await approval_steps.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return approval_steps;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const approval_stepsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                step_order: item.step_order
+            ||
+            null
+            ,
+            
+                step_name: item.step_name
+            ||
+            null
+            ,
+            
+                min_amount: item.min_amount
+            ||
+            null
+            ,
+            
+                max_amount: item.max_amount
+            ||
+            null
+            ,
+            
+                is_required: item.is_required
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const approval_steps = await db.approval_steps.bulkCreate(approval_stepsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return approval_steps;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const approval_steps = await db.approval_steps.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.step_order !== undefined) updatePayload.step_order = data.step_order;
+        
+        
+        if (data.step_name !== undefined) updatePayload.step_name = data.step_name;
+        
+        
+        if (data.min_amount !== undefined) updatePayload.min_amount = data.min_amount;
+        
+        
+        if (data.max_amount !== undefined) updatePayload.max_amount = data.max_amount;
+        
+        
+        if (data.is_required !== undefined) updatePayload.is_required = data.is_required;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await approval_steps.update(updatePayload, {transaction});
+
+        
+        
+        if (data.approval_workflow !== undefined) {
+            await approval_steps.setApproval_workflow(
+              
+              data.approval_workflow,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.approver_role !== undefined) {
+            await approval_steps.setApprover_role(
+              
+              data.approver_role,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await approval_steps.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return approval_steps;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_steps = await db.approval_steps.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of approval_steps) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of approval_steps) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return approval_steps;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_steps = await db.approval_steps.findByPk(id, options);
+
+        await approval_steps.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await approval_steps.destroy({
+            transaction
+        });
+
+        return approval_steps;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_steps = await db.approval_steps.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!approval_steps) {
+            return approval_steps;
+        }
+
+        const output = approval_steps.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.approvals_approval_step = await approval_steps.getApprovals_approval_step({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.approval_workflow = await approval_steps.getApproval_workflow({
+            transaction
+        });
+        
+        
+        output.approver_role = await approval_steps.getApprover_role({
+            transaction
+        });
+        
+        
+        output.organizations = await approval_steps.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.approval_workflows,
+        as: 'approval_workflow',
+        
+        where: filter.approval_workflow ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.approval_workflow.split('|').map(term => Utils.uuid(term)) } },
+            {
+              workflow_name: {
+                [Op.or]: filter.approval_workflow.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.roles,
+        as: 'approver_role',
+        
+        where: filter.approver_role ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.approver_role.split('|').map(term => Utils.uuid(term)) } },
+            {
+              name: {
+                [Op.or]: filter.approver_role.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.step_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'approval_steps',
+                        'step_name',
+                        filter.step_name,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.step_orderRange) {
+                const [start, end] = filter.step_orderRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    step_order: {
+                    ...where.step_order,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    step_order: {
+                    ...where.step_order,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.min_amountRange) {
+                const [start, end] = filter.min_amountRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    min_amount: {
+                    ...where.min_amount,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    min_amount: {
+                    ...where.min_amount,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.max_amountRange) {
+                const [start, end] = filter.max_amountRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    max_amount: {
+                    ...where.max_amount,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    max_amount: {
+                    ...where.max_amount,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_required) {
+                where = {
+                    ...where,
+                is_required: filter.is_required,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.approval_steps.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'approval_steps',
+                        'step_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.approval_steps.findAll({
+            attributes: [ 'id', 'step_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['step_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.step_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/approval_workflows.js b/backend/src/db/api/approval_workflows.js
new file mode 100644
index 0000000..4632893
--- /dev/null
+++ b/backend/src/db/api/approval_workflows.js
@@ -0,0 +1,520 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Approval_workflowsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_workflows = await db.approval_workflows.create(
+            {
+                id: data.id || undefined,
+        
+        workflow_name: data.workflow_name
+        ||
+        null
+            ,
+            
+        applies_to: data.applies_to
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+        description: data.description
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await approval_workflows.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await approval_workflows.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return approval_workflows;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const approval_workflowsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                workflow_name: item.workflow_name
+            ||
+            null
+            ,
+            
+                applies_to: item.applies_to
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+                description: item.description
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const approval_workflows = await db.approval_workflows.bulkCreate(approval_workflowsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return approval_workflows;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const approval_workflows = await db.approval_workflows.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.workflow_name !== undefined) updatePayload.workflow_name = data.workflow_name;
+        
+        
+        if (data.applies_to !== undefined) updatePayload.applies_to = data.applies_to;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await approval_workflows.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await approval_workflows.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await approval_workflows.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return approval_workflows;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_workflows = await db.approval_workflows.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of approval_workflows) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of approval_workflows) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return approval_workflows;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_workflows = await db.approval_workflows.findByPk(id, options);
+
+        await approval_workflows.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await approval_workflows.destroy({
+            transaction
+        });
+
+        return approval_workflows;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const approval_workflows = await db.approval_workflows.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!approval_workflows) {
+            return approval_workflows;
+        }
+
+        const output = approval_workflows.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.approval_steps_approval_workflow = await approval_workflows.getApproval_steps_approval_workflow({
+            transaction
+        });
+        
+        
+        output.approvals_approval_workflow = await approval_workflows.getApprovals_approval_workflow({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.company = await approval_workflows.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await approval_workflows.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.workflow_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'approval_workflows',
+                        'workflow_name',
+                        filter.workflow_name,
+                    ),
+                };
+            }
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'approval_workflows',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.applies_to) {
+                where = {
+                    ...where,
+                applies_to: filter.applies_to,
+            };
+            }
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.approval_workflows.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'approval_workflows',
+                        'workflow_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.approval_workflows.findAll({
+            attributes: [ 'id', 'workflow_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['workflow_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.workflow_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/approvals.js b/backend/src/db/api/approvals.js
new file mode 100644
index 0000000..fa951bf
--- /dev/null
+++ b/backend/src/db/api/approvals.js
@@ -0,0 +1,695 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class ApprovalsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approvals = await db.approvals.create(
+            {
+                id: data.id || undefined,
+        
+        entity_type: data.entity_type
+        ||
+        null
+            ,
+            
+        entity_reference: data.entity_reference
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        requested_at: data.requested_at
+        ||
+        null
+            ,
+            
+        decided_at: data.decided_at
+        ||
+        null
+            ,
+            
+        decision_notes: data.decision_notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await approvals.setApproval_workflow( data.approval_workflow || null, {
+            transaction,
+        });
+        
+        await approvals.setApproval_step( data.approval_step || null, {
+            transaction,
+        });
+        
+        await approvals.setRequested_by( data.requested_by || null, {
+            transaction,
+        });
+        
+        await approvals.setAssigned_to( data.assigned_to || null, {
+            transaction,
+        });
+        
+        await approvals.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return approvals;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const approvalsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                entity_type: item.entity_type
+            ||
+            null
+            ,
+            
+                entity_reference: item.entity_reference
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                requested_at: item.requested_at
+            ||
+            null
+            ,
+            
+                decided_at: item.decided_at
+            ||
+            null
+            ,
+            
+                decision_notes: item.decision_notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const approvals = await db.approvals.bulkCreate(approvalsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return approvals;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const approvals = await db.approvals.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.entity_type !== undefined) updatePayload.entity_type = data.entity_type;
+        
+        
+        if (data.entity_reference !== undefined) updatePayload.entity_reference = data.entity_reference;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.requested_at !== undefined) updatePayload.requested_at = data.requested_at;
+        
+        
+        if (data.decided_at !== undefined) updatePayload.decided_at = data.decided_at;
+        
+        
+        if (data.decision_notes !== undefined) updatePayload.decision_notes = data.decision_notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await approvals.update(updatePayload, {transaction});
+
+        
+        
+        if (data.approval_workflow !== undefined) {
+            await approvals.setApproval_workflow(
+              
+              data.approval_workflow,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.approval_step !== undefined) {
+            await approvals.setApproval_step(
+              
+              data.approval_step,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.requested_by !== undefined) {
+            await approvals.setRequested_by(
+              
+              data.requested_by,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.assigned_to !== undefined) {
+            await approvals.setAssigned_to(
+              
+              data.assigned_to,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await approvals.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return approvals;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const approvals = await db.approvals.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of approvals) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of approvals) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return approvals;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const approvals = await db.approvals.findByPk(id, options);
+
+        await approvals.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await approvals.destroy({
+            transaction
+        });
+
+        return approvals;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const approvals = await db.approvals.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!approvals) {
+            return approvals;
+        }
+
+        const output = approvals.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.approval_workflow = await approvals.getApproval_workflow({
+            transaction
+        });
+        
+        
+        output.approval_step = await approvals.getApproval_step({
+            transaction
+        });
+        
+        
+        output.requested_by = await approvals.getRequested_by({
+            transaction
+        });
+        
+        
+        output.assigned_to = await approvals.getAssigned_to({
+            transaction
+        });
+        
+        
+        output.organizations = await approvals.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.approval_workflows,
+        as: 'approval_workflow',
+        
+        where: filter.approval_workflow ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.approval_workflow.split('|').map(term => Utils.uuid(term)) } },
+            {
+              workflow_name: {
+                [Op.or]: filter.approval_workflow.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.approval_steps,
+        as: 'approval_step',
+        
+        where: filter.approval_step ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.approval_step.split('|').map(term => Utils.uuid(term)) } },
+            {
+              step_name: {
+                [Op.or]: filter.approval_step.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'requested_by',
+        
+        where: filter.requested_by ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.requested_by.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.requested_by.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'assigned_to',
+        
+        where: filter.assigned_to ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.assigned_to.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.assigned_to.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.entity_reference) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'approvals',
+                        'entity_reference',
+                        filter.entity_reference,
+                    ),
+                };
+            }
+            
+            if (filter.decision_notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'approvals',
+                        'decision_notes',
+                        filter.decision_notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.requested_atRange) {
+                const [start, end] = filter.requested_atRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    requested_at: {
+                    ...where.requested_at,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    requested_at: {
+                    ...where.requested_at,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.decided_atRange) {
+                const [start, end] = filter.decided_atRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    decided_at: {
+                    ...where.decided_at,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    decided_at: {
+                    ...where.decided_at,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.entity_type) {
+                where = {
+                    ...where,
+                entity_type: filter.entity_type,
+            };
+            }
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.approvals.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'approvals',
+                        'entity_reference',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.approvals.findAll({
+            attributes: [ 'id', 'entity_reference' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['entity_reference', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.entity_reference,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/companies.js b/backend/src/db/api/companies.js
new file mode 100644
index 0000000..75cf7af
--- /dev/null
+++ b/backend/src/db/api/companies.js
@@ -0,0 +1,793 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class CompaniesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const companies = await db.companies.create(
+            {
+                id: data.id || undefined,
+        
+        company_name: data.company_name
+        ||
+        null
+            ,
+            
+        legal_name: data.legal_name
+        ||
+        null
+            ,
+            
+        tax_number: data.tax_number
+        ||
+        null
+            ,
+            
+        website: data.website
+        ||
+        null
+            ,
+            
+        phone: data.phone
+        ||
+        null
+            ,
+            
+        email: data.email
+        ||
+        null
+            ,
+            
+        address_line1: data.address_line1
+        ||
+        null
+            ,
+            
+        address_line2: data.address_line2
+        ||
+        null
+            ,
+            
+        city: data.city
+        ||
+        null
+            ,
+            
+        state: data.state
+        ||
+        null
+            ,
+            
+        postal_code: data.postal_code
+        ||
+        null
+            ,
+            
+        country: data.country
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await companies.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.companies.getTableName(),
+                belongsToColumn: 'logo',
+                belongsToId: companies.id,
+            },
+            data.logo,
+            options,
+        );
+        
+
+        return companies;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const companiesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                company_name: item.company_name
+            ||
+            null
+            ,
+            
+                legal_name: item.legal_name
+            ||
+            null
+            ,
+            
+                tax_number: item.tax_number
+            ||
+            null
+            ,
+            
+                website: item.website
+            ||
+            null
+            ,
+            
+                phone: item.phone
+            ||
+            null
+            ,
+            
+                email: item.email
+            ||
+            null
+            ,
+            
+                address_line1: item.address_line1
+            ||
+            null
+            ,
+            
+                address_line2: item.address_line2
+            ||
+            null
+            ,
+            
+                city: item.city
+            ||
+            null
+            ,
+            
+                state: item.state
+            ||
+            null
+            ,
+            
+                postal_code: item.postal_code
+            ||
+            null
+            ,
+            
+                country: item.country
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const companies = await db.companies.bulkCreate(companiesData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < companies.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.companies.getTableName(),
+                    belongsToColumn: 'logo',
+                    belongsToId: companies[i].id,
+                },
+                data[i].logo,
+                options,
+            );
+        }
+        
+
+        return companies;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const companies = await db.companies.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.company_name !== undefined) updatePayload.company_name = data.company_name;
+        
+        
+        if (data.legal_name !== undefined) updatePayload.legal_name = data.legal_name;
+        
+        
+        if (data.tax_number !== undefined) updatePayload.tax_number = data.tax_number;
+        
+        
+        if (data.website !== undefined) updatePayload.website = data.website;
+        
+        
+        if (data.phone !== undefined) updatePayload.phone = data.phone;
+        
+        
+        if (data.email !== undefined) updatePayload.email = data.email;
+        
+        
+        if (data.address_line1 !== undefined) updatePayload.address_line1 = data.address_line1;
+        
+        
+        if (data.address_line2 !== undefined) updatePayload.address_line2 = data.address_line2;
+        
+        
+        if (data.city !== undefined) updatePayload.city = data.city;
+        
+        
+        if (data.state !== undefined) updatePayload.state = data.state;
+        
+        
+        if (data.postal_code !== undefined) updatePayload.postal_code = data.postal_code;
+        
+        
+        if (data.country !== undefined) updatePayload.country = data.country;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await companies.update(updatePayload, {transaction});
+
+        
+        
+        if (data.organizations !== undefined) {
+            await companies.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.companies.getTableName(),
+                belongsToColumn: 'logo',
+                belongsToId: companies.id,
+            },
+            data.logo,
+            options,
+        );
+        
+
+        return companies;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const companies = await db.companies.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of companies) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of companies) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return companies;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const companies = await db.companies.findByPk(id, options);
+
+        await companies.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await companies.destroy({
+            transaction
+        });
+
+        return companies;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const companies = await db.companies.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!companies) {
+            return companies;
+        }
+
+        const output = companies.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        output.user_role_assignments_company = await companies.getUser_role_assignments_company({
+            transaction
+        });
+        
+        
+        
+        output.vendors_company = await companies.getVendors_company({
+            transaction
+        });
+        
+        
+        output.warehouses_company = await companies.getWarehouses_company({
+            transaction
+        });
+        
+        
+        output.product_categories_company = await companies.getProduct_categories_company({
+            transaction
+        });
+        
+        
+        output.products_company = await companies.getProducts_company({
+            transaction
+        });
+        
+        
+        output.purchase_requisitions_company = await companies.getPurchase_requisitions_company({
+            transaction
+        });
+        
+        
+        
+        output.purchase_orders_company = await companies.getPurchase_orders_company({
+            transaction
+        });
+        
+        
+        
+        output.goods_receipts_company = await companies.getGoods_receipts_company({
+            transaction
+        });
+        
+        
+        
+        output.vendor_invoices_company = await companies.getVendor_invoices_company({
+            transaction
+        });
+        
+        
+        
+        output.payments_company = await companies.getPayments_company({
+            transaction
+        });
+        
+        
+        output.departments_company = await companies.getDepartments_company({
+            transaction
+        });
+        
+        
+        
+        output.documents_company = await companies.getDocuments_company({
+            transaction
+        });
+        
+        
+        
+        output.approval_workflows_company = await companies.getApproval_workflows_company({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.ui_announcements_company = await companies.getUi_announcements_company({
+            transaction
+        });
+        
+        
+        
+        output.logo = await companies.getLogo({
+            transaction
+        });
+        
+        
+        output.organizations = await companies.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'logo',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.company_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'company_name',
+                        filter.company_name,
+                    ),
+                };
+            }
+            
+            if (filter.legal_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'legal_name',
+                        filter.legal_name,
+                    ),
+                };
+            }
+            
+            if (filter.tax_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'tax_number',
+                        filter.tax_number,
+                    ),
+                };
+            }
+            
+            if (filter.website) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'website',
+                        filter.website,
+                    ),
+                };
+            }
+            
+            if (filter.phone) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'phone',
+                        filter.phone,
+                    ),
+                };
+            }
+            
+            if (filter.email) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'email',
+                        filter.email,
+                    ),
+                };
+            }
+            
+            if (filter.address_line1) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'address_line1',
+                        filter.address_line1,
+                    ),
+                };
+            }
+            
+            if (filter.address_line2) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'address_line2',
+                        filter.address_line2,
+                    ),
+                };
+            }
+            
+            if (filter.city) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'city',
+                        filter.city,
+                    ),
+                };
+            }
+            
+            if (filter.state) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'state',
+                        filter.state,
+                    ),
+                };
+            }
+            
+            if (filter.postal_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'postal_code',
+                        filter.postal_code,
+                    ),
+                };
+            }
+            
+            if (filter.country) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'companies',
+                        'country',
+                        filter.country,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.companies.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'companies',
+                        'company_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.companies.findAll({
+            attributes: [ 'id', 'company_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['company_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.company_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/departments.js b/backend/src/db/api/departments.js
new file mode 100644
index 0000000..9811d26
--- /dev/null
+++ b/backend/src/db/api/departments.js
@@ -0,0 +1,533 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class DepartmentsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const departments = await db.departments.create(
+            {
+                id: data.id || undefined,
+        
+        department_name: data.department_name
+        ||
+        null
+            ,
+            
+        department_code: data.department_code
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await departments.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await departments.setManager( data.manager || null, {
+            transaction,
+        });
+        
+        await departments.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return departments;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const departmentsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                department_name: item.department_name
+            ||
+            null
+            ,
+            
+                department_code: item.department_code
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const departments = await db.departments.bulkCreate(departmentsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return departments;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const departments = await db.departments.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.department_name !== undefined) updatePayload.department_name = data.department_name;
+        
+        
+        if (data.department_code !== undefined) updatePayload.department_code = data.department_code;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await departments.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await departments.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.manager !== undefined) {
+            await departments.setManager(
+              
+              data.manager,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await departments.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return departments;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const departments = await db.departments.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of departments) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of departments) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return departments;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const departments = await db.departments.findByPk(id, options);
+
+        await departments.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await departments.destroy({
+            transaction
+        });
+
+        return departments;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const departments = await db.departments.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!departments) {
+            return departments;
+        }
+
+        const output = departments.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisitions_department = await departments.getPurchase_requisitions_department({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await departments.getCompany({
+            transaction
+        });
+        
+        
+        output.manager = await departments.getManager({
+            transaction
+        });
+        
+        
+        output.organizations = await departments.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'manager',
+        
+        where: filter.manager ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.manager.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.manager.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.department_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'departments',
+                        'department_name',
+                        filter.department_name,
+                    ),
+                };
+            }
+            
+            if (filter.department_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'departments',
+                        'department_code',
+                        filter.department_code,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.departments.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'departments',
+                        'department_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.departments.findAll({
+            attributes: [ 'id', 'department_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['department_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.department_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/document_links.js b/backend/src/db/api/document_links.js
new file mode 100644
index 0000000..aaca19a
--- /dev/null
+++ b/backend/src/db/api/document_links.js
@@ -0,0 +1,490 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Document_linksDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_links = await db.document_links.create(
+            {
+                id: data.id || undefined,
+        
+        source_type: data.source_type
+        ||
+        null
+            ,
+            
+        source_reference: data.source_reference
+        ||
+        null
+            ,
+            
+        notes: data.notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await document_links.setDocument( data.document || null, {
+            transaction,
+        });
+        
+        await document_links.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return document_links;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const document_linksData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                source_type: item.source_type
+            ||
+            null
+            ,
+            
+                source_reference: item.source_reference
+            ||
+            null
+            ,
+            
+                notes: item.notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const document_links = await db.document_links.bulkCreate(document_linksData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return document_links;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const document_links = await db.document_links.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.source_type !== undefined) updatePayload.source_type = data.source_type;
+        
+        
+        if (data.source_reference !== undefined) updatePayload.source_reference = data.source_reference;
+        
+        
+        if (data.notes !== undefined) updatePayload.notes = data.notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await document_links.update(updatePayload, {transaction});
+
+        
+        
+        if (data.document !== undefined) {
+            await document_links.setDocument(
+              
+              data.document,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await document_links.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return document_links;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_links = await db.document_links.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of document_links) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of document_links) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return document_links;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_links = await db.document_links.findByPk(id, options);
+
+        await document_links.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await document_links.destroy({
+            transaction
+        });
+
+        return document_links;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_links = await db.document_links.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!document_links) {
+            return document_links;
+        }
+
+        const output = document_links.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.document = await document_links.getDocument({
+            transaction
+        });
+        
+        
+        output.organizations = await document_links.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.documents,
+        as: 'document',
+        
+        where: filter.document ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.document.split('|').map(term => Utils.uuid(term)) } },
+            {
+              document_number: {
+                [Op.or]: filter.document.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.source_reference) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'document_links',
+                        'source_reference',
+                        filter.source_reference,
+                    ),
+                };
+            }
+            
+            if (filter.notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'document_links',
+                        'notes',
+                        filter.notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.source_type) {
+                where = {
+                    ...where,
+                source_type: filter.source_type,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.document_links.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'document_links',
+                        'source_reference',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.document_links.findAll({
+            attributes: [ 'id', 'source_reference' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['source_reference', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.source_reference,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/document_types.js b/backend/src/db/api/document_types.js
new file mode 100644
index 0000000..b9829b1
--- /dev/null
+++ b/backend/src/db/api/document_types.js
@@ -0,0 +1,503 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Document_typesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_types = await db.document_types.create(
+            {
+                id: data.id || undefined,
+        
+        type_name: data.type_name
+        ||
+        null
+            ,
+            
+        type_code: data.type_code
+        ||
+        null
+            ,
+            
+        module: data.module
+        ||
+        null
+            ,
+            
+        description: data.description
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await document_types.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return document_types;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const document_typesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                type_name: item.type_name
+            ||
+            null
+            ,
+            
+                type_code: item.type_code
+            ||
+            null
+            ,
+            
+                module: item.module
+            ||
+            null
+            ,
+            
+                description: item.description
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const document_types = await db.document_types.bulkCreate(document_typesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return document_types;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const document_types = await db.document_types.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.type_name !== undefined) updatePayload.type_name = data.type_name;
+        
+        
+        if (data.type_code !== undefined) updatePayload.type_code = data.type_code;
+        
+        
+        if (data.module !== undefined) updatePayload.module = data.module;
+        
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await document_types.update(updatePayload, {transaction});
+
+        
+        
+        if (data.organizations !== undefined) {
+            await document_types.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return document_types;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_types = await db.document_types.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of document_types) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of document_types) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return document_types;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_types = await db.document_types.findByPk(id, options);
+
+        await document_types.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await document_types.destroy({
+            transaction
+        });
+
+        return document_types;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const document_types = await db.document_types.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!document_types) {
+            return document_types;
+        }
+
+        const output = document_types.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.documents_document_type = await document_types.getDocuments_document_type({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.organizations = await document_types.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.type_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'document_types',
+                        'type_name',
+                        filter.type_name,
+                    ),
+                };
+            }
+            
+            if (filter.type_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'document_types',
+                        'type_code',
+                        filter.type_code,
+                    ),
+                };
+            }
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'document_types',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.module) {
+                where = {
+                    ...where,
+                module: filter.module,
+            };
+            }
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.document_types.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'document_types',
+                        'type_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.document_types.findAll({
+            attributes: [ 'id', 'type_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['type_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.type_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/documents.js b/backend/src/db/api/documents.js
new file mode 100644
index 0000000..03bb0fb
--- /dev/null
+++ b/backend/src/db/api/documents.js
@@ -0,0 +1,752 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class DocumentsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const documents = await db.documents.create(
+            {
+                id: data.id || undefined,
+        
+        document_number: data.document_number
+        ||
+        null
+            ,
+            
+        title: data.title
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        priority: data.priority
+        ||
+        null
+            ,
+            
+        document_date: data.document_date
+        ||
+        null
+            ,
+            
+        review_due_date: data.review_due_date
+        ||
+        null
+            ,
+            
+        summary: data.summary
+        ||
+        null
+            ,
+            
+        tags: data.tags
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await documents.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await documents.setDocument_type( data.document_type || null, {
+            transaction,
+        });
+        
+        await documents.setOwner( data.owner || null, {
+            transaction,
+        });
+        
+        await documents.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.documents.getTableName(),
+                belongsToColumn: 'files',
+                belongsToId: documents.id,
+            },
+            data.files,
+            options,
+        );
+        
+
+        return documents;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const documentsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                document_number: item.document_number
+            ||
+            null
+            ,
+            
+                title: item.title
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                priority: item.priority
+            ||
+            null
+            ,
+            
+                document_date: item.document_date
+            ||
+            null
+            ,
+            
+                review_due_date: item.review_due_date
+            ||
+            null
+            ,
+            
+                summary: item.summary
+            ||
+            null
+            ,
+            
+                tags: item.tags
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const documents = await db.documents.bulkCreate(documentsData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < documents.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.documents.getTableName(),
+                    belongsToColumn: 'files',
+                    belongsToId: documents[i].id,
+                },
+                data[i].files,
+                options,
+            );
+        }
+        
+
+        return documents;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const documents = await db.documents.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.document_number !== undefined) updatePayload.document_number = data.document_number;
+        
+        
+        if (data.title !== undefined) updatePayload.title = data.title;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.priority !== undefined) updatePayload.priority = data.priority;
+        
+        
+        if (data.document_date !== undefined) updatePayload.document_date = data.document_date;
+        
+        
+        if (data.review_due_date !== undefined) updatePayload.review_due_date = data.review_due_date;
+        
+        
+        if (data.summary !== undefined) updatePayload.summary = data.summary;
+        
+        
+        if (data.tags !== undefined) updatePayload.tags = data.tags;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await documents.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await documents.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.document_type !== undefined) {
+            await documents.setDocument_type(
+              
+              data.document_type,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.owner !== undefined) {
+            await documents.setOwner(
+              
+              data.owner,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await documents.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.documents.getTableName(),
+                belongsToColumn: 'files',
+                belongsToId: documents.id,
+            },
+            data.files,
+            options,
+        );
+        
+
+        return documents;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const documents = await db.documents.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of documents) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of documents) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return documents;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const documents = await db.documents.findByPk(id, options);
+
+        await documents.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await documents.destroy({
+            transaction
+        });
+
+        return documents;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const documents = await db.documents.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!documents) {
+            return documents;
+        }
+
+        const output = documents.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.document_links_document = await documents.getDocument_links_document({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await documents.getCompany({
+            transaction
+        });
+        
+        
+        output.document_type = await documents.getDocument_type({
+            transaction
+        });
+        
+        
+        output.owner = await documents.getOwner({
+            transaction
+        });
+        
+        
+        output.files = await documents.getFiles({
+            transaction
+        });
+        
+        
+        output.organizations = await documents.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.document_types,
+        as: 'document_type',
+        
+        where: filter.document_type ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.document_type.split('|').map(term => Utils.uuid(term)) } },
+            {
+              type_name: {
+                [Op.or]: filter.document_type.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'owner',
+        
+        where: filter.owner ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.owner.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.owner.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'files',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.document_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'documents',
+                        'document_number',
+                        filter.document_number,
+                    ),
+                };
+            }
+            
+            if (filter.title) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'documents',
+                        'title',
+                        filter.title,
+                    ),
+                };
+            }
+            
+            if (filter.summary) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'documents',
+                        'summary',
+                        filter.summary,
+                    ),
+                };
+            }
+            
+            if (filter.tags) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'documents',
+                        'tags',
+                        filter.tags,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.document_dateRange) {
+                const [start, end] = filter.document_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    document_date: {
+                    ...where.document_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    document_date: {
+                    ...where.document_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.review_due_dateRange) {
+                const [start, end] = filter.review_due_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    review_due_date: {
+                    ...where.review_due_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    review_due_date: {
+                    ...where.review_due_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+            if (filter.priority) {
+                where = {
+                    ...where,
+                priority: filter.priority,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.documents.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'documents',
+                        'document_number',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.documents.findAll({
+            attributes: [ 'id', 'document_number' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['document_number', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.document_number,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/file.js b/backend/src/db/api/file.js
new file mode 100644
index 0000000..f4f7121
--- /dev/null
+++ b/backend/src/db/api/file.js
@@ -0,0 +1,87 @@
+const db = require('../models');
+const assert = require('assert');
+const services = require('../../services/file');
+
+module.exports = class FileDBApi {
+  static async replaceRelationFiles(
+    relation,
+    rawFiles,
+    options,
+  ) {
+    assert(relation.belongsTo, 'belongsTo is required');
+    assert(
+      relation.belongsToColumn,
+      'belongsToColumn is required',
+    );
+    assert(relation.belongsToId, 'belongsToId is required');
+
+    let files = [];
+
+    if (Array.isArray(rawFiles)) {
+      files = rawFiles;
+    } else {
+      files = rawFiles ? [rawFiles] : [];
+    }
+
+    await this._removeLegacyFiles(relation, files, options);
+    await this._addFiles(relation, files, options);
+  }
+
+  static async _addFiles(relation, files, options) {
+    const transaction = (options && options.transaction) || undefined;
+    const currentUser = (options && options.currentUser) || {id: null};
+
+    const inexistentFiles = files.filter(
+      (file) => !!file.new,
+    );
+
+    for (const file of inexistentFiles) {
+      await db.file.create(
+        {
+          belongsTo: relation.belongsTo,
+          belongsToColumn: relation.belongsToColumn,
+          belongsToId: relation.belongsToId,
+          name: file.name,
+          sizeInBytes: file.sizeInBytes,
+          privateUrl: file.privateUrl,
+          publicUrl: file.publicUrl,
+          createdById: currentUser.id,
+          updatedById: currentUser.id,
+        },
+        {
+          transaction,
+        },
+      );
+    }
+  }
+
+  static async _removeLegacyFiles(
+    relation,
+    files,
+    options,
+  ) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const filesToDelete = await db.file.findAll({
+      where: {
+        belongsTo: relation.belongsTo,
+        belongsToId: relation.belongsToId,
+        belongsToColumn: relation.belongsToColumn,
+        id: {
+          [db.Sequelize.Op
+            .notIn]: files
+            .filter((file) => !file.new)
+            .map((file) => file.id)
+        },
+      },
+      transaction,
+    });
+
+    for (let file of filesToDelete) {
+      await services.deleteGCloud(file.privateUrl);
+      await file.destroy({
+        transaction,
+      });
+    }
+  }
+};
diff --git a/backend/src/db/api/goods_receipt_lines.js b/backend/src/db/api/goods_receipt_lines.js
new file mode 100644
index 0000000..29456e7
--- /dev/null
+++ b/backend/src/db/api/goods_receipt_lines.js
@@ -0,0 +1,631 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Goods_receipt_linesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipt_lines = await db.goods_receipt_lines.create(
+            {
+                id: data.id || undefined,
+        
+        quantity_received: data.quantity_received
+        ||
+        null
+            ,
+            
+        quantity_accepted: data.quantity_accepted
+        ||
+        null
+            ,
+            
+        quantity_rejected: data.quantity_rejected
+        ||
+        null
+            ,
+            
+        quality_notes: data.quality_notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await goods_receipt_lines.setGoods_receipt( data.goods_receipt || null, {
+            transaction,
+        });
+        
+        await goods_receipt_lines.setPurchase_order_line( data.purchase_order_line || null, {
+            transaction,
+        });
+        
+        await goods_receipt_lines.setProduct( data.product || null, {
+            transaction,
+        });
+        
+        await goods_receipt_lines.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return goods_receipt_lines;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const goods_receipt_linesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                quantity_received: item.quantity_received
+            ||
+            null
+            ,
+            
+                quantity_accepted: item.quantity_accepted
+            ||
+            null
+            ,
+            
+                quantity_rejected: item.quantity_rejected
+            ||
+            null
+            ,
+            
+                quality_notes: item.quality_notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const goods_receipt_lines = await db.goods_receipt_lines.bulkCreate(goods_receipt_linesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return goods_receipt_lines;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const goods_receipt_lines = await db.goods_receipt_lines.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.quantity_received !== undefined) updatePayload.quantity_received = data.quantity_received;
+        
+        
+        if (data.quantity_accepted !== undefined) updatePayload.quantity_accepted = data.quantity_accepted;
+        
+        
+        if (data.quantity_rejected !== undefined) updatePayload.quantity_rejected = data.quantity_rejected;
+        
+        
+        if (data.quality_notes !== undefined) updatePayload.quality_notes = data.quality_notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await goods_receipt_lines.update(updatePayload, {transaction});
+
+        
+        
+        if (data.goods_receipt !== undefined) {
+            await goods_receipt_lines.setGoods_receipt(
+              
+              data.goods_receipt,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.purchase_order_line !== undefined) {
+            await goods_receipt_lines.setPurchase_order_line(
+              
+              data.purchase_order_line,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.product !== undefined) {
+            await goods_receipt_lines.setProduct(
+              
+              data.product,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await goods_receipt_lines.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return goods_receipt_lines;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipt_lines = await db.goods_receipt_lines.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of goods_receipt_lines) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of goods_receipt_lines) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return goods_receipt_lines;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipt_lines = await db.goods_receipt_lines.findByPk(id, options);
+
+        await goods_receipt_lines.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await goods_receipt_lines.destroy({
+            transaction
+        });
+
+        return goods_receipt_lines;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipt_lines = await db.goods_receipt_lines.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!goods_receipt_lines) {
+            return goods_receipt_lines;
+        }
+
+        const output = goods_receipt_lines.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.goods_receipt = await goods_receipt_lines.getGoods_receipt({
+            transaction
+        });
+        
+        
+        output.purchase_order_line = await goods_receipt_lines.getPurchase_order_line({
+            transaction
+        });
+        
+        
+        output.product = await goods_receipt_lines.getProduct({
+            transaction
+        });
+        
+        
+        output.organizations = await goods_receipt_lines.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.goods_receipts,
+        as: 'goods_receipt',
+        
+        where: filter.goods_receipt ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.goods_receipt.split('|').map(term => Utils.uuid(term)) } },
+            {
+              grn_number: {
+                [Op.or]: filter.goods_receipt.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.purchase_order_lines,
+        as: 'purchase_order_line',
+        
+        where: filter.purchase_order_line ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.purchase_order_line.split('|').map(term => Utils.uuid(term)) } },
+            {
+              description: {
+                [Op.or]: filter.purchase_order_line.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.products,
+        as: 'product',
+        
+        where: filter.product ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.product.split('|').map(term => Utils.uuid(term)) } },
+            {
+              product_name: {
+                [Op.or]: filter.product.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.quality_notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'goods_receipt_lines',
+                        'quality_notes',
+                        filter.quality_notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.quantity_receivedRange) {
+                const [start, end] = filter.quantity_receivedRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity_received: {
+                    ...where.quantity_received,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity_received: {
+                    ...where.quantity_received,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.quantity_acceptedRange) {
+                const [start, end] = filter.quantity_acceptedRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity_accepted: {
+                    ...where.quantity_accepted,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity_accepted: {
+                    ...where.quantity_accepted,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.quantity_rejectedRange) {
+                const [start, end] = filter.quantity_rejectedRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity_rejected: {
+                    ...where.quantity_rejected,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity_rejected: {
+                    ...where.quantity_rejected,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.goods_receipt_lines.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'goods_receipt_lines',
+                        'quality_notes',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.goods_receipt_lines.findAll({
+            attributes: [ 'id', 'quality_notes' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['quality_notes', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.quality_notes,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/goods_receipts.js b/backend/src/db/api/goods_receipts.js
new file mode 100644
index 0000000..c047915
--- /dev/null
+++ b/backend/src/db/api/goods_receipts.js
@@ -0,0 +1,743 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Goods_receiptsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipts = await db.goods_receipts.create(
+            {
+                id: data.id || undefined,
+        
+        grn_number: data.grn_number
+        ||
+        null
+            ,
+            
+        receipt_date: data.receipt_date
+        ||
+        null
+            ,
+            
+        posted_date: data.posted_date
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        remarks: data.remarks
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await goods_receipts.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await goods_receipts.setPurchase_order( data.purchase_order || null, {
+            transaction,
+        });
+        
+        await goods_receipts.setReceived_by( data.received_by || null, {
+            transaction,
+        });
+        
+        await goods_receipts.setWarehouse( data.warehouse || null, {
+            transaction,
+        });
+        
+        await goods_receipts.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.goods_receipts.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: goods_receipts.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return goods_receipts;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const goods_receiptsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                grn_number: item.grn_number
+            ||
+            null
+            ,
+            
+                receipt_date: item.receipt_date
+            ||
+            null
+            ,
+            
+                posted_date: item.posted_date
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                remarks: item.remarks
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const goods_receipts = await db.goods_receipts.bulkCreate(goods_receiptsData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < goods_receipts.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.goods_receipts.getTableName(),
+                    belongsToColumn: 'attachments',
+                    belongsToId: goods_receipts[i].id,
+                },
+                data[i].attachments,
+                options,
+            );
+        }
+        
+
+        return goods_receipts;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const goods_receipts = await db.goods_receipts.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.grn_number !== undefined) updatePayload.grn_number = data.grn_number;
+        
+        
+        if (data.receipt_date !== undefined) updatePayload.receipt_date = data.receipt_date;
+        
+        
+        if (data.posted_date !== undefined) updatePayload.posted_date = data.posted_date;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.remarks !== undefined) updatePayload.remarks = data.remarks;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await goods_receipts.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await goods_receipts.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.purchase_order !== undefined) {
+            await goods_receipts.setPurchase_order(
+              
+              data.purchase_order,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.received_by !== undefined) {
+            await goods_receipts.setReceived_by(
+              
+              data.received_by,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.warehouse !== undefined) {
+            await goods_receipts.setWarehouse(
+              
+              data.warehouse,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await goods_receipts.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.goods_receipts.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: goods_receipts.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return goods_receipts;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipts = await db.goods_receipts.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of goods_receipts) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of goods_receipts) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return goods_receipts;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipts = await db.goods_receipts.findByPk(id, options);
+
+        await goods_receipts.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await goods_receipts.destroy({
+            transaction
+        });
+
+        return goods_receipts;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const goods_receipts = await db.goods_receipts.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!goods_receipts) {
+            return goods_receipts;
+        }
+
+        const output = goods_receipts.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.goods_receipt_lines_goods_receipt = await goods_receipts.getGoods_receipt_lines_goods_receipt({
+            transaction
+        });
+        
+        
+        output.vendor_invoices_goods_receipt = await goods_receipts.getVendor_invoices_goods_receipt({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await goods_receipts.getCompany({
+            transaction
+        });
+        
+        
+        output.purchase_order = await goods_receipts.getPurchase_order({
+            transaction
+        });
+        
+        
+        output.received_by = await goods_receipts.getReceived_by({
+            transaction
+        });
+        
+        
+        output.warehouse = await goods_receipts.getWarehouse({
+            transaction
+        });
+        
+        
+        output.attachments = await goods_receipts.getAttachments({
+            transaction
+        });
+        
+        
+        output.organizations = await goods_receipts.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.purchase_orders,
+        as: 'purchase_order',
+        
+        where: filter.purchase_order ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.purchase_order.split('|').map(term => Utils.uuid(term)) } },
+            {
+              po_number: {
+                [Op.or]: filter.purchase_order.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'received_by',
+        
+        where: filter.received_by ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.received_by.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.received_by.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.warehouses,
+        as: 'warehouse',
+        
+        where: filter.warehouse ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.warehouse.split('|').map(term => Utils.uuid(term)) } },
+            {
+              warehouse_name: {
+                [Op.or]: filter.warehouse.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'attachments',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.grn_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'goods_receipts',
+                        'grn_number',
+                        filter.grn_number,
+                    ),
+                };
+            }
+            
+            if (filter.remarks) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'goods_receipts',
+                        'remarks',
+                        filter.remarks,
+                    ),
+                };
+            }
+            
+
+            
+            
+            if (filter.calendarStart && filter.calendarEnd) {
+                where = {
+                    ...where,
+                    [Op.or]: [
+                        {
+                            receipt_date: {
+                                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                            },
+                    },
+                {
+                    posted_date: {
+                        [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                    },
+                },
+                ],
+            };
+            }
+            
+
+            
+            if (filter.receipt_dateRange) {
+                const [start, end] = filter.receipt_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    receipt_date: {
+                    ...where.receipt_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    receipt_date: {
+                    ...where.receipt_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.posted_dateRange) {
+                const [start, end] = filter.posted_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    posted_date: {
+                    ...where.posted_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    posted_date: {
+                    ...where.posted_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.goods_receipts.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'goods_receipts',
+                        'grn_number',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.goods_receipts.findAll({
+            attributes: [ 'id', 'grn_number' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['grn_number', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.grn_number,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/invoice_lines.js b/backend/src/db/api/invoice_lines.js
new file mode 100644
index 0000000..ea1a158
--- /dev/null
+++ b/backend/src/db/api/invoice_lines.js
@@ -0,0 +1,631 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Invoice_linesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const invoice_lines = await db.invoice_lines.create(
+            {
+                id: data.id || undefined,
+        
+        description: data.description
+        ||
+        null
+            ,
+            
+        quantity: data.quantity
+        ||
+        null
+            ,
+            
+        unit_price: data.unit_price
+        ||
+        null
+            ,
+            
+        tax_rate: data.tax_rate
+        ||
+        null
+            ,
+            
+        line_total: data.line_total
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await invoice_lines.setVendor_invoice( data.vendor_invoice || null, {
+            transaction,
+        });
+        
+        await invoice_lines.setProduct( data.product || null, {
+            transaction,
+        });
+        
+        await invoice_lines.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return invoice_lines;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const invoice_linesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                description: item.description
+            ||
+            null
+            ,
+            
+                quantity: item.quantity
+            ||
+            null
+            ,
+            
+                unit_price: item.unit_price
+            ||
+            null
+            ,
+            
+                tax_rate: item.tax_rate
+            ||
+            null
+            ,
+            
+                line_total: item.line_total
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const invoice_lines = await db.invoice_lines.bulkCreate(invoice_linesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return invoice_lines;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const invoice_lines = await db.invoice_lines.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        if (data.quantity !== undefined) updatePayload.quantity = data.quantity;
+        
+        
+        if (data.unit_price !== undefined) updatePayload.unit_price = data.unit_price;
+        
+        
+        if (data.tax_rate !== undefined) updatePayload.tax_rate = data.tax_rate;
+        
+        
+        if (data.line_total !== undefined) updatePayload.line_total = data.line_total;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await invoice_lines.update(updatePayload, {transaction});
+
+        
+        
+        if (data.vendor_invoice !== undefined) {
+            await invoice_lines.setVendor_invoice(
+              
+              data.vendor_invoice,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.product !== undefined) {
+            await invoice_lines.setProduct(
+              
+              data.product,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await invoice_lines.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return invoice_lines;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const invoice_lines = await db.invoice_lines.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of invoice_lines) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of invoice_lines) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return invoice_lines;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const invoice_lines = await db.invoice_lines.findByPk(id, options);
+
+        await invoice_lines.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await invoice_lines.destroy({
+            transaction
+        });
+
+        return invoice_lines;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const invoice_lines = await db.invoice_lines.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!invoice_lines) {
+            return invoice_lines;
+        }
+
+        const output = invoice_lines.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.vendor_invoice = await invoice_lines.getVendor_invoice({
+            transaction
+        });
+        
+        
+        output.product = await invoice_lines.getProduct({
+            transaction
+        });
+        
+        
+        output.organizations = await invoice_lines.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.vendor_invoices,
+        as: 'vendor_invoice',
+        
+        where: filter.vendor_invoice ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.vendor_invoice.split('|').map(term => Utils.uuid(term)) } },
+            {
+              invoice_number: {
+                [Op.or]: filter.vendor_invoice.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.products,
+        as: 'product',
+        
+        where: filter.product ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.product.split('|').map(term => Utils.uuid(term)) } },
+            {
+              product_name: {
+                [Op.or]: filter.product.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'invoice_lines',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.quantityRange) {
+                const [start, end] = filter.quantityRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.unit_priceRange) {
+                const [start, end] = filter.unit_priceRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    unit_price: {
+                    ...where.unit_price,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    unit_price: {
+                    ...where.unit_price,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.tax_rateRange) {
+                const [start, end] = filter.tax_rateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    tax_rate: {
+                    ...where.tax_rate,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    tax_rate: {
+                    ...where.tax_rate,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.line_totalRange) {
+                const [start, end] = filter.line_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    line_total: {
+                    ...where.line_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    line_total: {
+                    ...where.line_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.invoice_lines.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'invoice_lines',
+                        'description',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.invoice_lines.findAll({
+            attributes: [ 'id', 'description' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['description', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.description,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/organizations.js b/backend/src/db/api/organizations.js
new file mode 100644
index 0000000..46c5a52
--- /dev/null
+++ b/backend/src/db/api/organizations.js
@@ -0,0 +1,476 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class OrganizationsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.create(
+            {
+                id: data.id || undefined,
+        
+        name: data.name
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+
+        
+
+        
+
+        return organizations;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const organizationsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                name: item.name
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const organizations = await db.organizations.bulkCreate(organizationsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return organizations;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const organizations = await db.organizations.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.name !== undefined) updatePayload.name = data.name;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await organizations.update(updatePayload, {transaction});
+
+        
+        
+
+        
+        
+
+        
+
+        return organizations;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of organizations) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of organizations) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return organizations;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findByPk(id, options);
+
+        await organizations.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await organizations.destroy({
+            transaction
+        });
+
+        return organizations;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!organizations) {
+            return organizations;
+        }
+
+        const output = organizations.get({plain: true});
+
+        
+        output.users_organizations = await organizations.getUsers_organizations({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.companies_organizations = await organizations.getCompanies_organizations({
+            transaction
+        });
+        
+        
+        output.user_role_assignments_organizations = await organizations.getUser_role_assignments_organizations({
+            transaction
+        });
+        
+        
+        output.role_permission_mappings_organizations = await organizations.getRole_permission_mappings_organizations({
+            transaction
+        });
+        
+        
+        output.vendors_organizations = await organizations.getVendors_organizations({
+            transaction
+        });
+        
+        
+        output.warehouses_organizations = await organizations.getWarehouses_organizations({
+            transaction
+        });
+        
+        
+        output.product_categories_organizations = await organizations.getProduct_categories_organizations({
+            transaction
+        });
+        
+        
+        output.products_organizations = await organizations.getProducts_organizations({
+            transaction
+        });
+        
+        
+        output.purchase_requisitions_organizations = await organizations.getPurchase_requisitions_organizations({
+            transaction
+        });
+        
+        
+        output.purchase_requisition_lines_organizations = await organizations.getPurchase_requisition_lines_organizations({
+            transaction
+        });
+        
+        
+        output.purchase_orders_organizations = await organizations.getPurchase_orders_organizations({
+            transaction
+        });
+        
+        
+        output.purchase_order_lines_organizations = await organizations.getPurchase_order_lines_organizations({
+            transaction
+        });
+        
+        
+        output.goods_receipts_organizations = await organizations.getGoods_receipts_organizations({
+            transaction
+        });
+        
+        
+        output.goods_receipt_lines_organizations = await organizations.getGoods_receipt_lines_organizations({
+            transaction
+        });
+        
+        
+        output.vendor_invoices_organizations = await organizations.getVendor_invoices_organizations({
+            transaction
+        });
+        
+        
+        output.invoice_lines_organizations = await organizations.getInvoice_lines_organizations({
+            transaction
+        });
+        
+        
+        output.payments_organizations = await organizations.getPayments_organizations({
+            transaction
+        });
+        
+        
+        output.departments_organizations = await organizations.getDepartments_organizations({
+            transaction
+        });
+        
+        
+        output.document_types_organizations = await organizations.getDocument_types_organizations({
+            transaction
+        });
+        
+        
+        output.documents_organizations = await organizations.getDocuments_organizations({
+            transaction
+        });
+        
+        
+        output.document_links_organizations = await organizations.getDocument_links_organizations({
+            transaction
+        });
+        
+        
+        output.approval_workflows_organizations = await organizations.getApproval_workflows_organizations({
+            transaction
+        });
+        
+        
+        output.approval_steps_organizations = await organizations.getApproval_steps_organizations({
+            transaction
+        });
+        
+        
+        output.approvals_organizations = await organizations.getApprovals_organizations({
+            transaction
+        });
+        
+        
+        output.activity_logs_organizations = await organizations.getActivity_logs_organizations({
+            transaction
+        });
+        
+        
+        output.ui_announcements_organizations = await organizations.getUi_announcements_organizations({
+            transaction
+        });
+        
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'organizations',
+                        'name',
+                        filter.name,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.organizations.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'organizations',
+                        'name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.organizations.findAll({
+            attributes: [ 'id', 'name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/payments.js b/backend/src/db/api/payments.js
new file mode 100644
index 0000000..02ce6e5
--- /dev/null
+++ b/backend/src/db/api/payments.js
@@ -0,0 +1,718 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class PaymentsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const payments = await db.payments.create(
+            {
+                id: data.id || undefined,
+        
+        payment_reference: data.payment_reference
+        ||
+        null
+            ,
+            
+        payment_date: data.payment_date
+        ||
+        null
+            ,
+            
+        amount: data.amount
+        ||
+        null
+            ,
+            
+        method: data.method
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        notes: data.notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await payments.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await payments.setVendor( data.vendor || null, {
+            transaction,
+        });
+        
+        await payments.setVendor_invoice( data.vendor_invoice || null, {
+            transaction,
+        });
+        
+        await payments.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.payments.getTableName(),
+                belongsToColumn: 'proof_files',
+                belongsToId: payments.id,
+            },
+            data.proof_files,
+            options,
+        );
+        
+
+        return payments;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const paymentsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                payment_reference: item.payment_reference
+            ||
+            null
+            ,
+            
+                payment_date: item.payment_date
+            ||
+            null
+            ,
+            
+                amount: item.amount
+            ||
+            null
+            ,
+            
+                method: item.method
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                notes: item.notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const payments = await db.payments.bulkCreate(paymentsData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < payments.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.payments.getTableName(),
+                    belongsToColumn: 'proof_files',
+                    belongsToId: payments[i].id,
+                },
+                data[i].proof_files,
+                options,
+            );
+        }
+        
+
+        return payments;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const payments = await db.payments.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.payment_reference !== undefined) updatePayload.payment_reference = data.payment_reference;
+        
+        
+        if (data.payment_date !== undefined) updatePayload.payment_date = data.payment_date;
+        
+        
+        if (data.amount !== undefined) updatePayload.amount = data.amount;
+        
+        
+        if (data.method !== undefined) updatePayload.method = data.method;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.notes !== undefined) updatePayload.notes = data.notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await payments.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await payments.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.vendor !== undefined) {
+            await payments.setVendor(
+              
+              data.vendor,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.vendor_invoice !== undefined) {
+            await payments.setVendor_invoice(
+              
+              data.vendor_invoice,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await payments.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.payments.getTableName(),
+                belongsToColumn: 'proof_files',
+                belongsToId: payments.id,
+            },
+            data.proof_files,
+            options,
+        );
+        
+
+        return payments;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const payments = await db.payments.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of payments) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of payments) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return payments;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const payments = await db.payments.findByPk(id, options);
+
+        await payments.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await payments.destroy({
+            transaction
+        });
+
+        return payments;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const payments = await db.payments.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!payments) {
+            return payments;
+        }
+
+        const output = payments.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await payments.getCompany({
+            transaction
+        });
+        
+        
+        output.vendor = await payments.getVendor({
+            transaction
+        });
+        
+        
+        output.vendor_invoice = await payments.getVendor_invoice({
+            transaction
+        });
+        
+        
+        output.proof_files = await payments.getProof_files({
+            transaction
+        });
+        
+        
+        output.organizations = await payments.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.vendors,
+        as: 'vendor',
+        
+        where: filter.vendor ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.vendor.split('|').map(term => Utils.uuid(term)) } },
+            {
+              vendor_name: {
+                [Op.or]: filter.vendor.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.vendor_invoices,
+        as: 'vendor_invoice',
+        
+        where: filter.vendor_invoice ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.vendor_invoice.split('|').map(term => Utils.uuid(term)) } },
+            {
+              invoice_number: {
+                [Op.or]: filter.vendor_invoice.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'proof_files',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.payment_reference) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'payments',
+                        'payment_reference',
+                        filter.payment_reference,
+                    ),
+                };
+            }
+            
+            if (filter.notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'payments',
+                        'notes',
+                        filter.notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+            if (filter.calendarStart && filter.calendarEnd) {
+                where = {
+                    ...where,
+                    [Op.or]: [
+                        {
+                            payment_date: {
+                                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                            },
+                    },
+                {
+                    payment_date: {
+                        [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                    },
+                },
+                ],
+            };
+            }
+            
+
+            
+            if (filter.payment_dateRange) {
+                const [start, end] = filter.payment_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    payment_date: {
+                    ...where.payment_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    payment_date: {
+                    ...where.payment_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.amountRange) {
+                const [start, end] = filter.amountRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    amount: {
+                    ...where.amount,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    amount: {
+                    ...where.amount,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.method) {
+                where = {
+                    ...where,
+                method: filter.method,
+            };
+            }
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.payments.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'payments',
+                        'payment_reference',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.payments.findAll({
+            attributes: [ 'id', 'payment_reference' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['payment_reference', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.payment_reference,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/permissions.js b/backend/src/db/api/permissions.js
new file mode 100644
index 0000000..eabf837
--- /dev/null
+++ b/backend/src/db/api/permissions.js
@@ -0,0 +1,362 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class PermissionsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const permissions = await db.permissions.create(
+            {
+                id: data.id || undefined,
+        
+        name: data.name
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+
+        
+
+        
+
+        return permissions;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const permissionsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                name: item.name
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const permissions = await db.permissions.bulkCreate(permissionsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return permissions;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const permissions = await db.permissions.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.name !== undefined) updatePayload.name = data.name;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await permissions.update(updatePayload, {transaction});
+
+        
+        
+
+        
+        
+
+        
+
+        return permissions;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const permissions = await db.permissions.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of permissions) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of permissions) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return permissions;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const permissions = await db.permissions.findByPk(id, options);
+
+        await permissions.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await permissions.destroy({
+            transaction
+        });
+
+        return permissions;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const permissions = await db.permissions.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!permissions) {
+            return permissions;
+        }
+
+        const output = permissions.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        output.role_permission_mappings_permission = await permissions.getRole_permission_mappings_permission({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'permissions',
+                        'name',
+                        filter.name,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.permissions.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset, ) {
+        let where = {};
+        
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'permissions',
+                        'name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.permissions.findAll({
+            attributes: [ 'id', 'name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/product_categories.js b/backend/src/db/api/product_categories.js
new file mode 100644
index 0000000..023a4d9
--- /dev/null
+++ b/backend/src/db/api/product_categories.js
@@ -0,0 +1,498 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Product_categoriesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const product_categories = await db.product_categories.create(
+            {
+                id: data.id || undefined,
+        
+        category_name: data.category_name
+        ||
+        null
+            ,
+            
+        category_code: data.category_code
+        ||
+        null
+            ,
+            
+        description: data.description
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await product_categories.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await product_categories.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return product_categories;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const product_categoriesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                category_name: item.category_name
+            ||
+            null
+            ,
+            
+                category_code: item.category_code
+            ||
+            null
+            ,
+            
+                description: item.description
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const product_categories = await db.product_categories.bulkCreate(product_categoriesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return product_categories;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const product_categories = await db.product_categories.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.category_name !== undefined) updatePayload.category_name = data.category_name;
+        
+        
+        if (data.category_code !== undefined) updatePayload.category_code = data.category_code;
+        
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await product_categories.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await product_categories.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await product_categories.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return product_categories;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const product_categories = await db.product_categories.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of product_categories) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of product_categories) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return product_categories;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const product_categories = await db.product_categories.findByPk(id, options);
+
+        await product_categories.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await product_categories.destroy({
+            transaction
+        });
+
+        return product_categories;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const product_categories = await db.product_categories.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!product_categories) {
+            return product_categories;
+        }
+
+        const output = product_categories.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.products_category = await product_categories.getProducts_category({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await product_categories.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await product_categories.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.category_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'product_categories',
+                        'category_name',
+                        filter.category_name,
+                    ),
+                };
+            }
+            
+            if (filter.category_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'product_categories',
+                        'category_code',
+                        filter.category_code,
+                    ),
+                };
+            }
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'product_categories',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.product_categories.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'product_categories',
+                        'category_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.product_categories.findAll({
+            attributes: [ 'id', 'category_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['category_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.category_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/products.js b/backend/src/db/api/products.js
new file mode 100644
index 0000000..870ea8a
--- /dev/null
+++ b/backend/src/db/api/products.js
@@ -0,0 +1,790 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class ProductsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const products = await db.products.create(
+            {
+                id: data.id || undefined,
+        
+        product_name: data.product_name
+        ||
+        null
+            ,
+            
+        sku: data.sku
+        ||
+        null
+            ,
+            
+        barcode: data.barcode
+        ||
+        null
+            ,
+            
+        product_type: data.product_type
+        ||
+        null
+            ,
+            
+        uom: data.uom
+        ||
+        null
+            ,
+            
+        standard_cost: data.standard_cost
+        ||
+        null
+            ,
+            
+        purchase_price: data.purchase_price
+        ||
+        null
+            ,
+            
+        sales_price: data.sales_price
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+        description: data.description
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await products.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await products.setCategory( data.category || null, {
+            transaction,
+        });
+        
+        await products.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.products.getTableName(),
+                belongsToColumn: 'images',
+                belongsToId: products.id,
+            },
+            data.images,
+            options,
+        );
+        
+
+        return products;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const productsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                product_name: item.product_name
+            ||
+            null
+            ,
+            
+                sku: item.sku
+            ||
+            null
+            ,
+            
+                barcode: item.barcode
+            ||
+            null
+            ,
+            
+                product_type: item.product_type
+            ||
+            null
+            ,
+            
+                uom: item.uom
+            ||
+            null
+            ,
+            
+                standard_cost: item.standard_cost
+            ||
+            null
+            ,
+            
+                purchase_price: item.purchase_price
+            ||
+            null
+            ,
+            
+                sales_price: item.sales_price
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+                description: item.description
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const products = await db.products.bulkCreate(productsData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < products.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.products.getTableName(),
+                    belongsToColumn: 'images',
+                    belongsToId: products[i].id,
+                },
+                data[i].images,
+                options,
+            );
+        }
+        
+
+        return products;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const products = await db.products.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.product_name !== undefined) updatePayload.product_name = data.product_name;
+        
+        
+        if (data.sku !== undefined) updatePayload.sku = data.sku;
+        
+        
+        if (data.barcode !== undefined) updatePayload.barcode = data.barcode;
+        
+        
+        if (data.product_type !== undefined) updatePayload.product_type = data.product_type;
+        
+        
+        if (data.uom !== undefined) updatePayload.uom = data.uom;
+        
+        
+        if (data.standard_cost !== undefined) updatePayload.standard_cost = data.standard_cost;
+        
+        
+        if (data.purchase_price !== undefined) updatePayload.purchase_price = data.purchase_price;
+        
+        
+        if (data.sales_price !== undefined) updatePayload.sales_price = data.sales_price;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await products.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await products.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.category !== undefined) {
+            await products.setCategory(
+              
+              data.category,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await products.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.products.getTableName(),
+                belongsToColumn: 'images',
+                belongsToId: products.id,
+            },
+            data.images,
+            options,
+        );
+        
+
+        return products;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const products = await db.products.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of products) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of products) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return products;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const products = await db.products.findByPk(id, options);
+
+        await products.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await products.destroy({
+            transaction
+        });
+
+        return products;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const products = await db.products.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!products) {
+            return products;
+        }
+
+        const output = products.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisition_lines_product = await products.getPurchase_requisition_lines_product({
+            transaction
+        });
+        
+        
+        
+        output.purchase_order_lines_product = await products.getPurchase_order_lines_product({
+            transaction
+        });
+        
+        
+        
+        output.goods_receipt_lines_product = await products.getGoods_receipt_lines_product({
+            transaction
+        });
+        
+        
+        
+        output.invoice_lines_product = await products.getInvoice_lines_product({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await products.getCompany({
+            transaction
+        });
+        
+        
+        output.category = await products.getCategory({
+            transaction
+        });
+        
+        
+        output.images = await products.getImages({
+            transaction
+        });
+        
+        
+        output.organizations = await products.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.product_categories,
+        as: 'category',
+        
+        where: filter.category ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.category.split('|').map(term => Utils.uuid(term)) } },
+            {
+              category_name: {
+                [Op.or]: filter.category.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'images',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.product_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'products',
+                        'product_name',
+                        filter.product_name,
+                    ),
+                };
+            }
+            
+            if (filter.sku) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'products',
+                        'sku',
+                        filter.sku,
+                    ),
+                };
+            }
+            
+            if (filter.barcode) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'products',
+                        'barcode',
+                        filter.barcode,
+                    ),
+                };
+            }
+            
+            if (filter.uom) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'products',
+                        'uom',
+                        filter.uom,
+                    ),
+                };
+            }
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'products',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.standard_costRange) {
+                const [start, end] = filter.standard_costRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    standard_cost: {
+                    ...where.standard_cost,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    standard_cost: {
+                    ...where.standard_cost,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.purchase_priceRange) {
+                const [start, end] = filter.purchase_priceRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    purchase_price: {
+                    ...where.purchase_price,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    purchase_price: {
+                    ...where.purchase_price,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.sales_priceRange) {
+                const [start, end] = filter.sales_priceRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    sales_price: {
+                    ...where.sales_price,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    sales_price: {
+                    ...where.sales_price,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.product_type) {
+                where = {
+                    ...where,
+                product_type: filter.product_type,
+            };
+            }
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.products.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'products',
+                        'product_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.products.findAll({
+            attributes: [ 'id', 'product_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['product_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.product_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/purchase_order_lines.js b/backend/src/db/api/purchase_order_lines.js
new file mode 100644
index 0000000..e251e48
--- /dev/null
+++ b/backend/src/db/api/purchase_order_lines.js
@@ -0,0 +1,709 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Purchase_order_linesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_order_lines = await db.purchase_order_lines.create(
+            {
+                id: data.id || undefined,
+        
+        description: data.description
+        ||
+        null
+            ,
+            
+        quantity: data.quantity
+        ||
+        null
+            ,
+            
+        unit_price: data.unit_price
+        ||
+        null
+            ,
+            
+        tax_rate: data.tax_rate
+        ||
+        null
+            ,
+            
+        discount_rate: data.discount_rate
+        ||
+        null
+            ,
+            
+        line_total: data.line_total
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await purchase_order_lines.setPurchase_order( data.purchase_order || null, {
+            transaction,
+        });
+        
+        await purchase_order_lines.setProduct( data.product || null, {
+            transaction,
+        });
+        
+        await purchase_order_lines.setWarehouse( data.warehouse || null, {
+            transaction,
+        });
+        
+        await purchase_order_lines.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return purchase_order_lines;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const purchase_order_linesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                description: item.description
+            ||
+            null
+            ,
+            
+                quantity: item.quantity
+            ||
+            null
+            ,
+            
+                unit_price: item.unit_price
+            ||
+            null
+            ,
+            
+                tax_rate: item.tax_rate
+            ||
+            null
+            ,
+            
+                discount_rate: item.discount_rate
+            ||
+            null
+            ,
+            
+                line_total: item.line_total
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const purchase_order_lines = await db.purchase_order_lines.bulkCreate(purchase_order_linesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return purchase_order_lines;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const purchase_order_lines = await db.purchase_order_lines.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        if (data.quantity !== undefined) updatePayload.quantity = data.quantity;
+        
+        
+        if (data.unit_price !== undefined) updatePayload.unit_price = data.unit_price;
+        
+        
+        if (data.tax_rate !== undefined) updatePayload.tax_rate = data.tax_rate;
+        
+        
+        if (data.discount_rate !== undefined) updatePayload.discount_rate = data.discount_rate;
+        
+        
+        if (data.line_total !== undefined) updatePayload.line_total = data.line_total;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await purchase_order_lines.update(updatePayload, {transaction});
+
+        
+        
+        if (data.purchase_order !== undefined) {
+            await purchase_order_lines.setPurchase_order(
+              
+              data.purchase_order,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.product !== undefined) {
+            await purchase_order_lines.setProduct(
+              
+              data.product,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.warehouse !== undefined) {
+            await purchase_order_lines.setWarehouse(
+              
+              data.warehouse,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await purchase_order_lines.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return purchase_order_lines;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_order_lines = await db.purchase_order_lines.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of purchase_order_lines) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of purchase_order_lines) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return purchase_order_lines;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_order_lines = await db.purchase_order_lines.findByPk(id, options);
+
+        await purchase_order_lines.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await purchase_order_lines.destroy({
+            transaction
+        });
+
+        return purchase_order_lines;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_order_lines = await db.purchase_order_lines.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!purchase_order_lines) {
+            return purchase_order_lines;
+        }
+
+        const output = purchase_order_lines.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.goods_receipt_lines_purchase_order_line = await purchase_order_lines.getGoods_receipt_lines_purchase_order_line({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_order = await purchase_order_lines.getPurchase_order({
+            transaction
+        });
+        
+        
+        output.product = await purchase_order_lines.getProduct({
+            transaction
+        });
+        
+        
+        output.warehouse = await purchase_order_lines.getWarehouse({
+            transaction
+        });
+        
+        
+        output.organizations = await purchase_order_lines.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.purchase_orders,
+        as: 'purchase_order',
+        
+        where: filter.purchase_order ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.purchase_order.split('|').map(term => Utils.uuid(term)) } },
+            {
+              po_number: {
+                [Op.or]: filter.purchase_order.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.products,
+        as: 'product',
+        
+        where: filter.product ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.product.split('|').map(term => Utils.uuid(term)) } },
+            {
+              product_name: {
+                [Op.or]: filter.product.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.warehouses,
+        as: 'warehouse',
+        
+        where: filter.warehouse ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.warehouse.split('|').map(term => Utils.uuid(term)) } },
+            {
+              warehouse_name: {
+                [Op.or]: filter.warehouse.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_order_lines',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.quantityRange) {
+                const [start, end] = filter.quantityRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.unit_priceRange) {
+                const [start, end] = filter.unit_priceRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    unit_price: {
+                    ...where.unit_price,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    unit_price: {
+                    ...where.unit_price,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.tax_rateRange) {
+                const [start, end] = filter.tax_rateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    tax_rate: {
+                    ...where.tax_rate,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    tax_rate: {
+                    ...where.tax_rate,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.discount_rateRange) {
+                const [start, end] = filter.discount_rateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    discount_rate: {
+                    ...where.discount_rate,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    discount_rate: {
+                    ...where.discount_rate,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.line_totalRange) {
+                const [start, end] = filter.line_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    line_total: {
+                    ...where.line_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    line_total: {
+                    ...where.line_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.purchase_order_lines.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'purchase_order_lines',
+                        'description',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.purchase_order_lines.findAll({
+            attributes: [ 'id', 'description' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['description', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.description,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/purchase_orders.js b/backend/src/db/api/purchase_orders.js
new file mode 100644
index 0000000..d3522c1
--- /dev/null
+++ b/backend/src/db/api/purchase_orders.js
@@ -0,0 +1,897 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Purchase_ordersDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_orders = await db.purchase_orders.create(
+            {
+                id: data.id || undefined,
+        
+        po_number: data.po_number
+        ||
+        null
+            ,
+            
+        order_date: data.order_date
+        ||
+        null
+            ,
+            
+        expected_delivery_date: data.expected_delivery_date
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        currency: data.currency
+        ||
+        null
+            ,
+            
+        subtotal: data.subtotal
+        ||
+        null
+            ,
+            
+        tax_total: data.tax_total
+        ||
+        null
+            ,
+            
+        discount_total: data.discount_total
+        ||
+        null
+            ,
+            
+        grand_total: data.grand_total
+        ||
+        null
+            ,
+            
+        notes: data.notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await purchase_orders.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await purchase_orders.setVendor( data.vendor || null, {
+            transaction,
+        });
+        
+        await purchase_orders.setBuyer( data.buyer || null, {
+            transaction,
+        });
+        
+        await purchase_orders.setSource_requisition( data.source_requisition || null, {
+            transaction,
+        });
+        
+        await purchase_orders.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.purchase_orders.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: purchase_orders.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return purchase_orders;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const purchase_ordersData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                po_number: item.po_number
+            ||
+            null
+            ,
+            
+                order_date: item.order_date
+            ||
+            null
+            ,
+            
+                expected_delivery_date: item.expected_delivery_date
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                currency: item.currency
+            ||
+            null
+            ,
+            
+                subtotal: item.subtotal
+            ||
+            null
+            ,
+            
+                tax_total: item.tax_total
+            ||
+            null
+            ,
+            
+                discount_total: item.discount_total
+            ||
+            null
+            ,
+            
+                grand_total: item.grand_total
+            ||
+            null
+            ,
+            
+                notes: item.notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const purchase_orders = await db.purchase_orders.bulkCreate(purchase_ordersData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < purchase_orders.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.purchase_orders.getTableName(),
+                    belongsToColumn: 'attachments',
+                    belongsToId: purchase_orders[i].id,
+                },
+                data[i].attachments,
+                options,
+            );
+        }
+        
+
+        return purchase_orders;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const purchase_orders = await db.purchase_orders.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.po_number !== undefined) updatePayload.po_number = data.po_number;
+        
+        
+        if (data.order_date !== undefined) updatePayload.order_date = data.order_date;
+        
+        
+        if (data.expected_delivery_date !== undefined) updatePayload.expected_delivery_date = data.expected_delivery_date;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.currency !== undefined) updatePayload.currency = data.currency;
+        
+        
+        if (data.subtotal !== undefined) updatePayload.subtotal = data.subtotal;
+        
+        
+        if (data.tax_total !== undefined) updatePayload.tax_total = data.tax_total;
+        
+        
+        if (data.discount_total !== undefined) updatePayload.discount_total = data.discount_total;
+        
+        
+        if (data.grand_total !== undefined) updatePayload.grand_total = data.grand_total;
+        
+        
+        if (data.notes !== undefined) updatePayload.notes = data.notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await purchase_orders.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await purchase_orders.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.vendor !== undefined) {
+            await purchase_orders.setVendor(
+              
+              data.vendor,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.buyer !== undefined) {
+            await purchase_orders.setBuyer(
+              
+              data.buyer,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.source_requisition !== undefined) {
+            await purchase_orders.setSource_requisition(
+              
+              data.source_requisition,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await purchase_orders.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.purchase_orders.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: purchase_orders.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return purchase_orders;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_orders = await db.purchase_orders.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of purchase_orders) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of purchase_orders) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return purchase_orders;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_orders = await db.purchase_orders.findByPk(id, options);
+
+        await purchase_orders.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await purchase_orders.destroy({
+            transaction
+        });
+
+        return purchase_orders;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_orders = await db.purchase_orders.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!purchase_orders) {
+            return purchase_orders;
+        }
+
+        const output = purchase_orders.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_order_lines_purchase_order = await purchase_orders.getPurchase_order_lines_purchase_order({
+            transaction
+        });
+        
+        
+        output.goods_receipts_purchase_order = await purchase_orders.getGoods_receipts_purchase_order({
+            transaction
+        });
+        
+        
+        
+        output.vendor_invoices_purchase_order = await purchase_orders.getVendor_invoices_purchase_order({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await purchase_orders.getCompany({
+            transaction
+        });
+        
+        
+        output.vendor = await purchase_orders.getVendor({
+            transaction
+        });
+        
+        
+        output.buyer = await purchase_orders.getBuyer({
+            transaction
+        });
+        
+        
+        output.source_requisition = await purchase_orders.getSource_requisition({
+            transaction
+        });
+        
+        
+        output.attachments = await purchase_orders.getAttachments({
+            transaction
+        });
+        
+        
+        output.organizations = await purchase_orders.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.vendors,
+        as: 'vendor',
+        
+        where: filter.vendor ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.vendor.split('|').map(term => Utils.uuid(term)) } },
+            {
+              vendor_name: {
+                [Op.or]: filter.vendor.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'buyer',
+        
+        where: filter.buyer ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.buyer.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.buyer.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.purchase_requisitions,
+        as: 'source_requisition',
+        
+        where: filter.source_requisition ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.source_requisition.split('|').map(term => Utils.uuid(term)) } },
+            {
+              requisition_number: {
+                [Op.or]: filter.source_requisition.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'attachments',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.po_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_orders',
+                        'po_number',
+                        filter.po_number,
+                    ),
+                };
+            }
+            
+            if (filter.notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_orders',
+                        'notes',
+                        filter.notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.order_dateRange) {
+                const [start, end] = filter.order_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    order_date: {
+                    ...where.order_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    order_date: {
+                    ...where.order_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.expected_delivery_dateRange) {
+                const [start, end] = filter.expected_delivery_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    expected_delivery_date: {
+                    ...where.expected_delivery_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    expected_delivery_date: {
+                    ...where.expected_delivery_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.subtotalRange) {
+                const [start, end] = filter.subtotalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    subtotal: {
+                    ...where.subtotal,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    subtotal: {
+                    ...where.subtotal,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.tax_totalRange) {
+                const [start, end] = filter.tax_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    tax_total: {
+                    ...where.tax_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    tax_total: {
+                    ...where.tax_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.discount_totalRange) {
+                const [start, end] = filter.discount_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    discount_total: {
+                    ...where.discount_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    discount_total: {
+                    ...where.discount_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.grand_totalRange) {
+                const [start, end] = filter.grand_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    grand_total: {
+                    ...where.grand_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    grand_total: {
+                    ...where.grand_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+            if (filter.currency) {
+                where = {
+                    ...where,
+                currency: filter.currency,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.purchase_orders.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'purchase_orders',
+                        'po_number',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.purchase_orders.findAll({
+            attributes: [ 'id', 'po_number' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['po_number', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.po_number,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/purchase_requisition_lines.js b/backend/src/db/api/purchase_requisition_lines.js
new file mode 100644
index 0000000..ba0ca31
--- /dev/null
+++ b/backend/src/db/api/purchase_requisition_lines.js
@@ -0,0 +1,631 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Purchase_requisition_linesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisition_lines = await db.purchase_requisition_lines.create(
+            {
+                id: data.id || undefined,
+        
+        description: data.description
+        ||
+        null
+            ,
+            
+        quantity: data.quantity
+        ||
+        null
+            ,
+            
+        unit_price_estimate: data.unit_price_estimate
+        ||
+        null
+            ,
+            
+        line_total_estimate: data.line_total_estimate
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await purchase_requisition_lines.setPurchase_requisition( data.purchase_requisition || null, {
+            transaction,
+        });
+        
+        await purchase_requisition_lines.setProduct( data.product || null, {
+            transaction,
+        });
+        
+        await purchase_requisition_lines.setWarehouse( data.warehouse || null, {
+            transaction,
+        });
+        
+        await purchase_requisition_lines.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return purchase_requisition_lines;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const purchase_requisition_linesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                description: item.description
+            ||
+            null
+            ,
+            
+                quantity: item.quantity
+            ||
+            null
+            ,
+            
+                unit_price_estimate: item.unit_price_estimate
+            ||
+            null
+            ,
+            
+                line_total_estimate: item.line_total_estimate
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const purchase_requisition_lines = await db.purchase_requisition_lines.bulkCreate(purchase_requisition_linesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return purchase_requisition_lines;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const purchase_requisition_lines = await db.purchase_requisition_lines.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.description !== undefined) updatePayload.description = data.description;
+        
+        
+        if (data.quantity !== undefined) updatePayload.quantity = data.quantity;
+        
+        
+        if (data.unit_price_estimate !== undefined) updatePayload.unit_price_estimate = data.unit_price_estimate;
+        
+        
+        if (data.line_total_estimate !== undefined) updatePayload.line_total_estimate = data.line_total_estimate;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await purchase_requisition_lines.update(updatePayload, {transaction});
+
+        
+        
+        if (data.purchase_requisition !== undefined) {
+            await purchase_requisition_lines.setPurchase_requisition(
+              
+              data.purchase_requisition,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.product !== undefined) {
+            await purchase_requisition_lines.setProduct(
+              
+              data.product,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.warehouse !== undefined) {
+            await purchase_requisition_lines.setWarehouse(
+              
+              data.warehouse,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await purchase_requisition_lines.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return purchase_requisition_lines;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisition_lines = await db.purchase_requisition_lines.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of purchase_requisition_lines) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of purchase_requisition_lines) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return purchase_requisition_lines;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisition_lines = await db.purchase_requisition_lines.findByPk(id, options);
+
+        await purchase_requisition_lines.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await purchase_requisition_lines.destroy({
+            transaction
+        });
+
+        return purchase_requisition_lines;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisition_lines = await db.purchase_requisition_lines.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!purchase_requisition_lines) {
+            return purchase_requisition_lines;
+        }
+
+        const output = purchase_requisition_lines.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisition = await purchase_requisition_lines.getPurchase_requisition({
+            transaction
+        });
+        
+        
+        output.product = await purchase_requisition_lines.getProduct({
+            transaction
+        });
+        
+        
+        output.warehouse = await purchase_requisition_lines.getWarehouse({
+            transaction
+        });
+        
+        
+        output.organizations = await purchase_requisition_lines.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.purchase_requisitions,
+        as: 'purchase_requisition',
+        
+        where: filter.purchase_requisition ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.purchase_requisition.split('|').map(term => Utils.uuid(term)) } },
+            {
+              requisition_number: {
+                [Op.or]: filter.purchase_requisition.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.products,
+        as: 'product',
+        
+        where: filter.product ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.product.split('|').map(term => Utils.uuid(term)) } },
+            {
+              product_name: {
+                [Op.or]: filter.product.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.warehouses,
+        as: 'warehouse',
+        
+        where: filter.warehouse ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.warehouse.split('|').map(term => Utils.uuid(term)) } },
+            {
+              warehouse_name: {
+                [Op.or]: filter.warehouse.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.description) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_requisition_lines',
+                        'description',
+                        filter.description,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.quantityRange) {
+                const [start, end] = filter.quantityRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    quantity: {
+                    ...where.quantity,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.unit_price_estimateRange) {
+                const [start, end] = filter.unit_price_estimateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    unit_price_estimate: {
+                    ...where.unit_price_estimate,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    unit_price_estimate: {
+                    ...where.unit_price_estimate,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.line_total_estimateRange) {
+                const [start, end] = filter.line_total_estimateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    line_total_estimate: {
+                    ...where.line_total_estimate,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    line_total_estimate: {
+                    ...where.line_total_estimate,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.purchase_requisition_lines.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'purchase_requisition_lines',
+                        'description',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.purchase_requisition_lines.findAll({
+            attributes: [ 'id', 'description' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['description', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.description,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/purchase_requisitions.js b/backend/src/db/api/purchase_requisitions.js
new file mode 100644
index 0000000..d74e90b
--- /dev/null
+++ b/backend/src/db/api/purchase_requisitions.js
@@ -0,0 +1,725 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Purchase_requisitionsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisitions = await db.purchase_requisitions.create(
+            {
+                id: data.id || undefined,
+        
+        requisition_number: data.requisition_number
+        ||
+        null
+            ,
+            
+        requested_date: data.requested_date
+        ||
+        null
+            ,
+            
+        needed_by: data.needed_by
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        reason: data.reason
+        ||
+        null
+            ,
+            
+        estimated_total: data.estimated_total
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await purchase_requisitions.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await purchase_requisitions.setRequested_by( data.requested_by || null, {
+            transaction,
+        });
+        
+        await purchase_requisitions.setDepartment( data.department || null, {
+            transaction,
+        });
+        
+        await purchase_requisitions.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.purchase_requisitions.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: purchase_requisitions.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return purchase_requisitions;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const purchase_requisitionsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                requisition_number: item.requisition_number
+            ||
+            null
+            ,
+            
+                requested_date: item.requested_date
+            ||
+            null
+            ,
+            
+                needed_by: item.needed_by
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                reason: item.reason
+            ||
+            null
+            ,
+            
+                estimated_total: item.estimated_total
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const purchase_requisitions = await db.purchase_requisitions.bulkCreate(purchase_requisitionsData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < purchase_requisitions.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.purchase_requisitions.getTableName(),
+                    belongsToColumn: 'attachments',
+                    belongsToId: purchase_requisitions[i].id,
+                },
+                data[i].attachments,
+                options,
+            );
+        }
+        
+
+        return purchase_requisitions;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const purchase_requisitions = await db.purchase_requisitions.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.requisition_number !== undefined) updatePayload.requisition_number = data.requisition_number;
+        
+        
+        if (data.requested_date !== undefined) updatePayload.requested_date = data.requested_date;
+        
+        
+        if (data.needed_by !== undefined) updatePayload.needed_by = data.needed_by;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.reason !== undefined) updatePayload.reason = data.reason;
+        
+        
+        if (data.estimated_total !== undefined) updatePayload.estimated_total = data.estimated_total;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await purchase_requisitions.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await purchase_requisitions.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.requested_by !== undefined) {
+            await purchase_requisitions.setRequested_by(
+              
+              data.requested_by,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.department !== undefined) {
+            await purchase_requisitions.setDepartment(
+              
+              data.department,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await purchase_requisitions.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.purchase_requisitions.getTableName(),
+                belongsToColumn: 'attachments',
+                belongsToId: purchase_requisitions.id,
+            },
+            data.attachments,
+            options,
+        );
+        
+
+        return purchase_requisitions;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisitions = await db.purchase_requisitions.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of purchase_requisitions) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of purchase_requisitions) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return purchase_requisitions;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisitions = await db.purchase_requisitions.findByPk(id, options);
+
+        await purchase_requisitions.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await purchase_requisitions.destroy({
+            transaction
+        });
+
+        return purchase_requisitions;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const purchase_requisitions = await db.purchase_requisitions.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!purchase_requisitions) {
+            return purchase_requisitions;
+        }
+
+        const output = purchase_requisitions.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisition_lines_purchase_requisition = await purchase_requisitions.getPurchase_requisition_lines_purchase_requisition({
+            transaction
+        });
+        
+        
+        output.purchase_orders_source_requisition = await purchase_requisitions.getPurchase_orders_source_requisition({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await purchase_requisitions.getCompany({
+            transaction
+        });
+        
+        
+        output.requested_by = await purchase_requisitions.getRequested_by({
+            transaction
+        });
+        
+        
+        output.department = await purchase_requisitions.getDepartment({
+            transaction
+        });
+        
+        
+        output.attachments = await purchase_requisitions.getAttachments({
+            transaction
+        });
+        
+        
+        output.organizations = await purchase_requisitions.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.users,
+        as: 'requested_by',
+        
+        where: filter.requested_by ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.requested_by.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.requested_by.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.departments,
+        as: 'department',
+        
+        where: filter.department ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.department.split('|').map(term => Utils.uuid(term)) } },
+            {
+              department_name: {
+                [Op.or]: filter.department.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'attachments',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.requisition_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_requisitions',
+                        'requisition_number',
+                        filter.requisition_number,
+                    ),
+                };
+            }
+            
+            if (filter.reason) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'purchase_requisitions',
+                        'reason',
+                        filter.reason,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.requested_dateRange) {
+                const [start, end] = filter.requested_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    requested_date: {
+                    ...where.requested_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    requested_date: {
+                    ...where.requested_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.needed_byRange) {
+                const [start, end] = filter.needed_byRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    needed_by: {
+                    ...where.needed_by,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    needed_by: {
+                    ...where.needed_by,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.estimated_totalRange) {
+                const [start, end] = filter.estimated_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    estimated_total: {
+                    ...where.estimated_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    estimated_total: {
+                    ...where.estimated_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.purchase_requisitions.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'purchase_requisitions',
+                        'requisition_number',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.purchase_requisitions.findAll({
+            attributes: [ 'id', 'requisition_number' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['requisition_number', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.requisition_number,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/role_permission_mappings.js b/backend/src/db/api/role_permission_mappings.js
new file mode 100644
index 0000000..83219cd
--- /dev/null
+++ b/backend/src/db/api/role_permission_mappings.js
@@ -0,0 +1,481 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Role_permission_mappingsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const role_permission_mappings = await db.role_permission_mappings.create(
+            {
+                id: data.id || undefined,
+        
+        is_allowed: data.is_allowed
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await role_permission_mappings.setRole( data.role || null, {
+            transaction,
+        });
+        
+        await role_permission_mappings.setPermission( data.permission || null, {
+            transaction,
+        });
+        
+        await role_permission_mappings.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return role_permission_mappings;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const role_permission_mappingsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                is_allowed: item.is_allowed
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const role_permission_mappings = await db.role_permission_mappings.bulkCreate(role_permission_mappingsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return role_permission_mappings;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const role_permission_mappings = await db.role_permission_mappings.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.is_allowed !== undefined) updatePayload.is_allowed = data.is_allowed;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await role_permission_mappings.update(updatePayload, {transaction});
+
+        
+        
+        if (data.role !== undefined) {
+            await role_permission_mappings.setRole(
+              
+              data.role,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.permission !== undefined) {
+            await role_permission_mappings.setPermission(
+              
+              data.permission,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await role_permission_mappings.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return role_permission_mappings;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const role_permission_mappings = await db.role_permission_mappings.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of role_permission_mappings) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of role_permission_mappings) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return role_permission_mappings;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const role_permission_mappings = await db.role_permission_mappings.findByPk(id, options);
+
+        await role_permission_mappings.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await role_permission_mappings.destroy({
+            transaction
+        });
+
+        return role_permission_mappings;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const role_permission_mappings = await db.role_permission_mappings.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!role_permission_mappings) {
+            return role_permission_mappings;
+        }
+
+        const output = role_permission_mappings.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.role = await role_permission_mappings.getRole({
+            transaction
+        });
+        
+        
+        output.permission = await role_permission_mappings.getPermission({
+            transaction
+        });
+        
+        
+        output.organizations = await role_permission_mappings.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.roles,
+        as: 'role',
+        
+        where: filter.role ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.role.split('|').map(term => Utils.uuid(term)) } },
+            {
+              name: {
+                [Op.or]: filter.role.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.permissions,
+        as: 'permission',
+        
+        where: filter.permission ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.permission.split('|').map(term => Utils.uuid(term)) } },
+            {
+              name: {
+                [Op.or]: filter.permission.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_allowed) {
+                where = {
+                    ...where,
+                is_allowed: filter.is_allowed,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.role_permission_mappings.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'role_permission_mappings',
+                        'is_allowed',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.role_permission_mappings.findAll({
+            attributes: [ 'id', 'is_allowed' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['is_allowed', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.is_allowed,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/roles.js b/backend/src/db/api/roles.js
new file mode 100644
index 0000000..5219097
--- /dev/null
+++ b/backend/src/db/api/roles.js
@@ -0,0 +1,472 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+const config = require('../../config');
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class RolesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const roles = await db.roles.create(
+            {
+                id: data.id || undefined,
+        
+        name: data.name
+        ||
+        null
+            ,
+            
+        role_customization: data.role_customization
+        ||
+        null
+            ,
+            
+        globalAccess: data.globalAccess
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+
+        
+        await roles.setPermissions(data.permissions || [], {
+            transaction,
+        });
+        
+
+        
+
+        return roles;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const rolesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                name: item.name
+            ||
+            null
+            ,
+            
+                role_customization: item.role_customization
+            ||
+            null
+            ,
+            
+                globalAccess: item.globalAccess
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const roles = await db.roles.bulkCreate(rolesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return roles;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const roles = await db.roles.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.name !== undefined) updatePayload.name = data.name;
+        
+        
+        if (data.role_customization !== undefined) updatePayload.role_customization = data.role_customization;
+        
+        
+        if (data.globalAccess !== undefined) updatePayload.globalAccess = data.globalAccess;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await roles.update(updatePayload, {transaction});
+
+        
+        
+
+        
+        
+        if (data.permissions !== undefined) {
+            await roles.setPermissions(data.permissions, { transaction });
+        }
+        
+
+        
+
+        return roles;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const roles = await db.roles.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of roles) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of roles) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return roles;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const roles = await db.roles.findByPk(id, options);
+
+        await roles.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await roles.destroy({
+            transaction
+        });
+
+        return roles;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const roles = await db.roles.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!roles) {
+            return roles;
+        }
+
+        const output = roles.get({plain: true});
+
+        
+        output.users_app_role = await roles.getUsers_app_role({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        output.user_role_assignments_role = await roles.getUser_role_assignments_role({
+            transaction
+        });
+        
+        
+        output.role_permission_mappings_role = await roles.getRole_permission_mappings_role({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.approval_steps_approver_role = await roles.getApproval_steps_approver_role({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        output.permissions = await roles.getPermissions({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+
+      {
+        model: db.permissions,
+        as: 'permissions',
+        required: false,
+      },
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'roles',
+                        'name',
+                        filter.name,
+                    ),
+                };
+            }
+            
+            if (filter.role_customization) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'roles',
+                        'role_customization',
+                        filter.role_customization,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.globalAccess) {
+                where = {
+                    ...where,
+                globalAccess: filter.globalAccess,
+            };
+            }
+            
+
+
+
+      if (filter.permissions) {
+        const searchTerms = filter.permissions.split('|');
+
+        include = [
+          {
+            model: db.permissions,
+            as: 'permissions_filter',
+            required: searchTerms.length > 0,
+            where: searchTerms.length > 0 ? {
+              [Op.or]: [
+                { id: { [Op.in]: searchTerms.map(term => Utils.uuid(term)) } },
+                { 
+                  name: {
+                    [Op.or]: searchTerms.map(term => ({ [Op.iLike]: `%${term}%` }))
+                  }
+                }
+              ]
+            } : undefined
+          },
+          ...include,
+        ]
+      }
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+        if (!globalAccess) {
+            where = { name: { [Op.ne]: config.roles.super_admin } };
+        }
+        
+
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.roles.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess,) {
+        let where = {};
+        
+        if (!globalAccess) {
+            where = { name: { [Op.ne]: config.roles.super_admin } };
+        }
+        
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'roles',
+                        'name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.roles.findAll({
+            attributes: [ 'id', 'name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/ui_announcements.js b/backend/src/db/api/ui_announcements.js
new file mode 100644
index 0000000..7d45c1a
--- /dev/null
+++ b/backend/src/db/api/ui_announcements.js
@@ -0,0 +1,604 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Ui_announcementsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const ui_announcements = await db.ui_announcements.create(
+            {
+                id: data.id || undefined,
+        
+        headline: data.headline
+        ||
+        null
+            ,
+            
+        content: data.content
+        ||
+        null
+            ,
+            
+        audience: data.audience
+        ||
+        null
+            ,
+            
+        publish_from: data.publish_from
+        ||
+        null
+            ,
+            
+        publish_to: data.publish_to
+        ||
+        null
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await ui_announcements.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await ui_announcements.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return ui_announcements;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const ui_announcementsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                headline: item.headline
+            ||
+            null
+            ,
+            
+                content: item.content
+            ||
+            null
+            ,
+            
+                audience: item.audience
+            ||
+            null
+            ,
+            
+                publish_from: item.publish_from
+            ||
+            null
+            ,
+            
+                publish_to: item.publish_to
+            ||
+            null
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const ui_announcements = await db.ui_announcements.bulkCreate(ui_announcementsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return ui_announcements;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const ui_announcements = await db.ui_announcements.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.headline !== undefined) updatePayload.headline = data.headline;
+        
+        
+        if (data.content !== undefined) updatePayload.content = data.content;
+        
+        
+        if (data.audience !== undefined) updatePayload.audience = data.audience;
+        
+        
+        if (data.publish_from !== undefined) updatePayload.publish_from = data.publish_from;
+        
+        
+        if (data.publish_to !== undefined) updatePayload.publish_to = data.publish_to;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await ui_announcements.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await ui_announcements.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await ui_announcements.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return ui_announcements;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const ui_announcements = await db.ui_announcements.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of ui_announcements) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of ui_announcements) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return ui_announcements;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const ui_announcements = await db.ui_announcements.findByPk(id, options);
+
+        await ui_announcements.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await ui_announcements.destroy({
+            transaction
+        });
+
+        return ui_announcements;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const ui_announcements = await db.ui_announcements.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!ui_announcements) {
+            return ui_announcements;
+        }
+
+        const output = ui_announcements.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await ui_announcements.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await ui_announcements.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.headline) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'ui_announcements',
+                        'headline',
+                        filter.headline,
+                    ),
+                };
+            }
+            
+            if (filter.content) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'ui_announcements',
+                        'content',
+                        filter.content,
+                    ),
+                };
+            }
+            
+
+            
+            
+            if (filter.calendarStart && filter.calendarEnd) {
+                where = {
+                    ...where,
+                    [Op.or]: [
+                        {
+                            publish_from: {
+                                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                            },
+                    },
+                {
+                    publish_to: {
+                        [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                    },
+                },
+                ],
+            };
+            }
+            
+
+            
+            if (filter.publish_fromRange) {
+                const [start, end] = filter.publish_fromRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    publish_from: {
+                    ...where.publish_from,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    publish_from: {
+                    ...where.publish_from,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.publish_toRange) {
+                const [start, end] = filter.publish_toRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    publish_to: {
+                    ...where.publish_to,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    publish_to: {
+                    ...where.publish_to,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.audience) {
+                where = {
+                    ...where,
+                audience: filter.audience,
+            };
+            }
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.ui_announcements.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'ui_announcements',
+                        'headline',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.ui_announcements.findAll({
+            attributes: [ 'id', 'headline' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['headline', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.headline,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/user_role_assignments.js b/backend/src/db/api/user_role_assignments.js
new file mode 100644
index 0000000..d572216
--- /dev/null
+++ b/backend/src/db/api/user_role_assignments.js
@@ -0,0 +1,610 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class User_role_assignmentsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const user_role_assignments = await db.user_role_assignments.create(
+            {
+                id: data.id || undefined,
+        
+        effective_from: data.effective_from
+        ||
+        null
+            ,
+            
+        effective_to: data.effective_to
+        ||
+        null
+            ,
+            
+        is_primary: data.is_primary
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await user_role_assignments.setUser( data.user || null, {
+            transaction,
+        });
+        
+        await user_role_assignments.setRole( data.role || null, {
+            transaction,
+        });
+        
+        await user_role_assignments.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await user_role_assignments.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return user_role_assignments;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const user_role_assignmentsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                effective_from: item.effective_from
+            ||
+            null
+            ,
+            
+                effective_to: item.effective_to
+            ||
+            null
+            ,
+            
+                is_primary: item.is_primary
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const user_role_assignments = await db.user_role_assignments.bulkCreate(user_role_assignmentsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return user_role_assignments;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const user_role_assignments = await db.user_role_assignments.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.effective_from !== undefined) updatePayload.effective_from = data.effective_from;
+        
+        
+        if (data.effective_to !== undefined) updatePayload.effective_to = data.effective_to;
+        
+        
+        if (data.is_primary !== undefined) updatePayload.is_primary = data.is_primary;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await user_role_assignments.update(updatePayload, {transaction});
+
+        
+        
+        if (data.user !== undefined) {
+            await user_role_assignments.setUser(
+              
+              data.user,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.role !== undefined) {
+            await user_role_assignments.setRole(
+              
+              data.role,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.company !== undefined) {
+            await user_role_assignments.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await user_role_assignments.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return user_role_assignments;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const user_role_assignments = await db.user_role_assignments.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of user_role_assignments) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of user_role_assignments) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return user_role_assignments;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const user_role_assignments = await db.user_role_assignments.findByPk(id, options);
+
+        await user_role_assignments.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await user_role_assignments.destroy({
+            transaction
+        });
+
+        return user_role_assignments;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const user_role_assignments = await db.user_role_assignments.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!user_role_assignments) {
+            return user_role_assignments;
+        }
+
+        const output = user_role_assignments.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.user = await user_role_assignments.getUser({
+            transaction
+        });
+        
+        
+        output.role = await user_role_assignments.getRole({
+            transaction
+        });
+        
+        
+        output.company = await user_role_assignments.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await user_role_assignments.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.users,
+        as: 'user',
+        
+        where: filter.user ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.user.split('|').map(term => Utils.uuid(term)) } },
+            {
+              firstName: {
+                [Op.or]: filter.user.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.roles,
+        as: 'role',
+        
+        where: filter.role ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.role.split('|').map(term => Utils.uuid(term)) } },
+            {
+              name: {
+                [Op.or]: filter.role.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+
+            
+            
+            if (filter.calendarStart && filter.calendarEnd) {
+                where = {
+                    ...where,
+                    [Op.or]: [
+                        {
+                            effective_from: {
+                                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                            },
+                    },
+                {
+                    effective_to: {
+                        [Op.between]: [filter.calendarStart, filter.calendarEnd],
+                    },
+                },
+                ],
+            };
+            }
+            
+
+            
+            if (filter.effective_fromRange) {
+                const [start, end] = filter.effective_fromRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    effective_from: {
+                    ...where.effective_from,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    effective_from: {
+                    ...where.effective_from,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.effective_toRange) {
+                const [start, end] = filter.effective_toRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    effective_to: {
+                    ...where.effective_to,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    effective_to: {
+                    ...where.effective_to,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_primary) {
+                where = {
+                    ...where,
+                is_primary: filter.is_primary,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.user_role_assignments.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'user_role_assignments',
+                        'is_primary',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.user_role_assignments.findAll({
+            attributes: [ 'id', 'is_primary' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['is_primary', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.is_primary,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/users.js b/backend/src/db/api/users.js
new file mode 100644
index 0000000..d485085
--- /dev/null
+++ b/backend/src/db/api/users.js
@@ -0,0 +1,1048 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const bcrypt = require('bcrypt');
+const config = require('../../config');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class UsersDBApi {
+    
+    static async create(data,globalAccess, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+
+        const users = await db.users.create(
+            {
+                id: data.data.id || undefined,
+        
+        firstName: data.data.firstName
+        ||
+        null
+            ,
+            
+        lastName: data.data.lastName
+        ||
+        null
+            ,
+            
+        phoneNumber: data.data.phoneNumber
+        ||
+        null
+            ,
+            
+        email: data.data.email
+        ||
+        null
+            ,
+            
+        disabled: data.data.disabled
+        ||
+        false
+        
+            ,
+            
+        password: data.data.password
+        ||
+        null
+            ,
+            
+        emailVerified: data.data.emailVerified
+        ||
+        true
+        
+            ,
+            
+        emailVerificationToken: data.data.emailVerificationToken
+        ||
+        null
+            ,
+            
+        emailVerificationTokenExpiresAt: data.data.emailVerificationTokenExpiresAt
+        ||
+        null
+            ,
+            
+        passwordResetToken: data.data.passwordResetToken
+        ||
+        null
+            ,
+            
+        passwordResetTokenExpiresAt: data.data.passwordResetTokenExpiresAt
+        ||
+        null
+            ,
+            
+        provider: data.data.provider
+        ||
+        null
+            ,
+            
+            importHash: data.data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        
+        if (!data.data.app_role) {
+            const role = await db.roles.findOne({
+                where: { name: 'User' },
+            });
+            if (role) {
+                await users.setApp_role(role, {
+                    transaction,
+                });
+            }
+        }else{
+            await users.setApp_role(data.data.app_role || null, {
+                transaction,
+            });
+        }
+        
+        
+        
+
+        await users.setOrganizations( data.data.organizations  || null, {
+            transaction,
+        });
+        
+        
+
+        
+        await users.setCustom_permissions(data.data.custom_permissions || [], {
+            transaction,
+        });
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.users.getTableName(),
+                belongsToColumn: 'avatar',
+                belongsToId: users.id,
+            },
+            data.data.avatar,
+            options,
+        );
+        
+
+        return users;
+    }
+    
+
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const usersData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                firstName: item.firstName
+            ||
+            null
+            ,
+            
+                lastName: item.lastName
+            ||
+            null
+            ,
+            
+                phoneNumber: item.phoneNumber
+            ||
+            null
+            ,
+            
+                email: item.email
+            ||
+            null
+            ,
+            
+                disabled: item.disabled
+            ||
+            false
+        
+            ,
+            
+                password: item.password
+            ||
+            null
+            ,
+            
+                emailVerified: item.emailVerified
+            ||
+            false
+        
+            ,
+            
+                emailVerificationToken: item.emailVerificationToken
+            ||
+            null
+            ,
+            
+                emailVerificationTokenExpiresAt: item.emailVerificationTokenExpiresAt
+            ||
+            null
+            ,
+            
+                passwordResetToken: item.passwordResetToken
+            ||
+            null
+            ,
+            
+                passwordResetTokenExpiresAt: item.passwordResetTokenExpiresAt
+            ||
+            null
+            ,
+            
+                provider: item.provider
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const users = await db.users.bulkCreate(usersData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < users.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.users.getTableName(),
+                    belongsToColumn: 'avatar',
+                    belongsToId: users[i].id,
+                },
+                data[i].avatar,
+                options,
+            );
+        }
+        
+
+        return users;
+    }
+
+    static async update(id, data, globalAccess, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        
+
+        const users = await db.users.findByPk(id, {}, {transaction});
+
+
+        
+
+        if (!data?.app_role) {
+            data.app_role = users?.app_role?.id;
+        }
+        if (!data?.custom_permissions) {
+            data.custom_permissions = users?.custom_permissions?.map(item => item.id);
+        }
+
+        if (data.password) {
+            data.password = bcrypt.hashSync(
+                data.password,
+                config.bcrypt.saltRounds,
+            );
+        } else {
+            data.password = users.password;
+        }
+        
+
+        const updatePayload = {};
+        
+        if (data.firstName !== undefined) updatePayload.firstName = data.firstName;
+        
+        
+        if (data.lastName !== undefined) updatePayload.lastName = data.lastName;
+        
+        
+        if (data.phoneNumber !== undefined) updatePayload.phoneNumber = data.phoneNumber;
+        
+        
+        if (data.email !== undefined) updatePayload.email = data.email;
+        
+        
+        if (data.disabled !== undefined) updatePayload.disabled = data.disabled;
+        
+        
+        if (data.password !== undefined) updatePayload.password = data.password;
+        
+        
+        if (data.emailVerified !== undefined) updatePayload.emailVerified = data.emailVerified;
+        
+        else updatePayload.emailVerified = true;
+        
+        
+        if (data.emailVerificationToken !== undefined) updatePayload.emailVerificationToken = data.emailVerificationToken;
+        
+        
+        if (data.emailVerificationTokenExpiresAt !== undefined) updatePayload.emailVerificationTokenExpiresAt = data.emailVerificationTokenExpiresAt;
+        
+        
+        if (data.passwordResetToken !== undefined) updatePayload.passwordResetToken = data.passwordResetToken;
+        
+        
+        if (data.passwordResetTokenExpiresAt !== undefined) updatePayload.passwordResetTokenExpiresAt = data.passwordResetTokenExpiresAt;
+        
+        
+        if (data.provider !== undefined) updatePayload.provider = data.provider;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await users.update(updatePayload, {transaction});
+
+        
+        
+        if (data.app_role !== undefined) {
+            await users.setApp_role(
+              
+              data.app_role,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await users.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+        if (data.custom_permissions !== undefined) {
+            await users.setCustom_permissions(data.custom_permissions, { transaction });
+        }
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.users.getTableName(),
+                belongsToColumn: 'avatar',
+                belongsToId: users.id,
+            },
+            data.avatar,
+            options,
+        );
+        
+
+        return users;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const users = await db.users.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of users) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of users) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return users;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const users = await db.users.findByPk(id, options);
+
+        await users.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await users.destroy({
+            transaction
+        });
+
+        return users;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const users = await db.users.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!users) {
+            return users;
+        }
+
+        const output = users.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        output.user_role_assignments_user = await users.getUser_role_assignments_user({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisitions_requested_by = await users.getPurchase_requisitions_requested_by({
+            transaction
+        });
+        
+        
+        
+        output.purchase_orders_buyer = await users.getPurchase_orders_buyer({
+            transaction
+        });
+        
+        
+        
+        output.goods_receipts_received_by = await users.getGoods_receipts_received_by({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        output.departments_manager = await users.getDepartments_manager({
+            transaction
+        });
+        
+        
+        
+        output.documents_owner = await users.getDocuments_owner({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.approvals_requested_by = await users.getApprovals_requested_by({
+            transaction
+        });
+        
+        output.approvals_assigned_to = await users.getApprovals_assigned_to({
+            transaction
+        });
+        
+        
+        output.activity_logs_actor = await users.getActivity_logs_actor({
+            transaction
+        });
+        
+        
+        
+        
+        output.avatar = await users.getAvatar({
+            transaction
+        });
+        
+        
+        output.app_role = await users.getApp_role({
+            transaction
+        });
+        
+        if (output.app_role) {
+            output.app_role_permissions = await output.app_role.getPermissions({
+                transaction,
+            });
+        }
+        
+        
+        output.custom_permissions = await users.getCustom_permissions({
+            transaction
+        });
+        
+        
+        output.organizations = await users.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.roles,
+        as: 'app_role',
+        
+        where: filter.app_role ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.app_role.split('|').map(term => Utils.uuid(term)) } },
+            {
+              name: {
+                [Op.or]: filter.app_role.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+      {
+        model: db.permissions,
+        as: 'custom_permissions',
+        required: false,
+      },
+
+
+      {
+        model: db.file,
+        as: 'avatar',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.firstName) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'firstName',
+                        filter.firstName,
+                    ),
+                };
+            }
+            
+            if (filter.lastName) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'lastName',
+                        filter.lastName,
+                    ),
+                };
+            }
+            
+            if (filter.phoneNumber) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'phoneNumber',
+                        filter.phoneNumber,
+                    ),
+                };
+            }
+            
+            if (filter.email) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'email',
+                        filter.email,
+                    ),
+                };
+            }
+            
+            if (filter.password) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'password',
+                        filter.password,
+                    ),
+                };
+            }
+            
+            if (filter.emailVerificationToken) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'emailVerificationToken',
+                        filter.emailVerificationToken,
+                    ),
+                };
+            }
+            
+            if (filter.passwordResetToken) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'passwordResetToken',
+                        filter.passwordResetToken,
+                    ),
+                };
+            }
+            
+            if (filter.provider) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'users',
+                        'provider',
+                        filter.provider,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.emailVerificationTokenExpiresAtRange) {
+                const [start, end] = filter.emailVerificationTokenExpiresAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    emailVerificationTokenExpiresAt: {
+                    ...where.emailVerificationTokenExpiresAt,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    emailVerificationTokenExpiresAt: {
+                    ...where.emailVerificationTokenExpiresAt,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.passwordResetTokenExpiresAtRange) {
+                const [start, end] = filter.passwordResetTokenExpiresAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    passwordResetTokenExpiresAt: {
+                    ...where.passwordResetTokenExpiresAt,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    passwordResetTokenExpiresAt: {
+                    ...where.passwordResetTokenExpiresAt,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.disabled) {
+                where = {
+                    ...where,
+                disabled: filter.disabled,
+            };
+            }
+            
+            if (filter.emailVerified) {
+                where = {
+                    ...where,
+                emailVerified: filter.emailVerified,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+      if (filter.custom_permissions) {
+        const searchTerms = filter.custom_permissions.split('|');
+
+        include = [
+          {
+            model: db.permissions,
+            as: 'custom_permissions_filter',
+            required: searchTerms.length > 0,
+            where: searchTerms.length > 0 ? {
+              [Op.or]: [
+                { id: { [Op.in]: searchTerms.map(term => Utils.uuid(term)) } },
+                { 
+                  name: {
+                    [Op.or]: searchTerms.map(term => ({ [Op.iLike]: `%${term}%` }))
+                  }
+                }
+              ]
+            } : undefined
+          },
+          ...include,
+        ]
+      }
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.users.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'users',
+                        'firstName',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.users.findAll({
+            attributes: [ 'id', 'firstName' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['firstName', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.firstName,
+        }));
+    }
+
+    
+    static async createFromAuth(data, options) {
+        const transaction = (options && options.transaction) || undefined;
+        const users = await db.users.create(
+            {
+                email: data.email,
+                firstName: data.firstName,
+                authenticationUid: data.authenticationUid,
+                password: data.password,
+                
+                organizationId: data.organizationId,
+                
+            },
+            { transaction },
+        );
+
+        const app_role = await db.roles.findOne({
+            where: { name: config.roles?.user || "User" },
+        });
+        if (app_role?.id) {
+            await users.setApp_role(app_role?.id || null, {
+                transaction,
+            });
+        }
+
+        await users.update(
+            {
+                authenticationUid: users.id,
+            },
+            { transaction },
+        );
+
+        delete users.password;
+        return users;
+    }
+
+    static async updatePassword(id, password, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+
+        const transaction = (options && options.transaction) || undefined;
+
+        const users = await db.users.findByPk(id, {
+            transaction,
+        });
+
+        await users.update(
+            {
+                password,
+                authenticationUid: id,
+                updatedById: currentUser.id,
+            },
+            { transaction },
+        );
+
+        return users;
+    }
+
+    static async generateEmailVerificationToken(email, options) {
+        return this._generateToken(['emailVerificationToken', 'emailVerificationTokenExpiresAt'], email, options);
+    }
+
+    static async generatePasswordResetToken(email, options) {
+        return this._generateToken(['passwordResetToken', 'passwordResetTokenExpiresAt'], email, options);
+    }
+
+    static async findByPasswordResetToken(token, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        return db.users.findOne(
+            {
+                where: {
+                    passwordResetToken: token,
+                    passwordResetTokenExpiresAt: {
+                        [db.Sequelize.Op.gt]: Date.now(),
+                    },
+                },
+            },
+            { transaction },
+        );
+    }
+
+    static async findByEmailVerificationToken(
+        token,
+        options,
+    ) {
+        const transaction = (options && options.transaction) || undefined;
+        return db.users.findOne(
+            {
+                where: {
+                    emailVerificationToken: token,
+                    emailVerificationTokenExpiresAt: {
+                        [db.Sequelize.Op.gt]: Date.now(),
+                    },
+                },
+            },
+            { transaction },
+        );
+    }
+
+    static async markEmailVerified(id, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const users = await db.users.findByPk(id, {
+            transaction,
+        });
+
+        await users.update(
+            {
+                emailVerified: true,
+                updatedById: currentUser.id,
+            },
+            { transaction },
+        );
+
+        return true;
+    }
+
+    static async _generateToken(keyNames, email, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const users = await db.users.findOne(
+            {
+                where: { email: email.toLowerCase() },
+            },
+            {
+                transaction,
+            },
+        );
+
+        const token = crypto
+            .randomBytes(20)
+            .toString('hex');
+        const tokenExpiresAt = Date.now() + 360000;
+
+        if(users){
+            await users.update(
+                {
+                    [keyNames[0]]: token,
+                    [keyNames[1]]: tokenExpiresAt,
+                    updatedById: currentUser.id,
+                },
+                {transaction},
+            );
+        }
+
+
+        return token;
+    }
+
+    
+    
+};
+
diff --git a/backend/src/db/api/vendor_invoices.js b/backend/src/db/api/vendor_invoices.js
new file mode 100644
index 0000000..d97a1df
--- /dev/null
+++ b/backend/src/db/api/vendor_invoices.js
@@ -0,0 +1,856 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class Vendor_invoicesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendor_invoices = await db.vendor_invoices.create(
+            {
+                id: data.id || undefined,
+        
+        invoice_number: data.invoice_number
+        ||
+        null
+            ,
+            
+        invoice_date: data.invoice_date
+        ||
+        null
+            ,
+            
+        due_date: data.due_date
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        currency: data.currency
+        ||
+        null
+            ,
+            
+        subtotal: data.subtotal
+        ||
+        null
+            ,
+            
+        tax_total: data.tax_total
+        ||
+        null
+            ,
+            
+        grand_total: data.grand_total
+        ||
+        null
+            ,
+            
+        notes: data.notes
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await vendor_invoices.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await vendor_invoices.setVendor( data.vendor || null, {
+            transaction,
+        });
+        
+        await vendor_invoices.setPurchase_order( data.purchase_order || null, {
+            transaction,
+        });
+        
+        await vendor_invoices.setGoods_receipt( data.goods_receipt || null, {
+            transaction,
+        });
+        
+        await vendor_invoices.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.vendor_invoices.getTableName(),
+                belongsToColumn: 'invoice_files',
+                belongsToId: vendor_invoices.id,
+            },
+            data.invoice_files,
+            options,
+        );
+        
+
+        return vendor_invoices;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const vendor_invoicesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                invoice_number: item.invoice_number
+            ||
+            null
+            ,
+            
+                invoice_date: item.invoice_date
+            ||
+            null
+            ,
+            
+                due_date: item.due_date
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                currency: item.currency
+            ||
+            null
+            ,
+            
+                subtotal: item.subtotal
+            ||
+            null
+            ,
+            
+                tax_total: item.tax_total
+            ||
+            null
+            ,
+            
+                grand_total: item.grand_total
+            ||
+            null
+            ,
+            
+                notes: item.notes
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const vendor_invoices = await db.vendor_invoices.bulkCreate(vendor_invoicesData, { transaction });
+
+        // For each item created, replace relation files
+        
+        for (let i = 0; i < vendor_invoices.length; i++) {
+            await FileDBApi.replaceRelationFiles(
+                {
+                    belongsTo: db.vendor_invoices.getTableName(),
+                    belongsToColumn: 'invoice_files',
+                    belongsToId: vendor_invoices[i].id,
+                },
+                data[i].invoice_files,
+                options,
+            );
+        }
+        
+
+        return vendor_invoices;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const vendor_invoices = await db.vendor_invoices.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.invoice_number !== undefined) updatePayload.invoice_number = data.invoice_number;
+        
+        
+        if (data.invoice_date !== undefined) updatePayload.invoice_date = data.invoice_date;
+        
+        
+        if (data.due_date !== undefined) updatePayload.due_date = data.due_date;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.currency !== undefined) updatePayload.currency = data.currency;
+        
+        
+        if (data.subtotal !== undefined) updatePayload.subtotal = data.subtotal;
+        
+        
+        if (data.tax_total !== undefined) updatePayload.tax_total = data.tax_total;
+        
+        
+        if (data.grand_total !== undefined) updatePayload.grand_total = data.grand_total;
+        
+        
+        if (data.notes !== undefined) updatePayload.notes = data.notes;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await vendor_invoices.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await vendor_invoices.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.vendor !== undefined) {
+            await vendor_invoices.setVendor(
+              
+              data.vendor,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.purchase_order !== undefined) {
+            await vendor_invoices.setPurchase_order(
+              
+              data.purchase_order,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.goods_receipt !== undefined) {
+            await vendor_invoices.setGoods_receipt(
+              
+              data.goods_receipt,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await vendor_invoices.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+        await FileDBApi.replaceRelationFiles(
+            {
+                belongsTo: db.vendor_invoices.getTableName(),
+                belongsToColumn: 'invoice_files',
+                belongsToId: vendor_invoices.id,
+            },
+            data.invoice_files,
+            options,
+        );
+        
+
+        return vendor_invoices;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendor_invoices = await db.vendor_invoices.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of vendor_invoices) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of vendor_invoices) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return vendor_invoices;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendor_invoices = await db.vendor_invoices.findByPk(id, options);
+
+        await vendor_invoices.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await vendor_invoices.destroy({
+            transaction
+        });
+
+        return vendor_invoices;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendor_invoices = await db.vendor_invoices.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!vendor_invoices) {
+            return vendor_invoices;
+        }
+
+        const output = vendor_invoices.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.invoice_lines_vendor_invoice = await vendor_invoices.getInvoice_lines_vendor_invoice({
+            transaction
+        });
+        
+        
+        output.payments_vendor_invoice = await vendor_invoices.getPayments_vendor_invoice({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await vendor_invoices.getCompany({
+            transaction
+        });
+        
+        
+        output.vendor = await vendor_invoices.getVendor({
+            transaction
+        });
+        
+        
+        output.purchase_order = await vendor_invoices.getPurchase_order({
+            transaction
+        });
+        
+        
+        output.goods_receipt = await vendor_invoices.getGoods_receipt({
+            transaction
+        });
+        
+        
+        output.invoice_files = await vendor_invoices.getInvoice_files({
+            transaction
+        });
+        
+        
+        output.organizations = await vendor_invoices.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.vendors,
+        as: 'vendor',
+        
+        where: filter.vendor ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.vendor.split('|').map(term => Utils.uuid(term)) } },
+            {
+              vendor_name: {
+                [Op.or]: filter.vendor.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.purchase_orders,
+        as: 'purchase_order',
+        
+        where: filter.purchase_order ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.purchase_order.split('|').map(term => Utils.uuid(term)) } },
+            {
+              po_number: {
+                [Op.or]: filter.purchase_order.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.goods_receipts,
+        as: 'goods_receipt',
+        
+        where: filter.goods_receipt ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.goods_receipt.split('|').map(term => Utils.uuid(term)) } },
+            {
+              grn_number: {
+                [Op.or]: filter.goods_receipt.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+      {
+        model: db.file,
+        as: 'invoice_files',
+      },
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.invoice_number) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendor_invoices',
+                        'invoice_number',
+                        filter.invoice_number,
+                    ),
+                };
+            }
+            
+            if (filter.notes) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendor_invoices',
+                        'notes',
+                        filter.notes,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+            if (filter.invoice_dateRange) {
+                const [start, end] = filter.invoice_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    invoice_date: {
+                    ...where.invoice_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    invoice_date: {
+                    ...where.invoice_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.due_dateRange) {
+                const [start, end] = filter.due_dateRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    due_date: {
+                    ...where.due_date,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    due_date: {
+                    ...where.due_date,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.subtotalRange) {
+                const [start, end] = filter.subtotalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    subtotal: {
+                    ...where.subtotal,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    subtotal: {
+                    ...where.subtotal,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.tax_totalRange) {
+                const [start, end] = filter.tax_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    tax_total: {
+                    ...where.tax_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    tax_total: {
+                    ...where.tax_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+            if (filter.grand_totalRange) {
+                const [start, end] = filter.grand_totalRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                    grand_total: {
+                    ...where.grand_total,
+                            [Op.gte]: start,
+                    },
+                };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                    grand_total: {
+                    ...where.grand_total,
+                            [Op.lte]: end,
+                    },
+                };
+                }
+            }
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+            if (filter.currency) {
+                where = {
+                    ...where,
+                currency: filter.currency,
+            };
+            }
+            
+
+
+      
+
+      
+
+      
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.vendor_invoices.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'vendor_invoices',
+                        'invoice_number',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.vendor_invoices.findAll({
+            attributes: [ 'id', 'invoice_number' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['invoice_number', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.invoice_number,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/vendors.js b/backend/src/db/api/vendors.js
new file mode 100644
index 0000000..b4de303
--- /dev/null
+++ b/backend/src/db/api/vendors.js
@@ -0,0 +1,622 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class VendorsDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendors = await db.vendors.create(
+            {
+                id: data.id || undefined,
+        
+        vendor_name: data.vendor_name
+        ||
+        null
+            ,
+            
+        vendor_code: data.vendor_code
+        ||
+        null
+            ,
+            
+        contact_name: data.contact_name
+        ||
+        null
+            ,
+            
+        email: data.email
+        ||
+        null
+            ,
+            
+        phone: data.phone
+        ||
+        null
+            ,
+            
+        address: data.address
+        ||
+        null
+            ,
+            
+        status: data.status
+        ||
+        null
+            ,
+            
+        payment_terms: data.payment_terms
+        ||
+        null
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await vendors.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await vendors.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return vendors;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const vendorsData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                vendor_name: item.vendor_name
+            ||
+            null
+            ,
+            
+                vendor_code: item.vendor_code
+            ||
+            null
+            ,
+            
+                contact_name: item.contact_name
+            ||
+            null
+            ,
+            
+                email: item.email
+            ||
+            null
+            ,
+            
+                phone: item.phone
+            ||
+            null
+            ,
+            
+                address: item.address
+            ||
+            null
+            ,
+            
+                status: item.status
+            ||
+            null
+            ,
+            
+                payment_terms: item.payment_terms
+            ||
+            null
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const vendors = await db.vendors.bulkCreate(vendorsData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return vendors;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const vendors = await db.vendors.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.vendor_name !== undefined) updatePayload.vendor_name = data.vendor_name;
+        
+        
+        if (data.vendor_code !== undefined) updatePayload.vendor_code = data.vendor_code;
+        
+        
+        if (data.contact_name !== undefined) updatePayload.contact_name = data.contact_name;
+        
+        
+        if (data.email !== undefined) updatePayload.email = data.email;
+        
+        
+        if (data.phone !== undefined) updatePayload.phone = data.phone;
+        
+        
+        if (data.address !== undefined) updatePayload.address = data.address;
+        
+        
+        if (data.status !== undefined) updatePayload.status = data.status;
+        
+        
+        if (data.payment_terms !== undefined) updatePayload.payment_terms = data.payment_terms;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await vendors.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await vendors.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await vendors.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return vendors;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendors = await db.vendors.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of vendors) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of vendors) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return vendors;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendors = await db.vendors.findByPk(id, options);
+
+        await vendors.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await vendors.destroy({
+            transaction
+        });
+
+        return vendors;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const vendors = await db.vendors.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!vendors) {
+            return vendors;
+        }
+
+        const output = vendors.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_orders_vendor = await vendors.getPurchase_orders_vendor({
+            transaction
+        });
+        
+        
+        
+        
+        
+        output.vendor_invoices_vendor = await vendors.getVendor_invoices_vendor({
+            transaction
+        });
+        
+        
+        
+        output.payments_vendor = await vendors.getPayments_vendor({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await vendors.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await vendors.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.vendor_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'vendor_name',
+                        filter.vendor_name,
+                    ),
+                };
+            }
+            
+            if (filter.vendor_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'vendor_code',
+                        filter.vendor_code,
+                    ),
+                };
+            }
+            
+            if (filter.contact_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'contact_name',
+                        filter.contact_name,
+                    ),
+                };
+            }
+            
+            if (filter.email) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'email',
+                        filter.email,
+                    ),
+                };
+            }
+            
+            if (filter.phone) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'phone',
+                        filter.phone,
+                    ),
+                };
+            }
+            
+            if (filter.address) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'address',
+                        filter.address,
+                    ),
+                };
+            }
+            
+            if (filter.payment_terms) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'vendors',
+                        'payment_terms',
+                        filter.payment_terms,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.status) {
+                where = {
+                    ...where,
+                status: filter.status,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.vendors.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'vendors',
+                        'vendor_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.vendors.findAll({
+            attributes: [ 'id', 'vendor_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['vendor_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.vendor_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/api/warehouses.js b/backend/src/db/api/warehouses.js
new file mode 100644
index 0000000..e5b473f
--- /dev/null
+++ b/backend/src/db/api/warehouses.js
@@ -0,0 +1,550 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class WarehousesDBApi {
+    
+
+    
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const warehouses = await db.warehouses.create(
+            {
+                id: data.id || undefined,
+        
+        warehouse_name: data.warehouse_name
+        ||
+        null
+            ,
+            
+        warehouse_code: data.warehouse_code
+        ||
+        null
+            ,
+            
+        address: data.address
+        ||
+        null
+            ,
+            
+        is_default: data.is_default
+        ||
+        false
+        
+            ,
+            
+        is_active: data.is_active
+        ||
+        false
+        
+            ,
+            
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        
+        await warehouses.setCompany( data.company || null, {
+            transaction,
+        });
+        
+        await warehouses.setOrganizations( data.organizations || null, {
+            transaction,
+        });
+        
+
+        
+
+        
+
+        return warehouses;
+    }
+    
+
+    static async bulkImport(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        // Prepare data - wrapping individual data transformations in a map() method
+        const warehousesData = data.map((item, index) => ({
+                id: item.id || undefined,
+                
+                warehouse_name: item.warehouse_name
+            ||
+            null
+            ,
+            
+                warehouse_code: item.warehouse_code
+            ||
+            null
+            ,
+            
+                address: item.address
+            ||
+            null
+            ,
+            
+                is_default: item.is_default
+            ||
+            false
+        
+            ,
+            
+                is_active: item.is_active
+            ||
+            false
+        
+            ,
+            
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const warehouses = await db.warehouses.bulkCreate(warehousesData, { transaction });
+
+        // For each item created, replace relation files
+        
+
+        return warehouses;
+    }
+
+    static async update(id, data,  options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+        const globalAccess = currentUser.app_role?.globalAccess;
+
+        const warehouses = await db.warehouses.findByPk(id, {}, {transaction});
+
+
+        
+
+        const updatePayload = {};
+        
+        if (data.warehouse_name !== undefined) updatePayload.warehouse_name = data.warehouse_name;
+        
+        
+        if (data.warehouse_code !== undefined) updatePayload.warehouse_code = data.warehouse_code;
+        
+        
+        if (data.address !== undefined) updatePayload.address = data.address;
+        
+        
+        if (data.is_default !== undefined) updatePayload.is_default = data.is_default;
+        
+        
+        if (data.is_active !== undefined) updatePayload.is_active = data.is_active;
+        
+        
+        updatePayload.updatedById = currentUser.id;
+
+        await warehouses.update(updatePayload, {transaction});
+
+        
+        
+        if (data.company !== undefined) {
+            await warehouses.setCompany(
+              
+              data.company,
+              
+              { transaction }
+            );
+        }
+        
+        if (data.organizations !== undefined) {
+            await warehouses.setOrganizations(
+              
+              data.organizations,
+              
+              { transaction }
+            );
+        }
+        
+
+        
+        
+
+        
+
+        return warehouses;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const warehouses = await db.warehouses.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of warehouses) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of warehouses) {
+                await record.destroy({transaction});
+            }
+        });
+
+
+        return warehouses;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const warehouses = await db.warehouses.findByPk(id, options);
+
+        await warehouses.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await warehouses.destroy({
+            transaction
+        });
+
+        return warehouses;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const warehouses = await db.warehouses.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!warehouses) {
+            return warehouses;
+        }
+
+        const output = warehouses.get({plain: true});
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.purchase_requisition_lines_warehouse = await warehouses.getPurchase_requisition_lines_warehouse({
+            transaction
+        });
+        
+        
+        
+        output.purchase_order_lines_warehouse = await warehouses.getPurchase_order_lines_warehouse({
+            transaction
+        });
+        
+        
+        output.goods_receipts_warehouse = await warehouses.getGoods_receipts_warehouse({
+            transaction
+        });
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        output.company = await warehouses.getCompany({
+            transaction
+        });
+        
+        
+        output.organizations = await warehouses.getOrganizations({
+            transaction
+        });
+        
+        
+
+        return output;
+    }
+
+    static async findAll(
+          filter,
+           globalAccess,  options
+        ) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+        
+
+        
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+        
+
+        offset = currentPage * limit;
+
+        const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+
+      {
+        model: db.companies,
+        as: 'company',
+        
+        where: filter.company ? {
+          [Op.or]: [
+            { id: { [Op.in]: filter.company.split('|').map(term => Utils.uuid(term)) } },
+            {
+              company_name: {
+                [Op.or]: filter.company.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
+              }
+            },
+          ]
+        } : {},
+        
+      },
+
+      {
+        model: db.organizations,
+        as: 'organizations',
+        
+      },
+
+
+
+    ];
+
+        if (filter) {
+            if (filter.id) {
+                where = {
+                    ...where,
+                    ['id']: Utils.uuid(filter.id),
+                };
+            }
+
+            
+            if (filter.warehouse_name) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'warehouses',
+                        'warehouse_name',
+                        filter.warehouse_name,
+                    ),
+                };
+            }
+            
+            if (filter.warehouse_code) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'warehouses',
+                        'warehouse_code',
+                        filter.warehouse_code,
+                    ),
+                };
+            }
+            
+            if (filter.address) {
+                where = {
+                    ...where,
+                    [Op.and]: Utils.ilike(
+                        'warehouses',
+                        'address',
+                        filter.address,
+                    ),
+                };
+            }
+            
+
+            
+            
+
+            
+
+            if (filter.active !== undefined) {
+                where = {
+                    ...where,
+                    active: filter.active === true || filter.active === 'true'
+                };
+            }
+
+            
+            if (filter.is_default) {
+                where = {
+                    ...where,
+                is_default: filter.is_default,
+            };
+            }
+            
+            if (filter.is_active) {
+                where = {
+                    ...where,
+                is_active: filter.is_active,
+            };
+            }
+            
+
+
+      
+
+      
+      if (filter.organizations) {
+        const listItems = filter.organizations.split('|').map(item => {
+          return  Utils.uuid(item)
+        });
+
+        where = {
+          ...where,
+          organizationsId: {[Op.or]: listItems}
+        };
+      }
+      
+
+
+
+            if (filter.createdAtRange) {
+                const [start, end] = filter.createdAtRange;
+
+                if (start !== undefined && start !== null && start !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.gte]: start,
+                        },
+                    };
+                }
+
+                if (end !== undefined && end !== null && end !== '') {
+                    where = {
+                        ...where,
+                        ['createdAt']: {
+                            ...where.createdAt,
+                            [Op.lte]: end,
+                        },
+                    };
+                }
+            }
+        }
+        
+
+        
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+        
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort
+                ? [[filter.field, filter.sort]]
+                : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+            logging: console.log
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.warehouses.findAndCountAll(queryOptions);
+
+            return {
+                rows: options?.countOnly ? [] : rows,
+                count: count
+            };
+        } catch (error) {
+            console.error('Error executing query:', error);
+            throw error;
+        }
+    }
+
+    static async findAllAutocomplete(query, limit, offset,  globalAccess, organizationId,) {
+        let where = {};
+        
+        
+        if (!globalAccess && organizationId) {
+            where.organizationId = organizationId;
+        }
+        
+
+        if (query) {
+            where = {
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike(
+                        'warehouses',
+                        'warehouse_name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.warehouses.findAll({
+            attributes: [ 'id', 'warehouse_name' ],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            orderBy: [['warehouse_name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.warehouse_name,
+        }));
+    }
+
+    
+};
+
diff --git a/backend/src/db/db.config.js b/backend/src/db/db.config.js
new file mode 100644
index 0000000..59c5692
--- /dev/null
+++ b/backend/src/db/db.config.js
@@ -0,0 +1,33 @@
+
+
+module.exports = {
+  production: {
+    dialect: 'postgres',
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    logging: console.log,
+    seederStorage: 'sequelize',
+  },
+  development: {
+    username: 'postgres',
+    dialect: 'postgres',
+    password: '',
+    database: 'db_modern_erp_redesign',
+    host: process.env.DB_HOST || 'localhost',
+    logging: console.log,
+    seederStorage: 'sequelize',
+  },
+    dev_stage: {
+      dialect: 'postgres',
+      username: process.env.DB_USER,
+      password: process.env.DB_PASS,
+      database: process.env.DB_NAME,
+      host: process.env.DB_HOST,
+      port: process.env.DB_PORT,
+      logging: console.log,
+      seederStorage: 'sequelize',
+    }
+};
diff --git a/backend/src/db/migrations/1774958148418.js b/backend/src/db/migrations/1774958148418.js
new file mode 100644
index 0000000..bd9d22b
--- /dev/null
+++ b/backend/src/db/migrations/1774958148418.js
@@ -0,0 +1,7181 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+            
+                
+                    await queryInterface.createTable('users', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('roles', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('permissions', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('organizations', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('companies', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('user_role_assignments', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('role_permission_mappings', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('vendors', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('warehouses', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('product_categories', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('products', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('purchase_requisitions', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('purchase_requisition_lines', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('purchase_orders', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('purchase_order_lines', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('goods_receipts', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('goods_receipt_lines', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('vendor_invoices', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('invoice_lines', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('payments', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('departments', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('document_types', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('documents', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('document_links', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('approval_workflows', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('approval_steps', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('approvals', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('activity_logs', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    await queryInterface.createTable('ui_announcements', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'firstName',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'lastName',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'phoneNumber',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'email',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'disabled',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'password',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'emailVerified',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'emailVerificationToken',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'emailVerificationTokenExpiresAt',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'passwordResetToken',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'passwordResetTokenExpiresAt',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'provider',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'app_roleId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'roles',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'users',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'roles',
+                      'name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'roles',
+                      'role_customization',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'roles',
+                      'globalAccess',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'permissions',
+                      'name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'organizations',
+                      'name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'company_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'legal_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'tax_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'website',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'phone',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'email',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'address_line1',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'address_line2',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'city',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'state',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'postal_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'country',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'companies',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'userId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'roleId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'roles',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'effective_from',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'effective_to',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'is_primary',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'user_role_assignments',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'role_permission_mappings',
+                      'roleId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'roles',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'role_permission_mappings',
+                      'permissionId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'permissions',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'role_permission_mappings',
+                      'is_allowed',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'role_permission_mappings',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'vendor_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'vendor_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'contact_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'email',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'phone',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'address',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['active','on_hold','inactive'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'payment_terms',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendors',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'warehouse_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'warehouse_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'address',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'is_default',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'warehouses',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'product_categories',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'product_categories',
+                      'category_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'product_categories',
+                      'category_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'product_categories',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'product_categories',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'categoryId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'product_categories',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'product_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'sku',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'barcode',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'product_type',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['stock','service','consumable'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'uom',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'standard_cost',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'purchase_price',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'sales_price',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'products',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'requisition_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'requested_byId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'departmentId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'departments',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'requested_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'needed_by',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['draft','submitted','approved','rejected','cancelled','converted_to_po'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'reason',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'estimated_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisitions',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'purchase_requisitionId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_requisitions',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'productId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'products',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'quantity',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'unit_price_estimate',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'line_total_estimate',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'warehouseId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'warehouses',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_requisition_lines',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'po_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'vendorId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'vendors',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'buyerId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'source_requisitionId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_requisitions',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'order_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'expected_delivery_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['draft','sent','confirmed','partially_received','received','cancelled','closed'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'currency',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['USD','EUR','GBP','AED','SAR','INR'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'subtotal',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'tax_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'discount_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'grand_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_orders',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'purchase_orderId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_orders',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'productId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'products',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'quantity',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'unit_price',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'tax_rate',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'discount_rate',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'line_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'warehouseId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'warehouses',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'purchase_order_lines',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'grn_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'purchase_orderId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_orders',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'received_byId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'warehouseId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'warehouses',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'receipt_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'posted_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['draft','posted','cancelled'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'remarks',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipts',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'goods_receiptId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'goods_receipts',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'purchase_order_lineId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_order_lines',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'productId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'products',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'quantity_received',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'quantity_accepted',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'quantity_rejected',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'quality_notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'goods_receipt_lines',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'invoice_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'vendorId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'vendors',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'purchase_orderId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'purchase_orders',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'goods_receiptId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'goods_receipts',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'invoice_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'due_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['draft','submitted','approved','rejected','paid','void'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'currency',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['USD','EUR','GBP','AED','SAR','INR'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'subtotal',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'tax_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'grand_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'vendor_invoices',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'vendor_invoiceId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'vendor_invoices',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'productId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'products',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'quantity',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'unit_price',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'tax_rate',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'line_total',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'invoice_lines',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'payment_reference',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'vendorId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'vendors',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'vendor_invoiceId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'vendor_invoices',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'payment_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'amount',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'method',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['bank_transfer','cash','cheque','card','online'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['scheduled','processing','completed','failed','cancelled'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'payments',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'department_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'department_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'managerId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'departments',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'type_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'type_code',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'module',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['procurement','inventory','finance','general'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_types',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'document_typeId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'document_types',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'document_number',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'title',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['draft','in_review','approved','rejected','archived'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'priority',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['low','normal','high','urgent'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'ownerId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'document_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'review_due_date',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'summary',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'tags',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'documents',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_links',
+                      'documentId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'documents',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_links',
+                      'source_type',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_links',
+                      'source_reference',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_links',
+                      'notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'document_links',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'workflow_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'applies_to',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['purchase_requisition','purchase_order','vendor_invoice','document'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'description',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_workflows',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'approval_workflowId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'approval_workflows',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'step_order',
+                      {
+                          type: Sequelize.DataTypes.INTEGER,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'step_name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'approver_roleId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'roles',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'min_amount',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'max_amount',
+                      {
+                          type: Sequelize.DataTypes.DECIMAL,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'is_required',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approval_steps',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'approval_workflowId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'approval_workflows',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'approval_stepId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'approval_steps',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'entity_type',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['purchase_requisition','purchase_order','vendor_invoice','document'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'entity_reference',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'requested_byId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'assigned_toId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'status',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['pending','approved','rejected','cancelled'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'requested_at',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'decided_at',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'decision_notes',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'approvals',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'actorId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'users',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'entity_type',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment','document','product','vendor'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'entity_reference',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'action',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['created','updated','submitted','approved','rejected','sent','posted','received','paid','archived','commented','attached_file'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'event_time',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'message',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'ip_address',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'activity_logs',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'companyId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'companies',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'headline',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'content',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'audience',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+                          
+                          
+                            values: ['all_users','admins','buyers','finance','warehouse'],
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'publish_from',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'publish_to',
+                      {
+                          type: Sequelize.DataTypes.DATE,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'is_active',
+                      {
+                          type: Sequelize.DataTypes.BOOLEAN,
+                          
+                            defaultValue: false,
+                            allowNull: false,
+                          
+                          
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+                
+                    
+                    await queryInterface.addColumn(
+                      'ui_announcements',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+                          
+                          
+                          
+                            references: {
+                                model: 'organizations',
+                                key: 'id',
+                            },
+                          
+                      },
+                      { transaction }
+                    );
+                
+            
+            
+            
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'publish_to',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'publish_from',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'audience',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'content',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'headline',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'ui_announcements',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'ip_address',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'message',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'event_time',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'action',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'entity_reference',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'entity_type',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'activity_logs',
+                        'actorId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'decision_notes',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'decided_at',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'requested_at',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'assigned_toId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'requested_byId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'entity_reference',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'entity_type',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'approval_stepId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approvals',
+                        'approval_workflowId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'is_required',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'max_amount',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'min_amount',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'approver_roleId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'step_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'step_order',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_steps',
+                        'approval_workflowId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'applies_to',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'workflow_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'approval_workflows',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_links',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_links',
+                        'notes',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_links',
+                        'source_reference',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_links',
+                        'source_type',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_links',
+                        'documentId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'tags',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'summary',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'review_due_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'document_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'ownerId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'priority',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'title',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'document_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'document_typeId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'documents',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'module',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'type_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'document_types',
+                        'type_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'managerId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'department_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'department_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'departments',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'notes',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'method',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'amount',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'payment_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'vendor_invoiceId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'vendorId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'payment_reference',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'payments',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'line_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'tax_rate',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'unit_price',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'quantity',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'productId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'invoice_lines',
+                        'vendor_invoiceId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'notes',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'grand_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'tax_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'subtotal',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'currency',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'due_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'invoice_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'goods_receiptId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'purchase_orderId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'vendorId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'invoice_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendor_invoices',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'quality_notes',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'quantity_rejected',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'quantity_accepted',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'quantity_received',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'productId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'purchase_order_lineId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipt_lines',
+                        'goods_receiptId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'remarks',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'posted_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'receipt_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'warehouseId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'received_byId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'purchase_orderId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'grn_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'goods_receipts',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'warehouseId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'line_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'discount_rate',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'tax_rate',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'unit_price',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'quantity',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'productId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_order_lines',
+                        'purchase_orderId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'notes',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'grand_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'discount_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'tax_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'subtotal',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'currency',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'expected_delivery_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'order_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'source_requisitionId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'buyerId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'vendorId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'po_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_orders',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'warehouseId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'line_total_estimate',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'unit_price_estimate',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'quantity',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'productId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisition_lines',
+                        'purchase_requisitionId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'estimated_total',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'reason',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'needed_by',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'requested_date',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'departmentId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'requested_byId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'requisition_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'purchase_requisitions',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'sales_price',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'purchase_price',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'standard_cost',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'uom',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'product_type',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'barcode',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'sku',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'product_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'categoryId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'products',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'product_categories',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'product_categories',
+                        'description',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'product_categories',
+                        'category_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'product_categories',
+                        'category_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'product_categories',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'is_default',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'address',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'warehouse_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'warehouse_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'warehouses',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'payment_terms',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'status',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'address',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'phone',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'email',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'contact_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'vendor_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'vendor_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'vendors',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'role_permission_mappings',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'role_permission_mappings',
+                        'is_allowed',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'role_permission_mappings',
+                        'permissionId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'role_permission_mappings',
+                        'roleId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'is_primary',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'effective_to',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'effective_from',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'companyId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'roleId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'user_role_assignments',
+                        'userId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'is_active',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'country',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'postal_code',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'state',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'city',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'address_line2',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'address_line1',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'email',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'phone',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'website',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'tax_number',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'legal_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'company_name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'organizations',
+                        'name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'permissions',
+                        'name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'roles',
+                        'globalAccess',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'roles',
+                        'role_customization',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'roles',
+                        'name',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'organizationsId',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'app_roleId',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'provider',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'passwordResetTokenExpiresAt',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'passwordResetToken',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'emailVerificationTokenExpiresAt',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'emailVerificationToken',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'emailVerified',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'password',
+                        { transaction }
+                    );
+                
+            
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'disabled',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'email',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'phoneNumber',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'lastName',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.removeColumn(
+                        'users',
+                        'firstName',
+                        { transaction }
+                    );
+                
+            
+                
+                    await queryInterface.dropTable('ui_announcements', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('activity_logs', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('approvals', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('approval_steps', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('approval_workflows', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('document_links', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('documents', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('document_types', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('departments', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('payments', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('invoice_lines', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('vendor_invoices', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('goods_receipt_lines', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('goods_receipts', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('purchase_order_lines', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('purchase_orders', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('purchase_requisition_lines', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('purchase_requisitions', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('products', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('product_categories', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('warehouses', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('vendors', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('role_permission_mappings', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('user_role_assignments', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('companies', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('organizations', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('permissions', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('roles', { transaction });
+                
+            
+                
+                    await queryInterface.dropTable('users', { transaction });
+                
+            
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};
diff --git a/backend/src/db/migrations/20260316000000-create-files.js b/backend/src/db/migrations/20260316000000-create-files.js
new file mode 100644
index 0000000..69e9594
--- /dev/null
+++ b/backend/src/db/migrations/20260316000000-create-files.js
@@ -0,0 +1,124 @@
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+
+    try {
+      const rows = await queryInterface.sequelize.query(
+        "SELECT to_regclass('public.files') AS regclass_name;",
+        {
+          transaction,
+          type: Sequelize.QueryTypes.SELECT,
+        },
+      );
+      const tableName = rows[0].regclass_name;
+
+      if (tableName) {
+        await transaction.commit();
+        return;
+      }
+
+      await queryInterface.createTable(
+        'files',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          belongsTo: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+          },
+          belongsToId: {
+            type: Sequelize.DataTypes.UUID,
+            allowNull: true,
+          },
+          belongsToColumn: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+          },
+          name: {
+            type: Sequelize.DataTypes.STRING(2083),
+            allowNull: false,
+          },
+          sizeInBytes: {
+            type: Sequelize.DataTypes.INTEGER,
+            allowNull: true,
+          },
+          privateUrl: {
+            type: Sequelize.DataTypes.STRING(2083),
+            allowNull: true,
+          },
+          publicUrl: {
+            type: Sequelize.DataTypes.STRING(2083),
+            allowNull: false,
+          },
+          createdAt: {
+            type: Sequelize.DataTypes.DATE,
+            allowNull: false,
+          },
+          updatedAt: {
+            type: Sequelize.DataTypes.DATE,
+            allowNull: false,
+          },
+          deletedAt: {
+            type: Sequelize.DataTypes.DATE,
+            allowNull: true,
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            allowNull: true,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+            onDelete: 'SET NULL',
+            onUpdate: 'CASCADE',
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            allowNull: true,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+            onDelete: 'SET NULL',
+            onUpdate: 'CASCADE',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+
+    try {
+      const rows = await queryInterface.sequelize.query(
+        "SELECT to_regclass('public.files') AS regclass_name;",
+        {
+          transaction,
+          type: Sequelize.QueryTypes.SELECT,
+        },
+      );
+      const tableName = rows[0].regclass_name;
+
+      if (!tableName) {
+        await transaction.commit();
+        return;
+      }
+
+      await queryInterface.dropTable('files', { transaction });
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};
diff --git a/backend/src/db/migrations/20260316001000-create-users-custom-permissions-join-table.js b/backend/src/db/migrations/20260316001000-create-users-custom-permissions-join-table.js
new file mode 100644
index 0000000..c0e5634
--- /dev/null
+++ b/backend/src/db/migrations/20260316001000-create-users-custom-permissions-join-table.js
@@ -0,0 +1,77 @@
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+
+    try {
+      const rows = await queryInterface.sequelize.query(
+        "SELECT to_regclass('public.\"usersCustom_permissionsPermissions\"') AS regclass_name;",
+        {
+          transaction,
+          type: Sequelize.QueryTypes.SELECT,
+        },
+      );
+      const tableName = rows[0].regclass_name;
+
+      if (tableName) {
+        await transaction.commit();
+        return;
+      }
+
+      await queryInterface.createTable(
+        'usersCustom_permissionsPermissions',
+        {
+          createdAt: {
+            type: Sequelize.DataTypes.DATE,
+            allowNull: false,
+          },
+          updatedAt: {
+            type: Sequelize.DataTypes.DATE,
+            allowNull: false,
+          },
+          users_custom_permissionsId: {
+            type: Sequelize.DataTypes.UUID,
+            allowNull: false,
+            primaryKey: true,
+          },
+          permissionId: {
+            type: Sequelize.DataTypes.UUID,
+            allowNull: false,
+            primaryKey: true,
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+
+    try {
+      const rows = await queryInterface.sequelize.query(
+        "SELECT to_regclass('public.\"usersCustom_permissionsPermissions\"') AS regclass_name;",
+        {
+          transaction,
+          type: Sequelize.QueryTypes.SELECT,
+        },
+      );
+      const tableName = rows[0].regclass_name;
+
+      if (!tableName) {
+        await transaction.commit();
+        return;
+      }
+
+      await queryInterface.dropTable('usersCustom_permissionsPermissions', { transaction });
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};
diff --git a/backend/src/db/models/activity_logs.js b/backend/src/db/models/activity_logs.js
new file mode 100644
index 0000000..b717902
--- /dev/null
+++ b/backend/src/db/models/activity_logs.js
@@ -0,0 +1,211 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const activity_logs = sequelize.define(
+    'activity_logs',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+entity_type: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"purchase_requisition",
+
+
+"purchase_order",
+
+
+"goods_receipt",
+
+
+"vendor_invoice",
+
+
+"payment",
+
+
+"document",
+
+
+"product",
+
+
+"vendor"
+
+        ],
+
+      },
+
+entity_reference: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+action: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"created",
+
+
+"updated",
+
+
+"submitted",
+
+
+"approved",
+
+
+"rejected",
+
+
+"sent",
+
+
+"posted",
+
+
+"received",
+
+
+"paid",
+
+
+"archived",
+
+
+"commented",
+
+
+"attached_file"
+
+        ],
+
+      },
+
+event_time: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+message: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+ip_address: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  activity_logs.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.activity_logs.belongsTo(db.users, {
+      as: 'actor',
+      foreignKey: {
+        name: 'actorId',
+      },
+      constraints: false,
+    });
+
+    db.activity_logs.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.activity_logs.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.activity_logs.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return activity_logs;
+};
+
+
diff --git a/backend/src/db/models/approval_steps.js b/backend/src/db/models/approval_steps.js
new file mode 100644
index 0000000..527aede
--- /dev/null
+++ b/backend/src/db/models/approval_steps.js
@@ -0,0 +1,157 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const approval_steps = sequelize.define(
+    'approval_steps',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+step_order: {
+        type: DataTypes.INTEGER,
+      
+      
+
+      },
+
+step_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+min_amount: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+max_amount: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+is_required: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  approval_steps.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.approval_steps.hasMany(db.approvals, {
+      as: 'approvals_approval_step',
+      foreignKey: {
+          name: 'approval_stepId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+//end loop
+
+
+
+    db.approval_steps.belongsTo(db.approval_workflows, {
+      as: 'approval_workflow',
+      foreignKey: {
+        name: 'approval_workflowId',
+      },
+      constraints: false,
+    });
+
+    db.approval_steps.belongsTo(db.roles, {
+      as: 'approver_role',
+      foreignKey: {
+        name: 'approver_roleId',
+      },
+      constraints: false,
+    });
+
+    db.approval_steps.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.approval_steps.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.approval_steps.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return approval_steps;
+};
+
+
diff --git a/backend/src/db/models/approval_workflows.js b/backend/src/db/models/approval_workflows.js
new file mode 100644
index 0000000..00f24d2
--- /dev/null
+++ b/backend/src/db/models/approval_workflows.js
@@ -0,0 +1,165 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const approval_workflows = sequelize.define(
+    'approval_workflows',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+workflow_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+applies_to: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"purchase_requisition",
+
+
+"purchase_order",
+
+
+"vendor_invoice",
+
+
+"document"
+
+        ],
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  approval_workflows.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.approval_workflows.hasMany(db.approval_steps, {
+      as: 'approval_steps_approval_workflow',
+      foreignKey: {
+          name: 'approval_workflowId',
+      },
+      constraints: false,
+    });
+
+
+    db.approval_workflows.hasMany(db.approvals, {
+      as: 'approvals_approval_workflow',
+      foreignKey: {
+          name: 'approval_workflowId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+//end loop
+
+
+
+    db.approval_workflows.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.approval_workflows.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.approval_workflows.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.approval_workflows.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return approval_workflows;
+};
+
+
diff --git a/backend/src/db/models/approvals.js b/backend/src/db/models/approvals.js
new file mode 100644
index 0000000..b3523b0
--- /dev/null
+++ b/backend/src/db/models/approvals.js
@@ -0,0 +1,199 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const approvals = sequelize.define(
+    'approvals',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+entity_type: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"purchase_requisition",
+
+
+"purchase_order",
+
+
+"vendor_invoice",
+
+
+"document"
+
+        ],
+
+      },
+
+entity_reference: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"pending",
+
+
+"approved",
+
+
+"rejected",
+
+
+"cancelled"
+
+        ],
+
+      },
+
+requested_at: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+decided_at: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+decision_notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  approvals.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.approvals.belongsTo(db.approval_workflows, {
+      as: 'approval_workflow',
+      foreignKey: {
+        name: 'approval_workflowId',
+      },
+      constraints: false,
+    });
+
+    db.approvals.belongsTo(db.approval_steps, {
+      as: 'approval_step',
+      foreignKey: {
+        name: 'approval_stepId',
+      },
+      constraints: false,
+    });
+
+    db.approvals.belongsTo(db.users, {
+      as: 'requested_by',
+      foreignKey: {
+        name: 'requested_byId',
+      },
+      constraints: false,
+    });
+
+    db.approvals.belongsTo(db.users, {
+      as: 'assigned_to',
+      foreignKey: {
+        name: 'assigned_toId',
+      },
+      constraints: false,
+    });
+
+    db.approvals.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.approvals.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.approvals.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return approvals;
+};
+
+
diff --git a/backend/src/db/models/companies.js b/backend/src/db/models/companies.js
new file mode 100644
index 0000000..c5126f9
--- /dev/null
+++ b/backend/src/db/models/companies.js
@@ -0,0 +1,311 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const companies = sequelize.define(
+    'companies',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+company_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+legal_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+tax_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+website: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+phone: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+email: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+address_line1: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+address_line2: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+city: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+state: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+postal_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+country: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  companies.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+    db.companies.hasMany(db.user_role_assignments, {
+      as: 'user_role_assignments_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.vendors, {
+      as: 'vendors_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+    db.companies.hasMany(db.warehouses, {
+      as: 'warehouses_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+    db.companies.hasMany(db.product_categories, {
+      as: 'product_categories_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+    db.companies.hasMany(db.products, {
+      as: 'products_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+    db.companies.hasMany(db.purchase_requisitions, {
+      as: 'purchase_requisitions_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.purchase_orders, {
+      as: 'purchase_orders_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.goods_receipts, {
+      as: 'goods_receipts_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.vendor_invoices, {
+      as: 'vendor_invoices_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.payments, {
+      as: 'payments_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+    db.companies.hasMany(db.departments, {
+      as: 'departments_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.documents, {
+      as: 'documents_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.approval_workflows, {
+      as: 'approval_workflows_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+    db.companies.hasMany(db.ui_announcements, {
+      as: 'ui_announcements_company',
+      foreignKey: {
+          name: 'companyId',
+      },
+      constraints: false,
+    });
+
+
+
+//end loop
+
+
+
+    db.companies.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.companies.hasMany(db.file, {
+      as: 'logo',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.companies.getTableName(),
+        belongsToColumn: 'logo',
+      },
+    });
+
+
+    db.companies.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.companies.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return companies;
+};
+
+
diff --git a/backend/src/db/models/departments.js b/backend/src/db/models/departments.js
new file mode 100644
index 0000000..5c31d4c
--- /dev/null
+++ b/backend/src/db/models/departments.js
@@ -0,0 +1,143 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const departments = sequelize.define(
+    'departments',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+department_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+department_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  departments.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.departments.hasMany(db.purchase_requisitions, {
+      as: 'purchase_requisitions_department',
+      foreignKey: {
+          name: 'departmentId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.departments.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.departments.belongsTo(db.users, {
+      as: 'manager',
+      foreignKey: {
+        name: 'managerId',
+      },
+      constraints: false,
+    });
+
+    db.departments.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.departments.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.departments.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return departments;
+};
+
+
diff --git a/backend/src/db/models/document_links.js b/backend/src/db/models/document_links.js
new file mode 100644
index 0000000..31fc601
--- /dev/null
+++ b/backend/src/db/models/document_links.js
@@ -0,0 +1,142 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const document_links = sequelize.define(
+    'document_links',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+source_type: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"purchase_requisition",
+
+
+"purchase_order",
+
+
+"goods_receipt",
+
+
+"vendor_invoice",
+
+
+"payment"
+
+        ],
+
+      },
+
+source_reference: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  document_links.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.document_links.belongsTo(db.documents, {
+      as: 'document',
+      foreignKey: {
+        name: 'documentId',
+      },
+      constraints: false,
+    });
+
+    db.document_links.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.document_links.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.document_links.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return document_links;
+};
+
+
diff --git a/backend/src/db/models/document_types.js b/backend/src/db/models/document_types.js
new file mode 100644
index 0000000..a56002e
--- /dev/null
+++ b/backend/src/db/models/document_types.js
@@ -0,0 +1,156 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const document_types = sequelize.define(
+    'document_types',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+type_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+type_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+module: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"procurement",
+
+
+"inventory",
+
+
+"finance",
+
+
+"general"
+
+        ],
+
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  document_types.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.document_types.hasMany(db.documents, {
+      as: 'documents_document_type',
+      foreignKey: {
+          name: 'document_typeId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.document_types.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.document_types.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.document_types.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return document_types;
+};
+
+
diff --git a/backend/src/db/models/documents.js b/backend/src/db/models/documents.js
new file mode 100644
index 0000000..735751f
--- /dev/null
+++ b/backend/src/db/models/documents.js
@@ -0,0 +1,226 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const documents = sequelize.define(
+    'documents',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+document_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+title: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"draft",
+
+
+"in_review",
+
+
+"approved",
+
+
+"rejected",
+
+
+"archived"
+
+        ],
+
+      },
+
+priority: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"low",
+
+
+"normal",
+
+
+"high",
+
+
+"urgent"
+
+        ],
+
+      },
+
+document_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+review_due_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+summary: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+tags: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  documents.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.documents.hasMany(db.document_links, {
+      as: 'document_links_document',
+      foreignKey: {
+          name: 'documentId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.documents.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.documents.belongsTo(db.document_types, {
+      as: 'document_type',
+      foreignKey: {
+        name: 'document_typeId',
+      },
+      constraints: false,
+    });
+
+    db.documents.belongsTo(db.users, {
+      as: 'owner',
+      foreignKey: {
+        name: 'ownerId',
+      },
+      constraints: false,
+    });
+
+    db.documents.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.documents.hasMany(db.file, {
+      as: 'files',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.documents.getTableName(),
+        belongsToColumn: 'files',
+      },
+    });
+
+
+    db.documents.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.documents.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return documents;
+};
+
+
diff --git a/backend/src/db/models/file.js b/backend/src/db/models/file.js
new file mode 100644
index 0000000..7703bb6
--- /dev/null
+++ b/backend/src/db/models/file.js
@@ -0,0 +1,53 @@
+module.exports = function(sequelize, DataTypes) {
+  const file = sequelize.define(
+    'file',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+      belongsTo: DataTypes.STRING(255),
+      belongsToId: DataTypes.UUID,
+      belongsToColumn: DataTypes.STRING(255),
+      name: {
+        type: DataTypes.STRING(2083),
+        allowNull: false,
+        validate: {
+          notEmpty: true,
+        },
+      },
+      sizeInBytes: {
+        type: DataTypes.INTEGER,
+        allowNull: true,
+      },
+      privateUrl: {
+        type: DataTypes.STRING(2083),
+        allowNull: true,
+      },
+      publicUrl: {
+        type: DataTypes.STRING(2083),
+        allowNull: false,
+        validate: {
+          notEmpty: true,
+        },
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+    },
+  );
+
+  file.associate = (db) => {
+    db.file.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.file.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return file;
+};
diff --git a/backend/src/db/models/goods_receipt_lines.js b/backend/src/db/models/goods_receipt_lines.js
new file mode 100644
index 0000000..eae051d
--- /dev/null
+++ b/backend/src/db/models/goods_receipt_lines.js
@@ -0,0 +1,147 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const goods_receipt_lines = sequelize.define(
+    'goods_receipt_lines',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+quantity_received: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+quantity_accepted: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+quantity_rejected: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+quality_notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  goods_receipt_lines.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.goods_receipt_lines.belongsTo(db.goods_receipts, {
+      as: 'goods_receipt',
+      foreignKey: {
+        name: 'goods_receiptId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipt_lines.belongsTo(db.purchase_order_lines, {
+      as: 'purchase_order_line',
+      foreignKey: {
+        name: 'purchase_order_lineId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipt_lines.belongsTo(db.products, {
+      as: 'product',
+      foreignKey: {
+        name: 'productId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipt_lines.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.goods_receipt_lines.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.goods_receipt_lines.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return goods_receipt_lines;
+};
+
+
diff --git a/backend/src/db/models/goods_receipts.js b/backend/src/db/models/goods_receipts.js
new file mode 100644
index 0000000..1af2c5f
--- /dev/null
+++ b/backend/src/db/models/goods_receipts.js
@@ -0,0 +1,200 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const goods_receipts = sequelize.define(
+    'goods_receipts',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+grn_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+receipt_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+posted_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"draft",
+
+
+"posted",
+
+
+"cancelled"
+
+        ],
+
+      },
+
+remarks: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  goods_receipts.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.goods_receipts.hasMany(db.goods_receipt_lines, {
+      as: 'goods_receipt_lines_goods_receipt',
+      foreignKey: {
+          name: 'goods_receiptId',
+      },
+      constraints: false,
+    });
+
+
+    db.goods_receipts.hasMany(db.vendor_invoices, {
+      as: 'vendor_invoices_goods_receipt',
+      foreignKey: {
+          name: 'goods_receiptId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.goods_receipts.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipts.belongsTo(db.purchase_orders, {
+      as: 'purchase_order',
+      foreignKey: {
+        name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipts.belongsTo(db.users, {
+      as: 'received_by',
+      foreignKey: {
+        name: 'received_byId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipts.belongsTo(db.warehouses, {
+      as: 'warehouse',
+      foreignKey: {
+        name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+    db.goods_receipts.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.goods_receipts.hasMany(db.file, {
+      as: 'attachments',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.goods_receipts.getTableName(),
+        belongsToColumn: 'attachments',
+      },
+    });
+
+
+    db.goods_receipts.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.goods_receipts.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return goods_receipts;
+};
+
+
diff --git a/backend/src/db/models/index.js b/backend/src/db/models/index.js
new file mode 100644
index 0000000..4a3852f
--- /dev/null
+++ b/backend/src/db/models/index.js
@@ -0,0 +1,38 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const Sequelize = require('sequelize');
+const basename = path.basename(__filename);
+const env = process.env.NODE_ENV || 'development';
+const config = require("../db.config")[env];
+const db = {};
+
+let sequelize;
+console.log(env);
+if (config.use_env_variable) {
+  sequelize = new Sequelize(process.env[config.use_env_variable], config);
+} else {
+  sequelize = new Sequelize(config.database, config.username, config.password, config);
+}
+
+fs
+  .readdirSync(__dirname)
+  .filter(file => {
+    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
+  })
+  .forEach(file => {
+    const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes)
+    db[model.name] = model;
+  });
+
+Object.keys(db).forEach(modelName => {
+  if (db[modelName].associate) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;
diff --git a/backend/src/db/models/invoice_lines.js b/backend/src/db/models/invoice_lines.js
new file mode 100644
index 0000000..be8e32b
--- /dev/null
+++ b/backend/src/db/models/invoice_lines.js
@@ -0,0 +1,146 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const invoice_lines = sequelize.define(
+    'invoice_lines',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+quantity: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+unit_price: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+tax_rate: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+line_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  invoice_lines.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.invoice_lines.belongsTo(db.vendor_invoices, {
+      as: 'vendor_invoice',
+      foreignKey: {
+        name: 'vendor_invoiceId',
+      },
+      constraints: false,
+    });
+
+    db.invoice_lines.belongsTo(db.products, {
+      as: 'product',
+      foreignKey: {
+        name: 'productId',
+      },
+      constraints: false,
+    });
+
+    db.invoice_lines.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.invoice_lines.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.invoice_lines.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return invoice_lines;
+};
+
+
diff --git a/backend/src/db/models/organizations.js b/backend/src/db/models/organizations.js
new file mode 100644
index 0000000..a103047
--- /dev/null
+++ b/backend/src/db/models/organizations.js
@@ -0,0 +1,302 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const organizations = sequelize.define(
+    'organizations',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  organizations.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+    db.organizations.hasMany(db.users, {
+      as: 'users_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+    db.organizations.hasMany(db.companies, {
+      as: 'companies_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.user_role_assignments, {
+      as: 'user_role_assignments_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.role_permission_mappings, {
+      as: 'role_permission_mappings_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.vendors, {
+      as: 'vendors_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.warehouses, {
+      as: 'warehouses_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.product_categories, {
+      as: 'product_categories_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.products, {
+      as: 'products_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.purchase_requisitions, {
+      as: 'purchase_requisitions_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.purchase_requisition_lines, {
+      as: 'purchase_requisition_lines_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.purchase_orders, {
+      as: 'purchase_orders_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.purchase_order_lines, {
+      as: 'purchase_order_lines_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.goods_receipts, {
+      as: 'goods_receipts_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.goods_receipt_lines, {
+      as: 'goods_receipt_lines_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.vendor_invoices, {
+      as: 'vendor_invoices_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.invoice_lines, {
+      as: 'invoice_lines_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.payments, {
+      as: 'payments_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.departments, {
+      as: 'departments_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.document_types, {
+      as: 'document_types_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.documents, {
+      as: 'documents_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.document_links, {
+      as: 'document_links_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.approval_workflows, {
+      as: 'approval_workflows_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.approval_steps, {
+      as: 'approval_steps_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.approvals, {
+      as: 'approvals_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.activity_logs, {
+      as: 'activity_logs_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+    db.organizations.hasMany(db.ui_announcements, {
+      as: 'ui_announcements_organizations',
+      foreignKey: {
+          name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+//end loop
+
+
+
+
+
+
+    db.organizations.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.organizations.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return organizations;
+};
+
+
diff --git a/backend/src/db/models/payments.js b/backend/src/db/models/payments.js
new file mode 100644
index 0000000..8a4796b
--- /dev/null
+++ b/backend/src/db/models/payments.js
@@ -0,0 +1,207 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const payments = sequelize.define(
+    'payments',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+payment_reference: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+payment_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+amount: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+method: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"bank_transfer",
+
+
+"cash",
+
+
+"cheque",
+
+
+"card",
+
+
+"online"
+
+        ],
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"scheduled",
+
+
+"processing",
+
+
+"completed",
+
+
+"failed",
+
+
+"cancelled"
+
+        ],
+
+      },
+
+notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  payments.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.payments.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.payments.belongsTo(db.vendors, {
+      as: 'vendor',
+      foreignKey: {
+        name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+    db.payments.belongsTo(db.vendor_invoices, {
+      as: 'vendor_invoice',
+      foreignKey: {
+        name: 'vendor_invoiceId',
+      },
+      constraints: false,
+    });
+
+    db.payments.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.payments.hasMany(db.file, {
+      as: 'proof_files',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.payments.getTableName(),
+        belongsToColumn: 'proof_files',
+      },
+    });
+
+
+    db.payments.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.payments.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return payments;
+};
+
+
diff --git a/backend/src/db/models/permissions.js b/backend/src/db/models/permissions.js
new file mode 100644
index 0000000..670f974
--- /dev/null
+++ b/backend/src/db/models/permissions.js
@@ -0,0 +1,102 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const permissions = sequelize.define(
+    'permissions',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  permissions.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+    db.permissions.hasMany(db.role_permission_mappings, {
+      as: 'role_permission_mappings_permission',
+      foreignKey: {
+          name: 'permissionId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+
+
+
+    db.permissions.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.permissions.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return permissions;
+};
+
+
diff --git a/backend/src/db/models/product_categories.js b/backend/src/db/models/product_categories.js
new file mode 100644
index 0000000..166c562
--- /dev/null
+++ b/backend/src/db/models/product_categories.js
@@ -0,0 +1,132 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const product_categories = sequelize.define(
+    'product_categories',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+category_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+category_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  product_categories.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+    db.product_categories.hasMany(db.products, {
+      as: 'products_category',
+      foreignKey: {
+          name: 'categoryId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.product_categories.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.product_categories.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.product_categories.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.product_categories.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return product_categories;
+};
+
+
diff --git a/backend/src/db/models/products.js b/backend/src/db/models/products.js
new file mode 100644
index 0000000..8d8069b
--- /dev/null
+++ b/backend/src/db/models/products.js
@@ -0,0 +1,238 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const products = sequelize.define(
+    'products',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+product_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+sku: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+barcode: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+product_type: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"stock",
+
+
+"service",
+
+
+"consumable"
+
+        ],
+
+      },
+
+uom: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+standard_cost: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+purchase_price: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+sales_price: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  products.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.products.hasMany(db.purchase_requisition_lines, {
+      as: 'purchase_requisition_lines_product',
+      foreignKey: {
+          name: 'productId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.products.hasMany(db.purchase_order_lines, {
+      as: 'purchase_order_lines_product',
+      foreignKey: {
+          name: 'productId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.products.hasMany(db.goods_receipt_lines, {
+      as: 'goods_receipt_lines_product',
+      foreignKey: {
+          name: 'productId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.products.hasMany(db.invoice_lines, {
+      as: 'invoice_lines_product',
+      foreignKey: {
+          name: 'productId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.products.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.products.belongsTo(db.product_categories, {
+      as: 'category',
+      foreignKey: {
+        name: 'categoryId',
+      },
+      constraints: false,
+    });
+
+    db.products.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.products.hasMany(db.file, {
+      as: 'images',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.products.getTableName(),
+        belongsToColumn: 'images',
+      },
+    });
+
+
+    db.products.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.products.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return products;
+};
+
+
diff --git a/backend/src/db/models/purchase_order_lines.js b/backend/src/db/models/purchase_order_lines.js
new file mode 100644
index 0000000..d2922d4
--- /dev/null
+++ b/backend/src/db/models/purchase_order_lines.js
@@ -0,0 +1,169 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const purchase_order_lines = sequelize.define(
+    'purchase_order_lines',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+quantity: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+unit_price: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+tax_rate: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+discount_rate: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+line_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  purchase_order_lines.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.purchase_order_lines.hasMany(db.goods_receipt_lines, {
+      as: 'goods_receipt_lines_purchase_order_line',
+      foreignKey: {
+          name: 'purchase_order_lineId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.purchase_order_lines.belongsTo(db.purchase_orders, {
+      as: 'purchase_order',
+      foreignKey: {
+        name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_order_lines.belongsTo(db.products, {
+      as: 'product',
+      foreignKey: {
+        name: 'productId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_order_lines.belongsTo(db.warehouses, {
+      as: 'warehouse',
+      foreignKey: {
+        name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_order_lines.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.purchase_order_lines.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.purchase_order_lines.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return purchase_order_lines;
+};
+
+
diff --git a/backend/src/db/models/purchase_orders.js b/backend/src/db/models/purchase_orders.js
new file mode 100644
index 0000000..8576d85
--- /dev/null
+++ b/backend/src/db/models/purchase_orders.js
@@ -0,0 +1,276 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const purchase_orders = sequelize.define(
+    'purchase_orders',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+po_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+order_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+expected_delivery_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"draft",
+
+
+"sent",
+
+
+"confirmed",
+
+
+"partially_received",
+
+
+"received",
+
+
+"cancelled",
+
+
+"closed"
+
+        ],
+
+      },
+
+currency: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"USD",
+
+
+"EUR",
+
+
+"GBP",
+
+
+"AED",
+
+
+"SAR",
+
+
+"INR"
+
+        ],
+
+      },
+
+subtotal: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+tax_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+discount_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+grand_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  purchase_orders.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.purchase_orders.hasMany(db.purchase_order_lines, {
+      as: 'purchase_order_lines_purchase_order',
+      foreignKey: {
+          name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+
+    db.purchase_orders.hasMany(db.goods_receipts, {
+      as: 'goods_receipts_purchase_order',
+      foreignKey: {
+          name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.purchase_orders.hasMany(db.vendor_invoices, {
+      as: 'vendor_invoices_purchase_order',
+      foreignKey: {
+          name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.purchase_orders.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_orders.belongsTo(db.vendors, {
+      as: 'vendor',
+      foreignKey: {
+        name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_orders.belongsTo(db.users, {
+      as: 'buyer',
+      foreignKey: {
+        name: 'buyerId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_orders.belongsTo(db.purchase_requisitions, {
+      as: 'source_requisition',
+      foreignKey: {
+        name: 'source_requisitionId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_orders.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.purchase_orders.hasMany(db.file, {
+      as: 'attachments',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.purchase_orders.getTableName(),
+        belongsToColumn: 'attachments',
+      },
+    });
+
+
+    db.purchase_orders.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.purchase_orders.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return purchase_orders;
+};
+
+
diff --git a/backend/src/db/models/purchase_requisition_lines.js b/backend/src/db/models/purchase_requisition_lines.js
new file mode 100644
index 0000000..aa2d1aa
--- /dev/null
+++ b/backend/src/db/models/purchase_requisition_lines.js
@@ -0,0 +1,147 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const purchase_requisition_lines = sequelize.define(
+    'purchase_requisition_lines',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+description: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+quantity: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+unit_price_estimate: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+line_total_estimate: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  purchase_requisition_lines.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.purchase_requisition_lines.belongsTo(db.purchase_requisitions, {
+      as: 'purchase_requisition',
+      foreignKey: {
+        name: 'purchase_requisitionId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisition_lines.belongsTo(db.products, {
+      as: 'product',
+      foreignKey: {
+        name: 'productId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisition_lines.belongsTo(db.warehouses, {
+      as: 'warehouse',
+      foreignKey: {
+        name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisition_lines.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.purchase_requisition_lines.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.purchase_requisition_lines.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return purchase_requisition_lines;
+};
+
+
diff --git a/backend/src/db/models/purchase_requisitions.js b/backend/src/db/models/purchase_requisitions.js
new file mode 100644
index 0000000..6bb7e59
--- /dev/null
+++ b/backend/src/db/models/purchase_requisitions.js
@@ -0,0 +1,208 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const purchase_requisitions = sequelize.define(
+    'purchase_requisitions',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+requisition_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+requested_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+needed_by: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"draft",
+
+
+"submitted",
+
+
+"approved",
+
+
+"rejected",
+
+
+"cancelled",
+
+
+"converted_to_po"
+
+        ],
+
+      },
+
+reason: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+estimated_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  purchase_requisitions.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.purchase_requisitions.hasMany(db.purchase_requisition_lines, {
+      as: 'purchase_requisition_lines_purchase_requisition',
+      foreignKey: {
+          name: 'purchase_requisitionId',
+      },
+      constraints: false,
+    });
+
+
+    db.purchase_requisitions.hasMany(db.purchase_orders, {
+      as: 'purchase_orders_source_requisition',
+      foreignKey: {
+          name: 'source_requisitionId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.purchase_requisitions.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisitions.belongsTo(db.users, {
+      as: 'requested_by',
+      foreignKey: {
+        name: 'requested_byId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisitions.belongsTo(db.departments, {
+      as: 'department',
+      foreignKey: {
+        name: 'departmentId',
+      },
+      constraints: false,
+    });
+
+    db.purchase_requisitions.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.purchase_requisitions.hasMany(db.file, {
+      as: 'attachments',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.purchase_requisitions.getTableName(),
+        belongsToColumn: 'attachments',
+      },
+    });
+
+
+    db.purchase_requisitions.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.purchase_requisitions.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return purchase_requisitions;
+};
+
+
diff --git a/backend/src/db/models/role_permission_mappings.js b/backend/src/db/models/role_permission_mappings.js
new file mode 100644
index 0000000..8174674
--- /dev/null
+++ b/backend/src/db/models/role_permission_mappings.js
@@ -0,0 +1,121 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const role_permission_mappings = sequelize.define(
+    'role_permission_mappings',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+is_allowed: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  role_permission_mappings.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.role_permission_mappings.belongsTo(db.roles, {
+      as: 'role',
+      foreignKey: {
+        name: 'roleId',
+      },
+      constraints: false,
+    });
+
+    db.role_permission_mappings.belongsTo(db.permissions, {
+      as: 'permission',
+      foreignKey: {
+        name: 'permissionId',
+      },
+      constraints: false,
+    });
+
+    db.role_permission_mappings.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.role_permission_mappings.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.role_permission_mappings.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return role_permission_mappings;
+};
+
+
diff --git a/backend/src/db/models/roles.js b/backend/src/db/models/roles.js
new file mode 100644
index 0000000..c94f2b0
--- /dev/null
+++ b/backend/src/db/models/roles.js
@@ -0,0 +1,161 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const roles = sequelize.define(
+    'roles',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+role_customization: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+globalAccess: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  roles.associate = (db) => {
+
+    db.roles.belongsToMany(db.permissions, {
+      as: 'permissions',
+      foreignKey: {
+        name: 'roles_permissionsId',
+      },
+      constraints: false,
+      through: 'rolesPermissionsPermissions',
+    });
+
+    db.roles.belongsToMany(db.permissions, {
+      as: 'permissions_filter',
+      foreignKey: {
+        name: 'roles_permissionsId',
+      },
+      constraints: false,
+      through: 'rolesPermissionsPermissions',
+    });
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+    db.roles.hasMany(db.users, {
+      as: 'users_app_role',
+      foreignKey: {
+          name: 'app_roleId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+    db.roles.hasMany(db.user_role_assignments, {
+      as: 'user_role_assignments_role',
+      foreignKey: {
+          name: 'roleId',
+      },
+      constraints: false,
+    });
+
+
+    db.roles.hasMany(db.role_permission_mappings, {
+      as: 'role_permission_mappings_role',
+      foreignKey: {
+          name: 'roleId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.roles.hasMany(db.approval_steps, {
+      as: 'approval_steps_approver_role',
+      foreignKey: {
+          name: 'approver_roleId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+//end loop
+
+
+
+
+
+
+    db.roles.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.roles.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return roles;
+};
+
+
diff --git a/backend/src/db/models/ui_announcements.js b/backend/src/db/models/ui_announcements.js
new file mode 100644
index 0000000..8332345
--- /dev/null
+++ b/backend/src/db/models/ui_announcements.js
@@ -0,0 +1,166 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const ui_announcements = sequelize.define(
+    'ui_announcements',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+headline: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+content: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+audience: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"all_users",
+
+
+"admins",
+
+
+"buyers",
+
+
+"finance",
+
+
+"warehouse"
+
+        ],
+
+      },
+
+publish_from: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+publish_to: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  ui_announcements.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.ui_announcements.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.ui_announcements.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.ui_announcements.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.ui_announcements.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return ui_announcements;
+};
+
+
diff --git a/backend/src/db/models/user_role_assignments.js b/backend/src/db/models/user_role_assignments.js
new file mode 100644
index 0000000..92489fa
--- /dev/null
+++ b/backend/src/db/models/user_role_assignments.js
@@ -0,0 +1,143 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const user_role_assignments = sequelize.define(
+    'user_role_assignments',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+effective_from: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+effective_to: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+is_primary: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  user_role_assignments.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.user_role_assignments.belongsTo(db.users, {
+      as: 'user',
+      foreignKey: {
+        name: 'userId',
+      },
+      constraints: false,
+    });
+
+    db.user_role_assignments.belongsTo(db.roles, {
+      as: 'role',
+      foreignKey: {
+        name: 'roleId',
+      },
+      constraints: false,
+    });
+
+    db.user_role_assignments.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.user_role_assignments.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.user_role_assignments.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.user_role_assignments.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return user_role_assignments;
+};
+
+
diff --git a/backend/src/db/models/users.js b/backend/src/db/models/users.js
new file mode 100644
index 0000000..09908ee
--- /dev/null
+++ b/backend/src/db/models/users.js
@@ -0,0 +1,332 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const users = sequelize.define(
+    'users',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+firstName: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+lastName: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+phoneNumber: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+email: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+disabled: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+password: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+emailVerified: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+emailVerificationToken: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+emailVerificationTokenExpiresAt: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+passwordResetToken: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+passwordResetTokenExpiresAt: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+provider: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  users.associate = (db) => {
+
+    db.users.belongsToMany(db.permissions, {
+      as: 'custom_permissions',
+      foreignKey: {
+        name: 'users_custom_permissionsId',
+      },
+      constraints: false,
+      through: 'usersCustom_permissionsPermissions',
+    });
+
+    db.users.belongsToMany(db.permissions, {
+      as: 'custom_permissions_filter',
+      foreignKey: {
+        name: 'users_custom_permissionsId',
+      },
+      constraints: false,
+      through: 'usersCustom_permissionsPermissions',
+    });
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+    db.users.hasMany(db.user_role_assignments, {
+      as: 'user_role_assignments_user',
+      foreignKey: {
+          name: 'userId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+    db.users.hasMany(db.purchase_requisitions, {
+      as: 'purchase_requisitions_requested_by',
+      foreignKey: {
+          name: 'requested_byId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.users.hasMany(db.purchase_orders, {
+      as: 'purchase_orders_buyer',
+      foreignKey: {
+          name: 'buyerId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.users.hasMany(db.goods_receipts, {
+      as: 'goods_receipts_received_by',
+      foreignKey: {
+          name: 'received_byId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+    db.users.hasMany(db.departments, {
+      as: 'departments_manager',
+      foreignKey: {
+          name: 'managerId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.users.hasMany(db.documents, {
+      as: 'documents_owner',
+      foreignKey: {
+          name: 'ownerId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+    db.users.hasMany(db.approvals, {
+      as: 'approvals_requested_by',
+      foreignKey: {
+          name: 'requested_byId',
+      },
+      constraints: false,
+    });
+
+    db.users.hasMany(db.approvals, {
+      as: 'approvals_assigned_to',
+      foreignKey: {
+          name: 'assigned_toId',
+      },
+      constraints: false,
+    });
+
+
+    db.users.hasMany(db.activity_logs, {
+      as: 'activity_logs_actor',
+      foreignKey: {
+          name: 'actorId',
+      },
+      constraints: false,
+    });
+
+
+
+
+//end loop
+
+
+
+    db.users.belongsTo(db.roles, {
+      as: 'app_role',
+      foreignKey: {
+        name: 'app_roleId',
+      },
+      constraints: false,
+    });
+
+    db.users.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.users.hasMany(db.file, {
+      as: 'avatar',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.users.getTableName(),
+        belongsToColumn: 'avatar',
+      },
+    });
+
+
+    db.users.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.users.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+    users.beforeCreate((users, options) => {
+        users = trimStringFields(users);
+
+    if (users.provider !== providers.LOCAL && Object.values(providers).indexOf(users.provider) > -1) {
+        users.emailVerified = true;
+
+        if (!users.password) {
+            const password = crypto
+                .randomBytes(20)
+                .toString('hex');
+
+            const hashedPassword = bcrypt.hashSync(
+            password,
+            config.bcrypt.saltRounds,
+        );
+
+            users.password = hashedPassword
+            }
+        }
+    });
+
+  users.beforeUpdate((users, options) => {
+    users = trimStringFields(users);
+  });
+  
+
+  return users;
+};
+
+
+function trimStringFields(users) {
+  users.email = users.email.trim();
+
+  users.firstName = users.firstName
+    ? users.firstName.trim()
+    : null;
+
+  users.lastName = users.lastName
+    ? users.lastName.trim()
+    : null;
+
+  return users;
+}
+
diff --git a/backend/src/db/models/vendor_invoices.js b/backend/src/db/models/vendor_invoices.js
new file mode 100644
index 0000000..e28acef
--- /dev/null
+++ b/backend/src/db/models/vendor_invoices.js
@@ -0,0 +1,258 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const vendor_invoices = sequelize.define(
+    'vendor_invoices',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+invoice_number: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+invoice_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+due_date: {
+        type: DataTypes.DATE,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"draft",
+
+
+"submitted",
+
+
+"approved",
+
+
+"rejected",
+
+
+"paid",
+
+
+"void"
+
+        ],
+
+      },
+
+currency: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"USD",
+
+
+"EUR",
+
+
+"GBP",
+
+
+"AED",
+
+
+"SAR",
+
+
+"INR"
+
+        ],
+
+      },
+
+subtotal: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+tax_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+grand_total: {
+        type: DataTypes.DECIMAL,
+      
+      
+
+      },
+
+notes: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  vendor_invoices.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.vendor_invoices.hasMany(db.invoice_lines, {
+      as: 'invoice_lines_vendor_invoice',
+      foreignKey: {
+          name: 'vendor_invoiceId',
+      },
+      constraints: false,
+    });
+
+
+    db.vendor_invoices.hasMany(db.payments, {
+      as: 'payments_vendor_invoice',
+      foreignKey: {
+          name: 'vendor_invoiceId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.vendor_invoices.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.vendor_invoices.belongsTo(db.vendors, {
+      as: 'vendor',
+      foreignKey: {
+        name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+    db.vendor_invoices.belongsTo(db.purchase_orders, {
+      as: 'purchase_order',
+      foreignKey: {
+        name: 'purchase_orderId',
+      },
+      constraints: false,
+    });
+
+    db.vendor_invoices.belongsTo(db.goods_receipts, {
+      as: 'goods_receipt',
+      foreignKey: {
+        name: 'goods_receiptId',
+      },
+      constraints: false,
+    });
+
+    db.vendor_invoices.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.vendor_invoices.hasMany(db.file, {
+      as: 'invoice_files',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.vendor_invoices.getTableName(),
+        belongsToColumn: 'invoice_files',
+      },
+    });
+
+
+    db.vendor_invoices.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.vendor_invoices.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return vendor_invoices;
+};
+
+
diff --git a/backend/src/db/models/vendors.js b/backend/src/db/models/vendors.js
new file mode 100644
index 0000000..e72b031
--- /dev/null
+++ b/backend/src/db/models/vendors.js
@@ -0,0 +1,195 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const vendors = sequelize.define(
+    'vendors',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+vendor_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+vendor_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+contact_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+email: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+phone: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+address: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+status: {
+        type: DataTypes.ENUM,
+      
+      
+
+        values: [
+
+"active",
+
+
+"on_hold",
+
+
+"inactive"
+
+        ],
+
+      },
+
+payment_terms: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  vendors.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.vendors.hasMany(db.purchase_orders, {
+      as: 'purchase_orders_vendor',
+      foreignKey: {
+          name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+    db.vendors.hasMany(db.vendor_invoices, {
+      as: 'vendor_invoices_vendor',
+      foreignKey: {
+          name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.vendors.hasMany(db.payments, {
+      as: 'payments_vendor',
+      foreignKey: {
+          name: 'vendorId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.vendors.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.vendors.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.vendors.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.vendors.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return vendors;
+};
+
+
diff --git a/backend/src/db/models/warehouses.js b/backend/src/db/models/warehouses.js
new file mode 100644
index 0000000..b4e8b7c
--- /dev/null
+++ b/backend/src/db/models/warehouses.js
@@ -0,0 +1,168 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function(sequelize, DataTypes) {
+  const warehouses = sequelize.define(
+    'warehouses',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+warehouse_name: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+warehouse_code: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+address: {
+        type: DataTypes.TEXT,
+      
+      
+
+      },
+
+is_default: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+is_active: {
+        type: DataTypes.BOOLEAN,
+      
+        allowNull: false,
+        defaultValue: false,
+      
+      
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  warehouses.associate = (db) => {
+
+
+/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    db.warehouses.hasMany(db.purchase_requisition_lines, {
+      as: 'purchase_requisition_lines_warehouse',
+      foreignKey: {
+          name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+
+
+    db.warehouses.hasMany(db.purchase_order_lines, {
+      as: 'purchase_order_lines_warehouse',
+      foreignKey: {
+          name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+
+    db.warehouses.hasMany(db.goods_receipts, {
+      as: 'goods_receipts_warehouse',
+      foreignKey: {
+          name: 'warehouseId',
+      },
+      constraints: false,
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//end loop
+
+
+
+    db.warehouses.belongsTo(db.companies, {
+      as: 'company',
+      foreignKey: {
+        name: 'companyId',
+      },
+      constraints: false,
+    });
+
+    db.warehouses.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+
+
+
+    db.warehouses.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.warehouses.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+
+
+  return warehouses;
+};
+
+
diff --git a/backend/src/db/reset.js b/backend/src/db/reset.js
new file mode 100644
index 0000000..5904d4b
--- /dev/null
+++ b/backend/src/db/reset.js
@@ -0,0 +1,16 @@
+const db = require('./models');
+const {execSync} = require("child_process");
+
+console.log('Resetting Database');
+
+db.sequelize
+  .sync({ force: true })
+  .then(() => {
+    execSync("sequelize db:seed:all");
+    console.log('OK');
+    process.exit();
+  })
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
diff --git a/backend/src/db/seeders/20200430130759-admin-user.js b/backend/src/db/seeders/20200430130759-admin-user.js
new file mode 100644
index 0000000..15022fe
--- /dev/null
+++ b/backend/src/db/seeders/20200430130759-admin-user.js
@@ -0,0 +1,77 @@
+'use strict';
+const bcrypt = require("bcrypt");
+const config = require("../../config");
+
+const ids = [
+    '193bf4b5-9f07-4bd5-9a43-e7e41f3e96af',
+    'af5a87be-8f9c-4630-902a-37a60b7005ba',
+    '5bc531ab-611f-41f3-9373-b7cc5d09c93d',
+    'ab4cf9bf-4eef-4107-b73d-9d0274cf69bc',
+]
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    let admin_hash = bcrypt.hashSync(config.admin_pass, config.bcrypt.saltRounds);
+    let user_hash = bcrypt.hashSync(config.user_pass, config.bcrypt.saltRounds);
+
+    try {
+    await queryInterface.bulkInsert('users', [
+      {
+        id: ids[0],
+        firstName: 'Admin',
+        email: config.admin_email,
+        emailVerified: true,
+        provider: config.providers.LOCAL,
+        password: admin_hash,
+        createdAt: new Date(),
+        updatedAt: new Date()
+      },
+      {
+        id: ids[1],
+        firstName: 'John',
+        email: 'john@doe.com',
+        emailVerified: true,
+        provider: config.providers.LOCAL,
+        password: user_hash,
+        createdAt: new Date(),
+        updatedAt: new Date()
+      },
+      {
+        id: ids[2],
+        firstName: 'Client',
+        email: 'client@hello.com',
+        emailVerified: true,
+        provider: config.providers.LOCAL,
+        password: user_hash,
+        createdAt: new Date(),
+        updatedAt: new Date()
+      },
+      {
+        id: ids[3],
+        firstName: 'Super Admin',
+        email: 'super_admin@flatlogic.com',
+        emailVerified: true,
+        provider: config.providers.LOCAL,
+        password: admin_hash,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+    ]);
+    } catch (error) {
+      console.error('Error during bulkInsert:', error);
+      throw error;
+    }
+  },
+  down: async (queryInterface, Sequelize) => {
+    try {
+    await queryInterface.bulkDelete('users', {
+      id: {
+        [Sequelize.Op.in]: ids,
+      },
+    }, {});
+  } catch (error) {
+    console.error('Error during bulkDelete:', error);
+    throw error;
+  }
+}
+}
diff --git a/backend/src/db/seeders/20200430130760-user-roles.js b/backend/src/db/seeders/20200430130760-user-roles.js
new file mode 100644
index 0000000..496f463
--- /dev/null
+++ b/backend/src/db/seeders/20200430130760-user-roles.js
@@ -0,0 +1,699 @@
+
+const { v4: uuid } = require("uuid");
+
+module.exports = {
+  /**
+   * @param{import("sequelize").QueryInterface} queryInterface
+   * @return {Promise<void>}
+   */
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    /** @type {Map<string, string>} */
+    const idMap = new Map();
+
+    /**
+     * @param {string} key
+     * @return {string}
+     */
+    function getId(key) {
+      if (idMap.has(key)) {
+        return idMap.get(key);
+      }
+      const id = uuid();
+      idMap.set(key, id);
+      return id;
+    }
+
+    await queryInterface.bulkInsert("roles", [
+      
+      { id: getId("SuperAdmin"), name: "Super Administrator", createdAt, updatedAt },
+      
+      
+      { id: getId("Administrator"), name: "Administrator", createdAt, updatedAt },
+      
+       
+        { id: getId("User"), name: "User", createdAt, updatedAt },
+      
+      
+      { id: getId("Public"), name: "Public", createdAt, updatedAt },
+    ]);
+
+    /**
+     * @param {string} name
+     */
+    function createPermissions(name) {
+      return [
+        { id: getId(`CREATE_${name.toUpperCase()}`), createdAt, updatedAt, name: `CREATE_${name.toUpperCase()}` },
+        { id: getId(`READ_${name.toUpperCase()}`), createdAt, updatedAt, name: `READ_${name.toUpperCase()}` },
+        { id: getId(`UPDATE_${name.toUpperCase()}`), createdAt, updatedAt, name: `UPDATE_${name.toUpperCase()}` },
+        { id: getId(`DELETE_${name.toUpperCase()}`), createdAt, updatedAt, name: `DELETE_${name.toUpperCase()}` }
+      ];
+    }
+
+    const entities = [
+      "users","roles","permissions","organizations","companies","user_role_assignments","role_permission_mappings","vendors","warehouses","product_categories","products","purchase_requisitions","purchase_requisition_lines","purchase_orders","purchase_order_lines","goods_receipts","goods_receipt_lines","vendor_invoices","invoice_lines","payments","departments","document_types","documents","document_links","approval_workflows","approval_steps","approvals","activity_logs","ui_announcements",,
+    ];
+await queryInterface.bulkInsert("permissions", entities.flatMap(createPermissions));
+await queryInterface.bulkInsert("permissions", [{ id: getId(`READ_API_DOCS`), createdAt, updatedAt, name: `READ_API_DOCS` }]);
+await queryInterface.bulkInsert("permissions", [{ id: getId(`CREATE_SEARCH`), createdAt, updatedAt, name: `CREATE_SEARCH`}]);
+
+await queryInterface.bulkUpdate('roles', { globalAccess: true }, { id: getId('SuperAdmin') });
+
+
+await queryInterface.sequelize.query(`create table "rolesPermissionsPermissions"
+(
+"createdAt"           timestamp with time zone not null,
+"updatedAt"           timestamp with time zone not null,
+"roles_permissionsId" uuid                     not null,
+"permissionId"        uuid                     not null,
+primary key ("roles_permissionsId", "permissionId")
+);`);
+
+
+await queryInterface.bulkInsert("rolesPermissionsPermissions", [
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_USERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_USERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_USERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_USERS') },
+          
+    
+  
+    
+    
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_COMPANIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_COMPANIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_COMPANIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_COMPANIES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_USER_ROLE_ASSIGNMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_USER_ROLE_ASSIGNMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_USER_ROLE_ASSIGNMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_USER_ROLE_ASSIGNMENTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_ROLE_PERMISSION_MAPPINGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_ROLE_PERMISSION_MAPPINGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_ROLE_PERMISSION_MAPPINGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_ROLE_PERMISSION_MAPPINGS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_VENDORS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_VENDORS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_VENDORS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_VENDORS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_WAREHOUSES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_WAREHOUSES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_WAREHOUSES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_WAREHOUSES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PRODUCT_CATEGORIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PRODUCT_CATEGORIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PRODUCT_CATEGORIES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PRODUCT_CATEGORIES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PRODUCTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PRODUCTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PRODUCTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PRODUCTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PURCHASE_REQUISITIONS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PURCHASE_REQUISITIONS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PURCHASE_REQUISITIONS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PURCHASE_REQUISITIONS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PURCHASE_REQUISITION_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PURCHASE_REQUISITION_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PURCHASE_REQUISITION_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PURCHASE_REQUISITION_LINES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PURCHASE_ORDERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PURCHASE_ORDERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PURCHASE_ORDERS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PURCHASE_ORDERS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PURCHASE_ORDER_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PURCHASE_ORDER_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PURCHASE_ORDER_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PURCHASE_ORDER_LINES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_GOODS_RECEIPTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_GOODS_RECEIPTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_GOODS_RECEIPTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_GOODS_RECEIPTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_GOODS_RECEIPT_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_GOODS_RECEIPT_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_GOODS_RECEIPT_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_GOODS_RECEIPT_LINES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_VENDOR_INVOICES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_VENDOR_INVOICES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_VENDOR_INVOICES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_VENDOR_INVOICES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_INVOICE_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_INVOICE_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_INVOICE_LINES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_INVOICE_LINES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_PAYMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_PAYMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_PAYMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_PAYMENTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_DEPARTMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_DEPARTMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_DEPARTMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_DEPARTMENTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_DOCUMENT_TYPES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_DOCUMENT_TYPES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_DOCUMENT_TYPES') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_DOCUMENT_TYPES') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_DOCUMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_DOCUMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_DOCUMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_DOCUMENTS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_DOCUMENT_LINKS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_DOCUMENT_LINKS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_DOCUMENT_LINKS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_DOCUMENT_LINKS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_APPROVAL_WORKFLOWS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_APPROVAL_WORKFLOWS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_APPROVAL_WORKFLOWS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_APPROVAL_WORKFLOWS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_APPROVAL_STEPS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_APPROVAL_STEPS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_APPROVAL_STEPS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_APPROVAL_STEPS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_APPROVALS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_APPROVALS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_APPROVALS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_APPROVALS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_ACTIVITY_LOGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_ACTIVITY_LOGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_ACTIVITY_LOGS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_ACTIVITY_LOGS') },
+          
+    
+  
+    
+    
+      
+      
+           
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_UI_ANNOUNCEMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('READ_UI_ANNOUNCEMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('UPDATE_UI_ANNOUNCEMENTS') },
+              { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('DELETE_UI_ANNOUNCEMENTS') },
+          
+    
+  
+    
+     
+  
+      
+       
+         { createdAt, updatedAt, roles_permissionsId: getId("User"), permissionId: getId('CREATE_SEARCH') },
+      
+      
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_USERS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_COMPANIES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_USER_ROLE_ASSIGNMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_ROLE_PERMISSION_MAPPINGS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_VENDORS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_WAREHOUSES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PRODUCT_CATEGORIES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PRODUCTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PURCHASE_REQUISITIONS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PURCHASE_REQUISITION_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PURCHASE_ORDERS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PURCHASE_ORDER_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_GOODS_RECEIPTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_GOODS_RECEIPT_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_VENDOR_INVOICES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_INVOICE_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_PAYMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_DEPARTMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_DOCUMENT_TYPES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_DOCUMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_DOCUMENT_LINKS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_APPROVAL_WORKFLOWS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_APPROVAL_STEPS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_APPROVALS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_ACTIVITY_LOGS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('UPDATE_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('DELETE_UI_ANNOUNCEMENTS') },
+    
+    
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_USERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_USERS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_ROLES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_ROLES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_ROLES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_ROLES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PERMISSIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PERMISSIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PERMISSIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PERMISSIONS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_ORGANIZATIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_ORGANIZATIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_ORGANIZATIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_ORGANIZATIONS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_COMPANIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_COMPANIES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_USER_ROLE_ASSIGNMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_USER_ROLE_ASSIGNMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_ROLE_PERMISSION_MAPPINGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_ROLE_PERMISSION_MAPPINGS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_VENDORS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_VENDORS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_WAREHOUSES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_WAREHOUSES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PRODUCT_CATEGORIES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PRODUCT_CATEGORIES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PRODUCTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PRODUCTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PURCHASE_REQUISITIONS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PURCHASE_REQUISITIONS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PURCHASE_REQUISITION_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PURCHASE_REQUISITION_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PURCHASE_ORDERS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PURCHASE_ORDERS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PURCHASE_ORDER_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PURCHASE_ORDER_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_GOODS_RECEIPTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_GOODS_RECEIPTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_GOODS_RECEIPT_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_GOODS_RECEIPT_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_VENDOR_INVOICES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_VENDOR_INVOICES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_INVOICE_LINES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_INVOICE_LINES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_PAYMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_PAYMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_DEPARTMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_DEPARTMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_DOCUMENT_TYPES') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_DOCUMENT_TYPES') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_DOCUMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_DOCUMENTS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_DOCUMENT_LINKS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_DOCUMENT_LINKS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_APPROVAL_WORKFLOWS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_APPROVAL_WORKFLOWS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_APPROVAL_STEPS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_APPROVAL_STEPS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_APPROVALS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_APPROVALS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_ACTIVITY_LOGS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_ACTIVITY_LOGS') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('UPDATE_UI_ANNOUNCEMENTS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('DELETE_UI_ANNOUNCEMENTS') },
+    
+    
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('READ_API_DOCS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("SuperAdmin"), permissionId: getId('CREATE_SEARCH') },
+    
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('READ_API_DOCS') },
+    { createdAt, updatedAt, roles_permissionsId: getId("Administrator"), permissionId: getId('CREATE_SEARCH') },
+    ]);
+
+
+  await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("SuperAdmin")}' WHERE "email"='super_admin@flatlogic.com'`);
+  await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("Administrator")}' WHERE "email"='admin@flatlogic.com'`);
+  
+   
+      
+       
+        await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("User")}' WHERE "email"='client@hello.com'`);
+        await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("User")}' WHERE "email"='john@doe.com'`);
+      
+      
+
+}
+};
+
diff --git a/backend/src/db/seeders/20231127130745-sample-data.js b/backend/src/db/seeders/20231127130745-sample-data.js
new file mode 100644
index 0000000..85d86c8
--- /dev/null
+++ b/backend/src/db/seeders/20231127130745-sample-data.js
@@ -0,0 +1,16311 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const db = require('../models');
+const Users = db.users;
+
+
+
+
+
+
+const Organizations = db.organizations;
+
+const Companies = db.companies;
+
+const UserRoleAssignments = db.user_role_assignments;
+
+const RolePermissionMappings = db.role_permission_mappings;
+
+const Vendors = db.vendors;
+
+const Warehouses = db.warehouses;
+
+const ProductCategories = db.product_categories;
+
+const Products = db.products;
+
+const PurchaseRequisitions = db.purchase_requisitions;
+
+const PurchaseRequisitionLines = db.purchase_requisition_lines;
+
+const PurchaseOrders = db.purchase_orders;
+
+const PurchaseOrderLines = db.purchase_order_lines;
+
+const GoodsReceipts = db.goods_receipts;
+
+const GoodsReceiptLines = db.goods_receipt_lines;
+
+const VendorInvoices = db.vendor_invoices;
+
+const InvoiceLines = db.invoice_lines;
+
+const Payments = db.payments;
+
+const Departments = db.departments;
+
+const DocumentTypes = db.document_types;
+
+const Documents = db.documents;
+
+const DocumentLinks = db.document_links;
+
+const ApprovalWorkflows = db.approval_workflows;
+
+const ApprovalSteps = db.approval_steps;
+
+const Approvals = db.approvals;
+
+const ActivityLogs = db.activity_logs;
+
+const UiAnnouncements = db.ui_announcements;
+
+
+
+
+
+
+
+const OrganizationsData = [
+    
+    {
+    
+        
+        
+            
+                "name": "Marie Curie",
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "name": "Marie Curie",
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "name": "Marie Curie",
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "name": "Marie Curie",
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "name": "Marie Curie",
+            
+        
+    
+    },
+    
+];
+
+
+
+const CompaniesData = [
+    
+    {
+    
+        
+        
+            
+                "company_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "legal_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "tax_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "website": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "phone": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "email": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "address_line1": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address_line2": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "city": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "state": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "postal_code": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "country": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "company_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "legal_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "tax_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "website": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "phone": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "email": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address_line1": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address_line2": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "city": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "state": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "postal_code": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "country": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "company_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "legal_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "tax_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "website": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "phone": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "email": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "address_line1": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address_line2": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "city": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "state": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "postal_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "country": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "company_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "legal_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "tax_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "website": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "phone": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "email": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "address_line1": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address_line2": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "city": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "state": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "postal_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "country": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "company_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "legal_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "tax_number": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "website": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "phone": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "email": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address_line1": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "address_line2": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "city": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "state": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "postal_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "country": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const UserRoleAssignmentsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "effective_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "effective_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_primary": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "effective_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "effective_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_primary": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "effective_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "effective_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_primary": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "effective_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "effective_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_primary": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "effective_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "effective_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_primary": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const RolePermissionMappingsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_allowed": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_allowed": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_allowed": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_allowed": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_allowed": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const VendorsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "vendor_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "vendor_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "contact_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "email": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "phone": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "address": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "status": "active",
+            
+        
+    
+        
+        
+            
+                "payment_terms": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "vendor_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "vendor_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "contact_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "email": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "phone": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "on_hold",
+            
+        
+    
+        
+        
+            
+                "payment_terms": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "vendor_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "vendor_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "contact_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "email": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "phone": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "active",
+            
+        
+    
+        
+        
+            
+                "payment_terms": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "vendor_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "vendor_code": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "contact_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "email": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "phone": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "active",
+            
+        
+    
+        
+        
+            
+                "payment_terms": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "vendor_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "vendor_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "contact_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "email": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "phone": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "on_hold",
+            
+        
+    
+        
+        
+            
+                "payment_terms": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const WarehousesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "warehouse_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "warehouse_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "is_default": false,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "warehouse_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "warehouse_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "is_default": true,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "warehouse_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "warehouse_code": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "address": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "is_default": false,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "warehouse_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "warehouse_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "address": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "is_default": true,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "warehouse_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "warehouse_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "address": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "is_default": true,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ProductCategoriesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "category_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "category_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "category_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "category_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "category_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "category_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "description": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "category_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "category_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "category_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "category_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ProductsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "product_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "sku": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "barcode": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "product_type": "consumable",
+            
+        
+    
+        
+        
+            
+                "uom": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "standard_cost": 2.18,
+            
+        
+    
+        
+        
+            
+                "purchase_price": 4.61,
+            
+        
+    
+        
+        
+            
+                "sales_price": 4.68,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "product_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "sku": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "barcode": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "product_type": "service",
+            
+        
+    
+        
+        
+            
+                "uom": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "standard_cost": 6.19,
+            
+        
+    
+        
+        
+            
+                "purchase_price": 4.49,
+            
+        
+    
+        
+        
+            
+                "sales_price": 6.89,
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "product_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "sku": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "barcode": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "product_type": "stock",
+            
+        
+    
+        
+        
+            
+                "uom": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "standard_cost": 5.92,
+            
+        
+    
+        
+        
+            
+                "purchase_price": 6.78,
+            
+        
+    
+        
+        
+            
+                "sales_price": 3.36,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "description": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "product_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "sku": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "barcode": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "product_type": "stock",
+            
+        
+    
+        
+        
+            
+                "uom": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "standard_cost": 6.83,
+            
+        
+    
+        
+        
+            
+                "purchase_price": 4.7,
+            
+        
+    
+        
+        
+            
+                "sales_price": 7.48,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "product_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "sku": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "barcode": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "product_type": "service",
+            
+        
+    
+        
+        
+            
+                "uom": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "standard_cost": 3.18,
+            
+        
+    
+        
+        
+            
+                "purchase_price": 5.76,
+            
+        
+    
+        
+        
+            
+                "sales_price": 3.17,
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "images" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const PurchaseRequisitionsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requisition_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requested_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "needed_by": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "reason": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "estimated_total": 5.67,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requisition_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requested_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "needed_by": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "reason": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "estimated_total": 4.87,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requisition_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requested_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "needed_by": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "reason": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "estimated_total": 1.21,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requisition_number": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requested_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "needed_by": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "submitted",
+            
+        
+    
+        
+        
+            
+                "reason": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "estimated_total": 1.92,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requisition_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "requested_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "needed_by": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "reason": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "estimated_total": 2.86,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const PurchaseRequisitionLinesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "quantity": 8.88,
+            
+        
+    
+        
+        
+            
+                "unit_price_estimate": 3.69,
+            
+        
+    
+        
+        
+            
+                "line_total_estimate": 6.5,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "quantity": 8.56,
+            
+        
+    
+        
+        
+            
+                "unit_price_estimate": 4.35,
+            
+        
+    
+        
+        
+            
+                "line_total_estimate": 0.6,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "quantity": 4.63,
+            
+        
+    
+        
+        
+            
+                "unit_price_estimate": 0.29,
+            
+        
+    
+        
+        
+            
+                "line_total_estimate": 7.5,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "quantity": 9.19,
+            
+        
+    
+        
+        
+            
+                "unit_price_estimate": 2.39,
+            
+        
+    
+        
+        
+            
+                "line_total_estimate": 2.36,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "quantity": 8.91,
+            
+        
+    
+        
+        
+            
+                "unit_price_estimate": 1.42,
+            
+        
+    
+        
+        
+            
+                "line_total_estimate": 0.41,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const PurchaseOrdersData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "po_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "order_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "expected_delivery_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "closed",
+            
+        
+    
+        
+        
+            
+                "currency": "GBP",
+            
+        
+    
+        
+        
+            
+                "subtotal": 7.17,
+            
+        
+    
+        
+        
+            
+                "tax_total": 8.68,
+            
+        
+    
+        
+        
+            
+                "discount_total": 8.06,
+            
+        
+    
+        
+        
+            
+                "grand_total": 3.8,
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "po_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "order_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "expected_delivery_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "closed",
+            
+        
+    
+        
+        
+            
+                "currency": "GBP",
+            
+        
+    
+        
+        
+            
+                "subtotal": 3.21,
+            
+        
+    
+        
+        
+            
+                "tax_total": 5.57,
+            
+        
+    
+        
+        
+            
+                "discount_total": 3.7,
+            
+        
+    
+        
+        
+            
+                "grand_total": 6.86,
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "po_number": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "order_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "expected_delivery_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "confirmed",
+            
+        
+    
+        
+        
+            
+                "currency": "INR",
+            
+        
+    
+        
+        
+            
+                "subtotal": 9.71,
+            
+        
+    
+        
+        
+            
+                "tax_total": 6.19,
+            
+        
+    
+        
+        
+            
+                "discount_total": 6.97,
+            
+        
+    
+        
+        
+            
+                "grand_total": 4.45,
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "po_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "order_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "expected_delivery_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "sent",
+            
+        
+    
+        
+        
+            
+                "currency": "AED",
+            
+        
+    
+        
+        
+            
+                "subtotal": 9.94,
+            
+        
+    
+        
+        
+            
+                "tax_total": 2.42,
+            
+        
+    
+        
+        
+            
+                "discount_total": 7.02,
+            
+        
+    
+        
+        
+            
+                "grand_total": 4.77,
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "po_number": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "order_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "expected_delivery_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "confirmed",
+            
+        
+    
+        
+        
+            
+                "currency": "USD",
+            
+        
+    
+        
+        
+            
+                "subtotal": 1.56,
+            
+        
+    
+        
+        
+            
+                "tax_total": 4.71,
+            
+        
+    
+        
+        
+            
+                "discount_total": 3.37,
+            
+        
+    
+        
+        
+            
+                "grand_total": 9.46,
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const PurchaseOrderLinesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 7.67,
+            
+        
+    
+        
+        
+            
+                "unit_price": 8.82,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 1.12,
+            
+        
+    
+        
+        
+            
+                "discount_rate": 7.97,
+            
+        
+    
+        
+        
+            
+                "line_total": 9.19,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 0.94,
+            
+        
+    
+        
+        
+            
+                "unit_price": 9.18,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 7.52,
+            
+        
+    
+        
+        
+            
+                "discount_rate": 2.29,
+            
+        
+    
+        
+        
+            
+                "line_total": 1.65,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 3.89,
+            
+        
+    
+        
+        
+            
+                "unit_price": 1.41,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 2.41,
+            
+        
+    
+        
+        
+            
+                "discount_rate": 0.56,
+            
+        
+    
+        
+        
+            
+                "line_total": 8.48,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "quantity": 0.93,
+            
+        
+    
+        
+        
+            
+                "unit_price": 4.66,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 8.36,
+            
+        
+    
+        
+        
+            
+                "discount_rate": 0.06,
+            
+        
+    
+        
+        
+            
+                "line_total": 3.24,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 9.3,
+            
+        
+    
+        
+        
+            
+                "unit_price": 3.41,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 1.06,
+            
+        
+    
+        
+        
+            
+                "discount_rate": 6.4,
+            
+        
+    
+        
+        
+            
+                "line_total": 5.19,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const GoodsReceiptsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "grn_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "receipt_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "posted_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "draft",
+            
+        
+    
+        
+        
+            
+                "remarks": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "grn_number": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "receipt_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "posted_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "remarks": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "grn_number": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "receipt_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "posted_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "remarks": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "grn_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "receipt_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "posted_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "posted",
+            
+        
+    
+        
+        
+            
+                "remarks": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "grn_number": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "receipt_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "posted_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "draft",
+            
+        
+    
+        
+        
+            
+                "remarks": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const GoodsReceiptLinesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "quantity_received": 7.99,
+            
+        
+    
+        
+        
+            
+                "quantity_accepted": 4.15,
+            
+        
+    
+        
+        
+            
+                "quantity_rejected": 7.45,
+            
+        
+    
+        
+        
+            
+                "quality_notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "quantity_received": 8.43,
+            
+        
+    
+        
+        
+            
+                "quantity_accepted": 1.23,
+            
+        
+    
+        
+        
+            
+                "quantity_rejected": 6.62,
+            
+        
+    
+        
+        
+            
+                "quality_notes": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "quantity_received": 4.87,
+            
+        
+    
+        
+        
+            
+                "quantity_accepted": 0.59,
+            
+        
+    
+        
+        
+            
+                "quantity_rejected": 2.39,
+            
+        
+    
+        
+        
+            
+                "quality_notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "quantity_received": 7.03,
+            
+        
+    
+        
+        
+            
+                "quantity_accepted": 3.83,
+            
+        
+    
+        
+        
+            
+                "quantity_rejected": 8.8,
+            
+        
+    
+        
+        
+            
+                "quality_notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "quantity_received": 3.44,
+            
+        
+    
+        
+        
+            
+                "quantity_accepted": 9.36,
+            
+        
+    
+        
+        
+            
+                "quantity_rejected": 4.22,
+            
+        
+    
+        
+        
+            
+                "quality_notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const VendorInvoicesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_number": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "submitted",
+            
+        
+    
+        
+        
+            
+                "currency": "GBP",
+            
+        
+    
+        
+        
+            
+                "subtotal": 8.7,
+            
+        
+    
+        
+        
+            
+                "tax_total": 6.05,
+            
+        
+    
+        
+        
+            
+                "grand_total": 2.85,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_number": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "submitted",
+            
+        
+    
+        
+        
+            
+                "currency": "USD",
+            
+        
+    
+        
+        
+            
+                "subtotal": 2.36,
+            
+        
+    
+        
+        
+            
+                "tax_total": 9.07,
+            
+        
+    
+        
+        
+            
+                "grand_total": 1.12,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "submitted",
+            
+        
+    
+        
+        
+            
+                "currency": "INR",
+            
+        
+    
+        
+        
+            
+                "subtotal": 5.1,
+            
+        
+    
+        
+        
+            
+                "tax_total": 9.66,
+            
+        
+    
+        
+        
+            
+                "grand_total": 1.74,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "void",
+            
+        
+    
+        
+        
+            
+                "currency": "SAR",
+            
+        
+    
+        
+        
+            
+                "subtotal": 3.48,
+            
+        
+    
+        
+        
+            
+                "tax_total": 9.89,
+            
+        
+    
+        
+        
+            
+                "grand_total": 8.58,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "invoice_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "status": "void",
+            
+        
+    
+        
+        
+            
+                "currency": "GBP",
+            
+        
+    
+        
+        
+            
+                "subtotal": 8.05,
+            
+        
+    
+        
+        
+            
+                "tax_total": 7.62,
+            
+        
+    
+        
+        
+            
+                "grand_total": 7.29,
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const InvoiceLinesData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 8.95,
+            
+        
+    
+        
+        
+            
+                "unit_price": 5.95,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 8.36,
+            
+        
+    
+        
+        
+            
+                "line_total": 3.33,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "quantity": 5.33,
+            
+        
+    
+        
+        
+            
+                "unit_price": 0.41,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 0.88,
+            
+        
+    
+        
+        
+            
+                "line_total": 9.51,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "quantity": 5.5,
+            
+        
+    
+        
+        
+            
+                "unit_price": 4.76,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 3.06,
+            
+        
+    
+        
+        
+            
+                "line_total": 6.36,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "quantity": 4.14,
+            
+        
+    
+        
+        
+            
+                "unit_price": 2.03,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 3.64,
+            
+        
+    
+        
+        
+            
+                "line_total": 6.4,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "quantity": 4.52,
+            
+        
+    
+        
+        
+            
+                "unit_price": 0.71,
+            
+        
+    
+        
+        
+            
+                "tax_rate": 0.01,
+            
+        
+    
+        
+        
+            
+                "line_total": 9.74,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const PaymentsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "amount": 1.93,
+            
+        
+    
+        
+        
+            
+                "method": "cheque",
+            
+        
+    
+        
+        
+            
+                "status": "scheduled",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_reference": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "amount": 0.45,
+            
+        
+    
+        
+        
+            
+                "method": "cheque",
+            
+        
+    
+        
+        
+            
+                "status": "failed",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "amount": 6.07,
+            
+        
+    
+        
+        
+            
+                "method": "cheque",
+            
+        
+    
+        
+        
+            
+                "status": "failed",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "amount": 4.02,
+            
+        
+    
+        
+        
+            
+                "method": "cheque",
+            
+        
+    
+        
+        
+            
+                "status": "scheduled",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_reference": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "payment_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "amount": 0.0,
+            
+        
+    
+        
+        
+            
+                "method": "cash",
+            
+        
+    
+        
+        
+            
+                "status": "processing",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "notes": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const DepartmentsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "department_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "department_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "department_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "department_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "department_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "department_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "department_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "department_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "department_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "department_code": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const DocumentTypesData = [
+    
+    {
+    
+        
+        
+            
+                "type_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "type_code": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "module": "inventory",
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "type_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "type_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "module": "general",
+            
+        
+    
+        
+        
+            
+                "description": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "type_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "type_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "module": "procurement",
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "type_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "type_code": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "module": "general",
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                "type_name": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "type_code": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "module": "finance",
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const DocumentsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "title": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "approved",
+            
+        
+    
+        
+        
+            
+                "priority": "low",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "review_due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "summary": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "tags": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "title": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "priority": "high",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "review_due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "summary": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "tags": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_number": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "title": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "status": "in_review",
+            
+        
+    
+        
+        
+            
+                "priority": "normal",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "review_due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "summary": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "tags": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_number": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "title": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "status": "approved",
+            
+        
+    
+        
+        
+            
+                "priority": "high",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "review_due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "summary": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "tags": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_number": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "title": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "status": "draft",
+            
+        
+    
+        
+        
+            
+                "priority": "urgent",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "document_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "review_due_date": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "summary": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "files" field
+            
+        
+    
+        
+        
+            
+                "tags": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const DocumentLinksData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "source_type": "vendor_invoice",
+            
+        
+    
+        
+        
+            
+                "source_reference": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "notes": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "source_type": "goods_receipt",
+            
+        
+    
+        
+        
+            
+                "source_reference": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "source_type": "goods_receipt",
+            
+        
+    
+        
+        
+            
+                "source_reference": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "source_type": "goods_receipt",
+            
+        
+    
+        
+        
+            
+                "source_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "source_type": "vendor_invoice",
+            
+        
+    
+        
+        
+            
+                "source_reference": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "notes": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ApprovalWorkflowsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "workflow_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "applies_to": "vendor_invoice",
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "workflow_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "applies_to": "purchase_order",
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "workflow_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "applies_to": "purchase_requisition",
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                "description": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "workflow_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "applies_to": "document",
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                "description": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "workflow_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "applies_to": "purchase_requisition",
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                "description": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ApprovalStepsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "step_order": 3,
+            
+        
+    
+        
+        
+            
+                "step_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "min_amount": 7.14,
+            
+        
+    
+        
+        
+            
+                "max_amount": 7.96,
+            
+        
+    
+        
+        
+            
+                "is_required": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "step_order": 5,
+            
+        
+    
+        
+        
+            
+                "step_name": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "min_amount": 2.21,
+            
+        
+    
+        
+        
+            
+                "max_amount": 8.04,
+            
+        
+    
+        
+        
+            
+                "is_required": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "step_order": 2,
+            
+        
+    
+        
+        
+            
+                "step_name": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "min_amount": 4.88,
+            
+        
+    
+        
+        
+            
+                "max_amount": 7.63,
+            
+        
+    
+        
+        
+            
+                "is_required": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "step_order": 1,
+            
+        
+    
+        
+        
+            
+                "step_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "min_amount": 7.53,
+            
+        
+    
+        
+        
+            
+                "max_amount": 4.22,
+            
+        
+    
+        
+        
+            
+                "is_required": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "step_order": 2,
+            
+        
+    
+        
+        
+            
+                "step_name": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "min_amount": 0.79,
+            
+        
+    
+        
+        
+            
+                "max_amount": 3.69,
+            
+        
+    
+        
+        
+            
+                "is_required": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ApprovalsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "vendor_invoice",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "requested_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decided_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decision_notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "purchase_requisition",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "requested_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decided_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decision_notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "document",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "requested_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decided_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decision_notes": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "document",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "status": "rejected",
+            
+        
+    
+        
+        
+            
+                "requested_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decided_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decision_notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "document",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "status": "cancelled",
+            
+        
+    
+        
+        
+            
+                "requested_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decided_at": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "decision_notes": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const ActivityLogsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "document",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "action": "approved",
+            
+        
+    
+        
+        
+            
+                "event_time": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "message": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "ip_address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "goods_receipt",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "action": "attached_file",
+            
+        
+    
+        
+        
+            
+                "event_time": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "message": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "ip_address": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "document",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "action": "rejected",
+            
+        
+    
+        
+        
+            
+                "event_time": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "message": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "ip_address": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "purchase_order",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "action": "commented",
+            
+        
+    
+        
+        
+            
+                "event_time": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "message": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "ip_address": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "entity_type": "vendor",
+            
+        
+    
+        
+        
+            
+                "entity_reference": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "action": "created",
+            
+        
+    
+        
+        
+            
+                "event_time": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "message": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "ip_address": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+const UiAnnouncementsData = [
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "headline": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "content": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "audience": "warehouse",
+            
+        
+    
+        
+        
+            
+                "publish_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "publish_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "headline": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "content": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "audience": "admins",
+            
+        
+    
+        
+        
+            
+                "publish_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "publish_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_active": true,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "headline": "Grace Hopper",
+            
+        
+    
+        
+        
+            
+                "content": "Ada Lovelace",
+            
+        
+    
+        
+        
+            
+                "audience": "all_users",
+            
+        
+    
+        
+        
+            
+                "publish_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "publish_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "headline": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "content": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "audience": "buyers",
+            
+        
+    
+        
+        
+            
+                "publish_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "publish_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+    {
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+        
+        
+            
+                "headline": "Alan Turing",
+            
+        
+    
+        
+        
+            
+                "content": "Marie Curie",
+            
+        
+    
+        
+        
+            
+                "audience": "admins",
+            
+        
+    
+        
+        
+            
+                "publish_from": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "publish_to": new Date(Date.now()),
+            
+        
+    
+        
+        
+            
+                "is_active": false,
+            
+        
+    
+        
+        
+            
+                // type code here for "relation_one" field
+            
+        
+    
+    },
+    
+];
+
+
+
+
+    
+    
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            // Similar logic for "relation_many"
+        
+    
+        
+            
+            async function associateUserWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const User0 = await Users.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (User0?.setOrganization)
+                {
+                    await
+                    User0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const User1 = await Users.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (User1?.setOrganization)
+                {
+                    await
+                    User1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const User2 = await Users.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (User2?.setOrganization)
+                {
+                    await
+                    User2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const User3 = await Users.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (User3?.setOrganization)
+                {
+                    await
+                    User3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const User4 = await Users.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (User4?.setOrganization)
+                {
+                    await
+                    User4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+    
+    
+        
+    
+
+    
+    
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateCompanyWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Company0 = await Companies.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Company0?.setOrganization)
+                {
+                    await
+                    Company0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Company1 = await Companies.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Company1?.setOrganization)
+                {
+                    await
+                    Company1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Company2 = await Companies.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Company2?.setOrganization)
+                {
+                    await
+                    Company2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Company3 = await Companies.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Company3?.setOrganization)
+                {
+                    await
+                    Company3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Company4 = await Companies.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Company4?.setOrganization)
+                {
+                    await
+                    Company4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateUserRoleAssignmentWithUser() {
+            
+                const relatedUser0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const UserRoleAssignment0 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (UserRoleAssignment0?.setUser)
+                {
+                    await
+                    UserRoleAssignment0.
+                    setUser(relatedUser0);
+                }
+            
+                const relatedUser1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const UserRoleAssignment1 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (UserRoleAssignment1?.setUser)
+                {
+                    await
+                    UserRoleAssignment1.
+                    setUser(relatedUser1);
+                }
+            
+                const relatedUser2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const UserRoleAssignment2 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (UserRoleAssignment2?.setUser)
+                {
+                    await
+                    UserRoleAssignment2.
+                    setUser(relatedUser2);
+                }
+            
+                const relatedUser3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const UserRoleAssignment3 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (UserRoleAssignment3?.setUser)
+                {
+                    await
+                    UserRoleAssignment3.
+                    setUser(relatedUser3);
+                }
+            
+                const relatedUser4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const UserRoleAssignment4 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (UserRoleAssignment4?.setUser)
+                {
+                    await
+                    UserRoleAssignment4.
+                    setUser(relatedUser4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associateUserRoleAssignmentWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UserRoleAssignment0 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (UserRoleAssignment0?.setCompany)
+                {
+                    await
+                    UserRoleAssignment0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UserRoleAssignment1 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (UserRoleAssignment1?.setCompany)
+                {
+                    await
+                    UserRoleAssignment1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UserRoleAssignment2 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (UserRoleAssignment2?.setCompany)
+                {
+                    await
+                    UserRoleAssignment2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UserRoleAssignment3 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (UserRoleAssignment3?.setCompany)
+                {
+                    await
+                    UserRoleAssignment3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UserRoleAssignment4 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (UserRoleAssignment4?.setCompany)
+                {
+                    await
+                    UserRoleAssignment4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateUserRoleAssignmentWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UserRoleAssignment0 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (UserRoleAssignment0?.setOrganization)
+                {
+                    await
+                    UserRoleAssignment0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UserRoleAssignment1 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (UserRoleAssignment1?.setOrganization)
+                {
+                    await
+                    UserRoleAssignment1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UserRoleAssignment2 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (UserRoleAssignment2?.setOrganization)
+                {
+                    await
+                    UserRoleAssignment2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UserRoleAssignment3 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (UserRoleAssignment3?.setOrganization)
+                {
+                    await
+                    UserRoleAssignment3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UserRoleAssignment4 = await UserRoleAssignments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (UserRoleAssignment4?.setOrganization)
+                {
+                    await
+                    UserRoleAssignment4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+    
+        
+            
+            async function associateRolePermissionMappingWithPermission() {
+            
+                const relatedPermission0 = await Permissions.findOne({
+                    offset: Math.floor(Math.random() * (await Permissions.count())),
+                });
+                const RolePermissionMapping0 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (RolePermissionMapping0?.setPermission)
+                {
+                    await
+                    RolePermissionMapping0.
+                    setPermission(relatedPermission0);
+                }
+            
+                const relatedPermission1 = await Permissions.findOne({
+                    offset: Math.floor(Math.random() * (await Permissions.count())),
+                });
+                const RolePermissionMapping1 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (RolePermissionMapping1?.setPermission)
+                {
+                    await
+                    RolePermissionMapping1.
+                    setPermission(relatedPermission1);
+                }
+            
+                const relatedPermission2 = await Permissions.findOne({
+                    offset: Math.floor(Math.random() * (await Permissions.count())),
+                });
+                const RolePermissionMapping2 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (RolePermissionMapping2?.setPermission)
+                {
+                    await
+                    RolePermissionMapping2.
+                    setPermission(relatedPermission2);
+                }
+            
+                const relatedPermission3 = await Permissions.findOne({
+                    offset: Math.floor(Math.random() * (await Permissions.count())),
+                });
+                const RolePermissionMapping3 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (RolePermissionMapping3?.setPermission)
+                {
+                    await
+                    RolePermissionMapping3.
+                    setPermission(relatedPermission3);
+                }
+            
+                const relatedPermission4 = await Permissions.findOne({
+                    offset: Math.floor(Math.random() * (await Permissions.count())),
+                });
+                const RolePermissionMapping4 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (RolePermissionMapping4?.setPermission)
+                {
+                    await
+                    RolePermissionMapping4.
+                    setPermission(relatedPermission4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associateRolePermissionMappingWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const RolePermissionMapping0 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (RolePermissionMapping0?.setOrganization)
+                {
+                    await
+                    RolePermissionMapping0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const RolePermissionMapping1 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (RolePermissionMapping1?.setOrganization)
+                {
+                    await
+                    RolePermissionMapping1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const RolePermissionMapping2 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (RolePermissionMapping2?.setOrganization)
+                {
+                    await
+                    RolePermissionMapping2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const RolePermissionMapping3 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (RolePermissionMapping3?.setOrganization)
+                {
+                    await
+                    RolePermissionMapping3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const RolePermissionMapping4 = await RolePermissionMappings.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (RolePermissionMapping4?.setOrganization)
+                {
+                    await
+                    RolePermissionMapping4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateVendorWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Vendor0 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Vendor0?.setCompany)
+                {
+                    await
+                    Vendor0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Vendor1 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Vendor1?.setCompany)
+                {
+                    await
+                    Vendor1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Vendor2 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Vendor2?.setCompany)
+                {
+                    await
+                    Vendor2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Vendor3 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Vendor3?.setCompany)
+                {
+                    await
+                    Vendor3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Vendor4 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Vendor4?.setCompany)
+                {
+                    await
+                    Vendor4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateVendorWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Vendor0 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Vendor0?.setOrganization)
+                {
+                    await
+                    Vendor0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Vendor1 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Vendor1?.setOrganization)
+                {
+                    await
+                    Vendor1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Vendor2 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Vendor2?.setOrganization)
+                {
+                    await
+                    Vendor2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Vendor3 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Vendor3?.setOrganization)
+                {
+                    await
+                    Vendor3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Vendor4 = await Vendors.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Vendor4?.setOrganization)
+                {
+                    await
+                    Vendor4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateWarehousWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Warehous0 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Warehous0?.setCompany)
+                {
+                    await
+                    Warehous0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Warehous1 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Warehous1?.setCompany)
+                {
+                    await
+                    Warehous1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Warehous2 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Warehous2?.setCompany)
+                {
+                    await
+                    Warehous2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Warehous3 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Warehous3?.setCompany)
+                {
+                    await
+                    Warehous3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Warehous4 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Warehous4?.setCompany)
+                {
+                    await
+                    Warehous4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateWarehousWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Warehous0 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Warehous0?.setOrganization)
+                {
+                    await
+                    Warehous0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Warehous1 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Warehous1?.setOrganization)
+                {
+                    await
+                    Warehous1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Warehous2 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Warehous2?.setOrganization)
+                {
+                    await
+                    Warehous2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Warehous3 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Warehous3?.setOrganization)
+                {
+                    await
+                    Warehous3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Warehous4 = await Warehouses.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Warehous4?.setOrganization)
+                {
+                    await
+                    Warehous4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateProductCategoryWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ProductCategory0 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ProductCategory0?.setCompany)
+                {
+                    await
+                    ProductCategory0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ProductCategory1 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ProductCategory1?.setCompany)
+                {
+                    await
+                    ProductCategory1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ProductCategory2 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ProductCategory2?.setCompany)
+                {
+                    await
+                    ProductCategory2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ProductCategory3 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ProductCategory3?.setCompany)
+                {
+                    await
+                    ProductCategory3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ProductCategory4 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ProductCategory4?.setCompany)
+                {
+                    await
+                    ProductCategory4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateProductCategoryWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ProductCategory0 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ProductCategory0?.setOrganization)
+                {
+                    await
+                    ProductCategory0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ProductCategory1 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ProductCategory1?.setOrganization)
+                {
+                    await
+                    ProductCategory1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ProductCategory2 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ProductCategory2?.setOrganization)
+                {
+                    await
+                    ProductCategory2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ProductCategory3 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ProductCategory3?.setOrganization)
+                {
+                    await
+                    ProductCategory3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ProductCategory4 = await ProductCategories.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ProductCategory4?.setOrganization)
+                {
+                    await
+                    ProductCategory4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateProductWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Product0 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Product0?.setCompany)
+                {
+                    await
+                    Product0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Product1 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Product1?.setCompany)
+                {
+                    await
+                    Product1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Product2 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Product2?.setCompany)
+                {
+                    await
+                    Product2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Product3 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Product3?.setCompany)
+                {
+                    await
+                    Product3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Product4 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Product4?.setCompany)
+                {
+                    await
+                    Product4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateProductWithCategory() {
+            
+                const relatedCategory0 = await ProductCategories.findOne({
+                    offset: Math.floor(Math.random() * (await ProductCategories.count())),
+                });
+                const Product0 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Product0?.setCategory)
+                {
+                    await
+                    Product0.
+                    setCategory(relatedCategory0);
+                }
+            
+                const relatedCategory1 = await ProductCategories.findOne({
+                    offset: Math.floor(Math.random() * (await ProductCategories.count())),
+                });
+                const Product1 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Product1?.setCategory)
+                {
+                    await
+                    Product1.
+                    setCategory(relatedCategory1);
+                }
+            
+                const relatedCategory2 = await ProductCategories.findOne({
+                    offset: Math.floor(Math.random() * (await ProductCategories.count())),
+                });
+                const Product2 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Product2?.setCategory)
+                {
+                    await
+                    Product2.
+                    setCategory(relatedCategory2);
+                }
+            
+                const relatedCategory3 = await ProductCategories.findOne({
+                    offset: Math.floor(Math.random() * (await ProductCategories.count())),
+                });
+                const Product3 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Product3?.setCategory)
+                {
+                    await
+                    Product3.
+                    setCategory(relatedCategory3);
+                }
+            
+                const relatedCategory4 = await ProductCategories.findOne({
+                    offset: Math.floor(Math.random() * (await ProductCategories.count())),
+                });
+                const Product4 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Product4?.setCategory)
+                {
+                    await
+                    Product4.
+                    setCategory(relatedCategory4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateProductWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Product0 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Product0?.setOrganization)
+                {
+                    await
+                    Product0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Product1 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Product1?.setOrganization)
+                {
+                    await
+                    Product1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Product2 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Product2?.setOrganization)
+                {
+                    await
+                    Product2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Product3 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Product3?.setOrganization)
+                {
+                    await
+                    Product3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Product4 = await Products.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Product4?.setOrganization)
+                {
+                    await
+                    Product4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associatePurchaseRequisitionWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseRequisition0 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisition0?.setCompany)
+                {
+                    await
+                    PurchaseRequisition0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseRequisition1 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisition1?.setCompany)
+                {
+                    await
+                    PurchaseRequisition1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseRequisition2 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisition2?.setCompany)
+                {
+                    await
+                    PurchaseRequisition2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseRequisition3 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisition3?.setCompany)
+                {
+                    await
+                    PurchaseRequisition3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseRequisition4 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisition4?.setCompany)
+                {
+                    await
+                    PurchaseRequisition4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseRequisitionWithRequested_by() {
+            
+                const relatedRequested_by0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseRequisition0 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisition0?.setRequested_by)
+                {
+                    await
+                    PurchaseRequisition0.
+                    setRequested_by(relatedRequested_by0);
+                }
+            
+                const relatedRequested_by1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseRequisition1 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisition1?.setRequested_by)
+                {
+                    await
+                    PurchaseRequisition1.
+                    setRequested_by(relatedRequested_by1);
+                }
+            
+                const relatedRequested_by2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseRequisition2 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisition2?.setRequested_by)
+                {
+                    await
+                    PurchaseRequisition2.
+                    setRequested_by(relatedRequested_by2);
+                }
+            
+                const relatedRequested_by3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseRequisition3 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisition3?.setRequested_by)
+                {
+                    await
+                    PurchaseRequisition3.
+                    setRequested_by(relatedRequested_by3);
+                }
+            
+                const relatedRequested_by4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseRequisition4 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisition4?.setRequested_by)
+                {
+                    await
+                    PurchaseRequisition4.
+                    setRequested_by(relatedRequested_by4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseRequisitionWithDepartment() {
+            
+                const relatedDepartment0 = await Departments.findOne({
+                    offset: Math.floor(Math.random() * (await Departments.count())),
+                });
+                const PurchaseRequisition0 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisition0?.setDepartment)
+                {
+                    await
+                    PurchaseRequisition0.
+                    setDepartment(relatedDepartment0);
+                }
+            
+                const relatedDepartment1 = await Departments.findOne({
+                    offset: Math.floor(Math.random() * (await Departments.count())),
+                });
+                const PurchaseRequisition1 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisition1?.setDepartment)
+                {
+                    await
+                    PurchaseRequisition1.
+                    setDepartment(relatedDepartment1);
+                }
+            
+                const relatedDepartment2 = await Departments.findOne({
+                    offset: Math.floor(Math.random() * (await Departments.count())),
+                });
+                const PurchaseRequisition2 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisition2?.setDepartment)
+                {
+                    await
+                    PurchaseRequisition2.
+                    setDepartment(relatedDepartment2);
+                }
+            
+                const relatedDepartment3 = await Departments.findOne({
+                    offset: Math.floor(Math.random() * (await Departments.count())),
+                });
+                const PurchaseRequisition3 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisition3?.setDepartment)
+                {
+                    await
+                    PurchaseRequisition3.
+                    setDepartment(relatedDepartment3);
+                }
+            
+                const relatedDepartment4 = await Departments.findOne({
+                    offset: Math.floor(Math.random() * (await Departments.count())),
+                });
+                const PurchaseRequisition4 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisition4?.setDepartment)
+                {
+                    await
+                    PurchaseRequisition4.
+                    setDepartment(relatedDepartment4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseRequisitionWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisition0 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisition0?.setOrganization)
+                {
+                    await
+                    PurchaseRequisition0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisition1 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisition1?.setOrganization)
+                {
+                    await
+                    PurchaseRequisition1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisition2 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisition2?.setOrganization)
+                {
+                    await
+                    PurchaseRequisition2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisition3 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisition3?.setOrganization)
+                {
+                    await
+                    PurchaseRequisition3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisition4 = await PurchaseRequisitions.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisition4?.setOrganization)
+                {
+                    await
+                    PurchaseRequisition4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associatePurchaseRequisitionLineWithPurchase_requisition() {
+            
+                const relatedPurchase_requisition0 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseRequisitionLine0 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisitionLine0?.setPurchase_requisition)
+                {
+                    await
+                    PurchaseRequisitionLine0.
+                    setPurchase_requisition(relatedPurchase_requisition0);
+                }
+            
+                const relatedPurchase_requisition1 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseRequisitionLine1 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisitionLine1?.setPurchase_requisition)
+                {
+                    await
+                    PurchaseRequisitionLine1.
+                    setPurchase_requisition(relatedPurchase_requisition1);
+                }
+            
+                const relatedPurchase_requisition2 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseRequisitionLine2 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisitionLine2?.setPurchase_requisition)
+                {
+                    await
+                    PurchaseRequisitionLine2.
+                    setPurchase_requisition(relatedPurchase_requisition2);
+                }
+            
+                const relatedPurchase_requisition3 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseRequisitionLine3 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisitionLine3?.setPurchase_requisition)
+                {
+                    await
+                    PurchaseRequisitionLine3.
+                    setPurchase_requisition(relatedPurchase_requisition3);
+                }
+            
+                const relatedPurchase_requisition4 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseRequisitionLine4 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisitionLine4?.setPurchase_requisition)
+                {
+                    await
+                    PurchaseRequisitionLine4.
+                    setPurchase_requisition(relatedPurchase_requisition4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseRequisitionLineWithProduct() {
+            
+                const relatedProduct0 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseRequisitionLine0 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisitionLine0?.setProduct)
+                {
+                    await
+                    PurchaseRequisitionLine0.
+                    setProduct(relatedProduct0);
+                }
+            
+                const relatedProduct1 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseRequisitionLine1 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisitionLine1?.setProduct)
+                {
+                    await
+                    PurchaseRequisitionLine1.
+                    setProduct(relatedProduct1);
+                }
+            
+                const relatedProduct2 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseRequisitionLine2 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisitionLine2?.setProduct)
+                {
+                    await
+                    PurchaseRequisitionLine2.
+                    setProduct(relatedProduct2);
+                }
+            
+                const relatedProduct3 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseRequisitionLine3 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisitionLine3?.setProduct)
+                {
+                    await
+                    PurchaseRequisitionLine3.
+                    setProduct(relatedProduct3);
+                }
+            
+                const relatedProduct4 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseRequisitionLine4 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisitionLine4?.setProduct)
+                {
+                    await
+                    PurchaseRequisitionLine4.
+                    setProduct(relatedProduct4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseRequisitionLineWithWarehouse() {
+            
+                const relatedWarehouse0 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseRequisitionLine0 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisitionLine0?.setWarehouse)
+                {
+                    await
+                    PurchaseRequisitionLine0.
+                    setWarehouse(relatedWarehouse0);
+                }
+            
+                const relatedWarehouse1 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseRequisitionLine1 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisitionLine1?.setWarehouse)
+                {
+                    await
+                    PurchaseRequisitionLine1.
+                    setWarehouse(relatedWarehouse1);
+                }
+            
+                const relatedWarehouse2 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseRequisitionLine2 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisitionLine2?.setWarehouse)
+                {
+                    await
+                    PurchaseRequisitionLine2.
+                    setWarehouse(relatedWarehouse2);
+                }
+            
+                const relatedWarehouse3 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseRequisitionLine3 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisitionLine3?.setWarehouse)
+                {
+                    await
+                    PurchaseRequisitionLine3.
+                    setWarehouse(relatedWarehouse3);
+                }
+            
+                const relatedWarehouse4 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseRequisitionLine4 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisitionLine4?.setWarehouse)
+                {
+                    await
+                    PurchaseRequisitionLine4.
+                    setWarehouse(relatedWarehouse4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseRequisitionLineWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisitionLine0 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseRequisitionLine0?.setOrganization)
+                {
+                    await
+                    PurchaseRequisitionLine0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisitionLine1 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseRequisitionLine1?.setOrganization)
+                {
+                    await
+                    PurchaseRequisitionLine1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisitionLine2 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseRequisitionLine2?.setOrganization)
+                {
+                    await
+                    PurchaseRequisitionLine2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisitionLine3 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseRequisitionLine3?.setOrganization)
+                {
+                    await
+                    PurchaseRequisitionLine3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseRequisitionLine4 = await PurchaseRequisitionLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseRequisitionLine4?.setOrganization)
+                {
+                    await
+                    PurchaseRequisitionLine4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associatePurchaseOrderWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseOrder0 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrder0?.setCompany)
+                {
+                    await
+                    PurchaseOrder0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseOrder1 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrder1?.setCompany)
+                {
+                    await
+                    PurchaseOrder1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseOrder2 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrder2?.setCompany)
+                {
+                    await
+                    PurchaseOrder2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseOrder3 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrder3?.setCompany)
+                {
+                    await
+                    PurchaseOrder3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const PurchaseOrder4 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrder4?.setCompany)
+                {
+                    await
+                    PurchaseOrder4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseOrderWithVendor() {
+            
+                const relatedVendor0 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const PurchaseOrder0 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrder0?.setVendor)
+                {
+                    await
+                    PurchaseOrder0.
+                    setVendor(relatedVendor0);
+                }
+            
+                const relatedVendor1 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const PurchaseOrder1 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrder1?.setVendor)
+                {
+                    await
+                    PurchaseOrder1.
+                    setVendor(relatedVendor1);
+                }
+            
+                const relatedVendor2 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const PurchaseOrder2 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrder2?.setVendor)
+                {
+                    await
+                    PurchaseOrder2.
+                    setVendor(relatedVendor2);
+                }
+            
+                const relatedVendor3 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const PurchaseOrder3 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrder3?.setVendor)
+                {
+                    await
+                    PurchaseOrder3.
+                    setVendor(relatedVendor3);
+                }
+            
+                const relatedVendor4 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const PurchaseOrder4 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrder4?.setVendor)
+                {
+                    await
+                    PurchaseOrder4.
+                    setVendor(relatedVendor4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseOrderWithBuyer() {
+            
+                const relatedBuyer0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseOrder0 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrder0?.setBuyer)
+                {
+                    await
+                    PurchaseOrder0.
+                    setBuyer(relatedBuyer0);
+                }
+            
+                const relatedBuyer1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseOrder1 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrder1?.setBuyer)
+                {
+                    await
+                    PurchaseOrder1.
+                    setBuyer(relatedBuyer1);
+                }
+            
+                const relatedBuyer2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseOrder2 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrder2?.setBuyer)
+                {
+                    await
+                    PurchaseOrder2.
+                    setBuyer(relatedBuyer2);
+                }
+            
+                const relatedBuyer3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseOrder3 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrder3?.setBuyer)
+                {
+                    await
+                    PurchaseOrder3.
+                    setBuyer(relatedBuyer3);
+                }
+            
+                const relatedBuyer4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const PurchaseOrder4 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrder4?.setBuyer)
+                {
+                    await
+                    PurchaseOrder4.
+                    setBuyer(relatedBuyer4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseOrderWithSource_requisition() {
+            
+                const relatedSource_requisition0 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseOrder0 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrder0?.setSource_requisition)
+                {
+                    await
+                    PurchaseOrder0.
+                    setSource_requisition(relatedSource_requisition0);
+                }
+            
+                const relatedSource_requisition1 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseOrder1 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrder1?.setSource_requisition)
+                {
+                    await
+                    PurchaseOrder1.
+                    setSource_requisition(relatedSource_requisition1);
+                }
+            
+                const relatedSource_requisition2 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseOrder2 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrder2?.setSource_requisition)
+                {
+                    await
+                    PurchaseOrder2.
+                    setSource_requisition(relatedSource_requisition2);
+                }
+            
+                const relatedSource_requisition3 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseOrder3 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrder3?.setSource_requisition)
+                {
+                    await
+                    PurchaseOrder3.
+                    setSource_requisition(relatedSource_requisition3);
+                }
+            
+                const relatedSource_requisition4 = await PurchaseRequisitions.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseRequisitions.count())),
+                });
+                const PurchaseOrder4 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrder4?.setSource_requisition)
+                {
+                    await
+                    PurchaseOrder4.
+                    setSource_requisition(relatedSource_requisition4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseOrderWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrder0 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrder0?.setOrganization)
+                {
+                    await
+                    PurchaseOrder0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrder1 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrder1?.setOrganization)
+                {
+                    await
+                    PurchaseOrder1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrder2 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrder2?.setOrganization)
+                {
+                    await
+                    PurchaseOrder2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrder3 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrder3?.setOrganization)
+                {
+                    await
+                    PurchaseOrder3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrder4 = await PurchaseOrders.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrder4?.setOrganization)
+                {
+                    await
+                    PurchaseOrder4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associatePurchaseOrderLineWithPurchase_order() {
+            
+                const relatedPurchase_order0 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const PurchaseOrderLine0 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrderLine0?.setPurchase_order)
+                {
+                    await
+                    PurchaseOrderLine0.
+                    setPurchase_order(relatedPurchase_order0);
+                }
+            
+                const relatedPurchase_order1 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const PurchaseOrderLine1 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrderLine1?.setPurchase_order)
+                {
+                    await
+                    PurchaseOrderLine1.
+                    setPurchase_order(relatedPurchase_order1);
+                }
+            
+                const relatedPurchase_order2 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const PurchaseOrderLine2 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrderLine2?.setPurchase_order)
+                {
+                    await
+                    PurchaseOrderLine2.
+                    setPurchase_order(relatedPurchase_order2);
+                }
+            
+                const relatedPurchase_order3 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const PurchaseOrderLine3 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrderLine3?.setPurchase_order)
+                {
+                    await
+                    PurchaseOrderLine3.
+                    setPurchase_order(relatedPurchase_order3);
+                }
+            
+                const relatedPurchase_order4 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const PurchaseOrderLine4 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrderLine4?.setPurchase_order)
+                {
+                    await
+                    PurchaseOrderLine4.
+                    setPurchase_order(relatedPurchase_order4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseOrderLineWithProduct() {
+            
+                const relatedProduct0 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseOrderLine0 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrderLine0?.setProduct)
+                {
+                    await
+                    PurchaseOrderLine0.
+                    setProduct(relatedProduct0);
+                }
+            
+                const relatedProduct1 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseOrderLine1 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrderLine1?.setProduct)
+                {
+                    await
+                    PurchaseOrderLine1.
+                    setProduct(relatedProduct1);
+                }
+            
+                const relatedProduct2 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseOrderLine2 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrderLine2?.setProduct)
+                {
+                    await
+                    PurchaseOrderLine2.
+                    setProduct(relatedProduct2);
+                }
+            
+                const relatedProduct3 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseOrderLine3 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrderLine3?.setProduct)
+                {
+                    await
+                    PurchaseOrderLine3.
+                    setProduct(relatedProduct3);
+                }
+            
+                const relatedProduct4 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const PurchaseOrderLine4 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrderLine4?.setProduct)
+                {
+                    await
+                    PurchaseOrderLine4.
+                    setProduct(relatedProduct4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associatePurchaseOrderLineWithWarehouse() {
+            
+                const relatedWarehouse0 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseOrderLine0 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrderLine0?.setWarehouse)
+                {
+                    await
+                    PurchaseOrderLine0.
+                    setWarehouse(relatedWarehouse0);
+                }
+            
+                const relatedWarehouse1 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseOrderLine1 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrderLine1?.setWarehouse)
+                {
+                    await
+                    PurchaseOrderLine1.
+                    setWarehouse(relatedWarehouse1);
+                }
+            
+                const relatedWarehouse2 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseOrderLine2 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrderLine2?.setWarehouse)
+                {
+                    await
+                    PurchaseOrderLine2.
+                    setWarehouse(relatedWarehouse2);
+                }
+            
+                const relatedWarehouse3 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseOrderLine3 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrderLine3?.setWarehouse)
+                {
+                    await
+                    PurchaseOrderLine3.
+                    setWarehouse(relatedWarehouse3);
+                }
+            
+                const relatedWarehouse4 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const PurchaseOrderLine4 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrderLine4?.setWarehouse)
+                {
+                    await
+                    PurchaseOrderLine4.
+                    setWarehouse(relatedWarehouse4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePurchaseOrderLineWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrderLine0 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (PurchaseOrderLine0?.setOrganization)
+                {
+                    await
+                    PurchaseOrderLine0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrderLine1 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (PurchaseOrderLine1?.setOrganization)
+                {
+                    await
+                    PurchaseOrderLine1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrderLine2 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (PurchaseOrderLine2?.setOrganization)
+                {
+                    await
+                    PurchaseOrderLine2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrderLine3 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (PurchaseOrderLine3?.setOrganization)
+                {
+                    await
+                    PurchaseOrderLine3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const PurchaseOrderLine4 = await PurchaseOrderLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (PurchaseOrderLine4?.setOrganization)
+                {
+                    await
+                    PurchaseOrderLine4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateGoodsReceiptWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const GoodsReceipt0 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceipt0?.setCompany)
+                {
+                    await
+                    GoodsReceipt0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const GoodsReceipt1 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceipt1?.setCompany)
+                {
+                    await
+                    GoodsReceipt1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const GoodsReceipt2 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceipt2?.setCompany)
+                {
+                    await
+                    GoodsReceipt2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const GoodsReceipt3 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceipt3?.setCompany)
+                {
+                    await
+                    GoodsReceipt3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const GoodsReceipt4 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceipt4?.setCompany)
+                {
+                    await
+                    GoodsReceipt4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associateGoodsReceiptWithPurchase_order() {
+            
+                const relatedPurchase_order0 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const GoodsReceipt0 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceipt0?.setPurchase_order)
+                {
+                    await
+                    GoodsReceipt0.
+                    setPurchase_order(relatedPurchase_order0);
+                }
+            
+                const relatedPurchase_order1 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const GoodsReceipt1 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceipt1?.setPurchase_order)
+                {
+                    await
+                    GoodsReceipt1.
+                    setPurchase_order(relatedPurchase_order1);
+                }
+            
+                const relatedPurchase_order2 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const GoodsReceipt2 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceipt2?.setPurchase_order)
+                {
+                    await
+                    GoodsReceipt2.
+                    setPurchase_order(relatedPurchase_order2);
+                }
+            
+                const relatedPurchase_order3 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const GoodsReceipt3 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceipt3?.setPurchase_order)
+                {
+                    await
+                    GoodsReceipt3.
+                    setPurchase_order(relatedPurchase_order3);
+                }
+            
+                const relatedPurchase_order4 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const GoodsReceipt4 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceipt4?.setPurchase_order)
+                {
+                    await
+                    GoodsReceipt4.
+                    setPurchase_order(relatedPurchase_order4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateGoodsReceiptWithReceived_by() {
+            
+                const relatedReceived_by0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const GoodsReceipt0 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceipt0?.setReceived_by)
+                {
+                    await
+                    GoodsReceipt0.
+                    setReceived_by(relatedReceived_by0);
+                }
+            
+                const relatedReceived_by1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const GoodsReceipt1 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceipt1?.setReceived_by)
+                {
+                    await
+                    GoodsReceipt1.
+                    setReceived_by(relatedReceived_by1);
+                }
+            
+                const relatedReceived_by2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const GoodsReceipt2 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceipt2?.setReceived_by)
+                {
+                    await
+                    GoodsReceipt2.
+                    setReceived_by(relatedReceived_by2);
+                }
+            
+                const relatedReceived_by3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const GoodsReceipt3 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceipt3?.setReceived_by)
+                {
+                    await
+                    GoodsReceipt3.
+                    setReceived_by(relatedReceived_by3);
+                }
+            
+                const relatedReceived_by4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const GoodsReceipt4 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceipt4?.setReceived_by)
+                {
+                    await
+                    GoodsReceipt4.
+                    setReceived_by(relatedReceived_by4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateGoodsReceiptWithWarehouse() {
+            
+                const relatedWarehouse0 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const GoodsReceipt0 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceipt0?.setWarehouse)
+                {
+                    await
+                    GoodsReceipt0.
+                    setWarehouse(relatedWarehouse0);
+                }
+            
+                const relatedWarehouse1 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const GoodsReceipt1 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceipt1?.setWarehouse)
+                {
+                    await
+                    GoodsReceipt1.
+                    setWarehouse(relatedWarehouse1);
+                }
+            
+                const relatedWarehouse2 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const GoodsReceipt2 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceipt2?.setWarehouse)
+                {
+                    await
+                    GoodsReceipt2.
+                    setWarehouse(relatedWarehouse2);
+                }
+            
+                const relatedWarehouse3 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const GoodsReceipt3 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceipt3?.setWarehouse)
+                {
+                    await
+                    GoodsReceipt3.
+                    setWarehouse(relatedWarehouse3);
+                }
+            
+                const relatedWarehouse4 = await Warehouses.findOne({
+                    offset: Math.floor(Math.random() * (await Warehouses.count())),
+                });
+                const GoodsReceipt4 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceipt4?.setWarehouse)
+                {
+                    await
+                    GoodsReceipt4.
+                    setWarehouse(relatedWarehouse4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateGoodsReceiptWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceipt0 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceipt0?.setOrganization)
+                {
+                    await
+                    GoodsReceipt0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceipt1 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceipt1?.setOrganization)
+                {
+                    await
+                    GoodsReceipt1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceipt2 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceipt2?.setOrganization)
+                {
+                    await
+                    GoodsReceipt2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceipt3 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceipt3?.setOrganization)
+                {
+                    await
+                    GoodsReceipt3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceipt4 = await GoodsReceipts.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceipt4?.setOrganization)
+                {
+                    await
+                    GoodsReceipt4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateGoodsReceiptLineWithGoods_receipt() {
+            
+                const relatedGoods_receipt0 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const GoodsReceiptLine0 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceiptLine0?.setGoods_receipt)
+                {
+                    await
+                    GoodsReceiptLine0.
+                    setGoods_receipt(relatedGoods_receipt0);
+                }
+            
+                const relatedGoods_receipt1 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const GoodsReceiptLine1 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceiptLine1?.setGoods_receipt)
+                {
+                    await
+                    GoodsReceiptLine1.
+                    setGoods_receipt(relatedGoods_receipt1);
+                }
+            
+                const relatedGoods_receipt2 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const GoodsReceiptLine2 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceiptLine2?.setGoods_receipt)
+                {
+                    await
+                    GoodsReceiptLine2.
+                    setGoods_receipt(relatedGoods_receipt2);
+                }
+            
+                const relatedGoods_receipt3 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const GoodsReceiptLine3 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceiptLine3?.setGoods_receipt)
+                {
+                    await
+                    GoodsReceiptLine3.
+                    setGoods_receipt(relatedGoods_receipt3);
+                }
+            
+                const relatedGoods_receipt4 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const GoodsReceiptLine4 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceiptLine4?.setGoods_receipt)
+                {
+                    await
+                    GoodsReceiptLine4.
+                    setGoods_receipt(relatedGoods_receipt4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateGoodsReceiptLineWithPurchase_order_line() {
+            
+                const relatedPurchase_order_line0 = await PurchaseOrderLines.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrderLines.count())),
+                });
+                const GoodsReceiptLine0 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceiptLine0?.setPurchase_order_line)
+                {
+                    await
+                    GoodsReceiptLine0.
+                    setPurchase_order_line(relatedPurchase_order_line0);
+                }
+            
+                const relatedPurchase_order_line1 = await PurchaseOrderLines.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrderLines.count())),
+                });
+                const GoodsReceiptLine1 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceiptLine1?.setPurchase_order_line)
+                {
+                    await
+                    GoodsReceiptLine1.
+                    setPurchase_order_line(relatedPurchase_order_line1);
+                }
+            
+                const relatedPurchase_order_line2 = await PurchaseOrderLines.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrderLines.count())),
+                });
+                const GoodsReceiptLine2 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceiptLine2?.setPurchase_order_line)
+                {
+                    await
+                    GoodsReceiptLine2.
+                    setPurchase_order_line(relatedPurchase_order_line2);
+                }
+            
+                const relatedPurchase_order_line3 = await PurchaseOrderLines.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrderLines.count())),
+                });
+                const GoodsReceiptLine3 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceiptLine3?.setPurchase_order_line)
+                {
+                    await
+                    GoodsReceiptLine3.
+                    setPurchase_order_line(relatedPurchase_order_line3);
+                }
+            
+                const relatedPurchase_order_line4 = await PurchaseOrderLines.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrderLines.count())),
+                });
+                const GoodsReceiptLine4 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceiptLine4?.setPurchase_order_line)
+                {
+                    await
+                    GoodsReceiptLine4.
+                    setPurchase_order_line(relatedPurchase_order_line4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateGoodsReceiptLineWithProduct() {
+            
+                const relatedProduct0 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const GoodsReceiptLine0 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceiptLine0?.setProduct)
+                {
+                    await
+                    GoodsReceiptLine0.
+                    setProduct(relatedProduct0);
+                }
+            
+                const relatedProduct1 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const GoodsReceiptLine1 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceiptLine1?.setProduct)
+                {
+                    await
+                    GoodsReceiptLine1.
+                    setProduct(relatedProduct1);
+                }
+            
+                const relatedProduct2 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const GoodsReceiptLine2 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceiptLine2?.setProduct)
+                {
+                    await
+                    GoodsReceiptLine2.
+                    setProduct(relatedProduct2);
+                }
+            
+                const relatedProduct3 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const GoodsReceiptLine3 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceiptLine3?.setProduct)
+                {
+                    await
+                    GoodsReceiptLine3.
+                    setProduct(relatedProduct3);
+                }
+            
+                const relatedProduct4 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const GoodsReceiptLine4 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceiptLine4?.setProduct)
+                {
+                    await
+                    GoodsReceiptLine4.
+                    setProduct(relatedProduct4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateGoodsReceiptLineWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceiptLine0 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (GoodsReceiptLine0?.setOrganization)
+                {
+                    await
+                    GoodsReceiptLine0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceiptLine1 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (GoodsReceiptLine1?.setOrganization)
+                {
+                    await
+                    GoodsReceiptLine1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceiptLine2 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (GoodsReceiptLine2?.setOrganization)
+                {
+                    await
+                    GoodsReceiptLine2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceiptLine3 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (GoodsReceiptLine3?.setOrganization)
+                {
+                    await
+                    GoodsReceiptLine3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const GoodsReceiptLine4 = await GoodsReceiptLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (GoodsReceiptLine4?.setOrganization)
+                {
+                    await
+                    GoodsReceiptLine4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateVendorInvoiceWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const VendorInvoice0 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (VendorInvoice0?.setCompany)
+                {
+                    await
+                    VendorInvoice0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const VendorInvoice1 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (VendorInvoice1?.setCompany)
+                {
+                    await
+                    VendorInvoice1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const VendorInvoice2 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (VendorInvoice2?.setCompany)
+                {
+                    await
+                    VendorInvoice2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const VendorInvoice3 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (VendorInvoice3?.setCompany)
+                {
+                    await
+                    VendorInvoice3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const VendorInvoice4 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (VendorInvoice4?.setCompany)
+                {
+                    await
+                    VendorInvoice4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associateVendorInvoiceWithVendor() {
+            
+                const relatedVendor0 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const VendorInvoice0 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (VendorInvoice0?.setVendor)
+                {
+                    await
+                    VendorInvoice0.
+                    setVendor(relatedVendor0);
+                }
+            
+                const relatedVendor1 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const VendorInvoice1 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (VendorInvoice1?.setVendor)
+                {
+                    await
+                    VendorInvoice1.
+                    setVendor(relatedVendor1);
+                }
+            
+                const relatedVendor2 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const VendorInvoice2 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (VendorInvoice2?.setVendor)
+                {
+                    await
+                    VendorInvoice2.
+                    setVendor(relatedVendor2);
+                }
+            
+                const relatedVendor3 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const VendorInvoice3 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (VendorInvoice3?.setVendor)
+                {
+                    await
+                    VendorInvoice3.
+                    setVendor(relatedVendor3);
+                }
+            
+                const relatedVendor4 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const VendorInvoice4 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (VendorInvoice4?.setVendor)
+                {
+                    await
+                    VendorInvoice4.
+                    setVendor(relatedVendor4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateVendorInvoiceWithPurchase_order() {
+            
+                const relatedPurchase_order0 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const VendorInvoice0 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (VendorInvoice0?.setPurchase_order)
+                {
+                    await
+                    VendorInvoice0.
+                    setPurchase_order(relatedPurchase_order0);
+                }
+            
+                const relatedPurchase_order1 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const VendorInvoice1 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (VendorInvoice1?.setPurchase_order)
+                {
+                    await
+                    VendorInvoice1.
+                    setPurchase_order(relatedPurchase_order1);
+                }
+            
+                const relatedPurchase_order2 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const VendorInvoice2 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (VendorInvoice2?.setPurchase_order)
+                {
+                    await
+                    VendorInvoice2.
+                    setPurchase_order(relatedPurchase_order2);
+                }
+            
+                const relatedPurchase_order3 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const VendorInvoice3 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (VendorInvoice3?.setPurchase_order)
+                {
+                    await
+                    VendorInvoice3.
+                    setPurchase_order(relatedPurchase_order3);
+                }
+            
+                const relatedPurchase_order4 = await PurchaseOrders.findOne({
+                    offset: Math.floor(Math.random() * (await PurchaseOrders.count())),
+                });
+                const VendorInvoice4 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (VendorInvoice4?.setPurchase_order)
+                {
+                    await
+                    VendorInvoice4.
+                    setPurchase_order(relatedPurchase_order4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateVendorInvoiceWithGoods_receipt() {
+            
+                const relatedGoods_receipt0 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const VendorInvoice0 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (VendorInvoice0?.setGoods_receipt)
+                {
+                    await
+                    VendorInvoice0.
+                    setGoods_receipt(relatedGoods_receipt0);
+                }
+            
+                const relatedGoods_receipt1 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const VendorInvoice1 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (VendorInvoice1?.setGoods_receipt)
+                {
+                    await
+                    VendorInvoice1.
+                    setGoods_receipt(relatedGoods_receipt1);
+                }
+            
+                const relatedGoods_receipt2 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const VendorInvoice2 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (VendorInvoice2?.setGoods_receipt)
+                {
+                    await
+                    VendorInvoice2.
+                    setGoods_receipt(relatedGoods_receipt2);
+                }
+            
+                const relatedGoods_receipt3 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const VendorInvoice3 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (VendorInvoice3?.setGoods_receipt)
+                {
+                    await
+                    VendorInvoice3.
+                    setGoods_receipt(relatedGoods_receipt3);
+                }
+            
+                const relatedGoods_receipt4 = await GoodsReceipts.findOne({
+                    offset: Math.floor(Math.random() * (await GoodsReceipts.count())),
+                });
+                const VendorInvoice4 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (VendorInvoice4?.setGoods_receipt)
+                {
+                    await
+                    VendorInvoice4.
+                    setGoods_receipt(relatedGoods_receipt4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateVendorInvoiceWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const VendorInvoice0 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (VendorInvoice0?.setOrganization)
+                {
+                    await
+                    VendorInvoice0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const VendorInvoice1 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (VendorInvoice1?.setOrganization)
+                {
+                    await
+                    VendorInvoice1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const VendorInvoice2 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (VendorInvoice2?.setOrganization)
+                {
+                    await
+                    VendorInvoice2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const VendorInvoice3 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (VendorInvoice3?.setOrganization)
+                {
+                    await
+                    VendorInvoice3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const VendorInvoice4 = await VendorInvoices.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (VendorInvoice4?.setOrganization)
+                {
+                    await
+                    VendorInvoice4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateInvoiceLineWithVendor_invoice() {
+            
+                const relatedVendor_invoice0 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const InvoiceLine0 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (InvoiceLine0?.setVendor_invoice)
+                {
+                    await
+                    InvoiceLine0.
+                    setVendor_invoice(relatedVendor_invoice0);
+                }
+            
+                const relatedVendor_invoice1 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const InvoiceLine1 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (InvoiceLine1?.setVendor_invoice)
+                {
+                    await
+                    InvoiceLine1.
+                    setVendor_invoice(relatedVendor_invoice1);
+                }
+            
+                const relatedVendor_invoice2 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const InvoiceLine2 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (InvoiceLine2?.setVendor_invoice)
+                {
+                    await
+                    InvoiceLine2.
+                    setVendor_invoice(relatedVendor_invoice2);
+                }
+            
+                const relatedVendor_invoice3 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const InvoiceLine3 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (InvoiceLine3?.setVendor_invoice)
+                {
+                    await
+                    InvoiceLine3.
+                    setVendor_invoice(relatedVendor_invoice3);
+                }
+            
+                const relatedVendor_invoice4 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const InvoiceLine4 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (InvoiceLine4?.setVendor_invoice)
+                {
+                    await
+                    InvoiceLine4.
+                    setVendor_invoice(relatedVendor_invoice4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateInvoiceLineWithProduct() {
+            
+                const relatedProduct0 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const InvoiceLine0 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (InvoiceLine0?.setProduct)
+                {
+                    await
+                    InvoiceLine0.
+                    setProduct(relatedProduct0);
+                }
+            
+                const relatedProduct1 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const InvoiceLine1 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (InvoiceLine1?.setProduct)
+                {
+                    await
+                    InvoiceLine1.
+                    setProduct(relatedProduct1);
+                }
+            
+                const relatedProduct2 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const InvoiceLine2 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (InvoiceLine2?.setProduct)
+                {
+                    await
+                    InvoiceLine2.
+                    setProduct(relatedProduct2);
+                }
+            
+                const relatedProduct3 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const InvoiceLine3 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (InvoiceLine3?.setProduct)
+                {
+                    await
+                    InvoiceLine3.
+                    setProduct(relatedProduct3);
+                }
+            
+                const relatedProduct4 = await Products.findOne({
+                    offset: Math.floor(Math.random() * (await Products.count())),
+                });
+                const InvoiceLine4 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (InvoiceLine4?.setProduct)
+                {
+                    await
+                    InvoiceLine4.
+                    setProduct(relatedProduct4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateInvoiceLineWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const InvoiceLine0 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (InvoiceLine0?.setOrganization)
+                {
+                    await
+                    InvoiceLine0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const InvoiceLine1 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (InvoiceLine1?.setOrganization)
+                {
+                    await
+                    InvoiceLine1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const InvoiceLine2 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (InvoiceLine2?.setOrganization)
+                {
+                    await
+                    InvoiceLine2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const InvoiceLine3 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (InvoiceLine3?.setOrganization)
+                {
+                    await
+                    InvoiceLine3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const InvoiceLine4 = await InvoiceLines.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (InvoiceLine4?.setOrganization)
+                {
+                    await
+                    InvoiceLine4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associatePaymentWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Payment0 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Payment0?.setCompany)
+                {
+                    await
+                    Payment0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Payment1 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Payment1?.setCompany)
+                {
+                    await
+                    Payment1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Payment2 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Payment2?.setCompany)
+                {
+                    await
+                    Payment2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Payment3 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Payment3?.setCompany)
+                {
+                    await
+                    Payment3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Payment4 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Payment4?.setCompany)
+                {
+                    await
+                    Payment4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associatePaymentWithVendor() {
+            
+                const relatedVendor0 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const Payment0 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Payment0?.setVendor)
+                {
+                    await
+                    Payment0.
+                    setVendor(relatedVendor0);
+                }
+            
+                const relatedVendor1 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const Payment1 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Payment1?.setVendor)
+                {
+                    await
+                    Payment1.
+                    setVendor(relatedVendor1);
+                }
+            
+                const relatedVendor2 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const Payment2 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Payment2?.setVendor)
+                {
+                    await
+                    Payment2.
+                    setVendor(relatedVendor2);
+                }
+            
+                const relatedVendor3 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const Payment3 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Payment3?.setVendor)
+                {
+                    await
+                    Payment3.
+                    setVendor(relatedVendor3);
+                }
+            
+                const relatedVendor4 = await Vendors.findOne({
+                    offset: Math.floor(Math.random() * (await Vendors.count())),
+                });
+                const Payment4 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Payment4?.setVendor)
+                {
+                    await
+                    Payment4.
+                    setVendor(relatedVendor4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associatePaymentWithVendor_invoice() {
+            
+                const relatedVendor_invoice0 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const Payment0 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Payment0?.setVendor_invoice)
+                {
+                    await
+                    Payment0.
+                    setVendor_invoice(relatedVendor_invoice0);
+                }
+            
+                const relatedVendor_invoice1 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const Payment1 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Payment1?.setVendor_invoice)
+                {
+                    await
+                    Payment1.
+                    setVendor_invoice(relatedVendor_invoice1);
+                }
+            
+                const relatedVendor_invoice2 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const Payment2 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Payment2?.setVendor_invoice)
+                {
+                    await
+                    Payment2.
+                    setVendor_invoice(relatedVendor_invoice2);
+                }
+            
+                const relatedVendor_invoice3 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const Payment3 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Payment3?.setVendor_invoice)
+                {
+                    await
+                    Payment3.
+                    setVendor_invoice(relatedVendor_invoice3);
+                }
+            
+                const relatedVendor_invoice4 = await VendorInvoices.findOne({
+                    offset: Math.floor(Math.random() * (await VendorInvoices.count())),
+                });
+                const Payment4 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Payment4?.setVendor_invoice)
+                {
+                    await
+                    Payment4.
+                    setVendor_invoice(relatedVendor_invoice4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associatePaymentWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Payment0 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Payment0?.setOrganization)
+                {
+                    await
+                    Payment0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Payment1 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Payment1?.setOrganization)
+                {
+                    await
+                    Payment1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Payment2 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Payment2?.setOrganization)
+                {
+                    await
+                    Payment2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Payment3 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Payment3?.setOrganization)
+                {
+                    await
+                    Payment3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Payment4 = await Payments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Payment4?.setOrganization)
+                {
+                    await
+                    Payment4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateDepartmentWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Department0 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Department0?.setCompany)
+                {
+                    await
+                    Department0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Department1 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Department1?.setCompany)
+                {
+                    await
+                    Department1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Department2 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Department2?.setCompany)
+                {
+                    await
+                    Department2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Department3 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Department3?.setCompany)
+                {
+                    await
+                    Department3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Department4 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Department4?.setCompany)
+                {
+                    await
+                    Department4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateDepartmentWithManager() {
+            
+                const relatedManager0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Department0 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Department0?.setManager)
+                {
+                    await
+                    Department0.
+                    setManager(relatedManager0);
+                }
+            
+                const relatedManager1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Department1 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Department1?.setManager)
+                {
+                    await
+                    Department1.
+                    setManager(relatedManager1);
+                }
+            
+                const relatedManager2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Department2 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Department2?.setManager)
+                {
+                    await
+                    Department2.
+                    setManager(relatedManager2);
+                }
+            
+                const relatedManager3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Department3 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Department3?.setManager)
+                {
+                    await
+                    Department3.
+                    setManager(relatedManager3);
+                }
+            
+                const relatedManager4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Department4 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Department4?.setManager)
+                {
+                    await
+                    Department4.
+                    setManager(relatedManager4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+            
+            async function associateDepartmentWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Department0 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Department0?.setOrganization)
+                {
+                    await
+                    Department0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Department1 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Department1?.setOrganization)
+                {
+                    await
+                    Department1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Department2 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Department2?.setOrganization)
+                {
+                    await
+                    Department2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Department3 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Department3?.setOrganization)
+                {
+                    await
+                    Department3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Department4 = await Departments.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Department4?.setOrganization)
+                {
+                    await
+                    Department4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateDocumentTypeWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentType0 = await DocumentTypes.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (DocumentType0?.setOrganization)
+                {
+                    await
+                    DocumentType0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentType1 = await DocumentTypes.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (DocumentType1?.setOrganization)
+                {
+                    await
+                    DocumentType1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentType2 = await DocumentTypes.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (DocumentType2?.setOrganization)
+                {
+                    await
+                    DocumentType2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentType3 = await DocumentTypes.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (DocumentType3?.setOrganization)
+                {
+                    await
+                    DocumentType3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentType4 = await DocumentTypes.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (DocumentType4?.setOrganization)
+                {
+                    await
+                    DocumentType4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateDocumentWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Document0 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Document0?.setCompany)
+                {
+                    await
+                    Document0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Document1 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Document1?.setCompany)
+                {
+                    await
+                    Document1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Document2 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Document2?.setCompany)
+                {
+                    await
+                    Document2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Document3 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Document3?.setCompany)
+                {
+                    await
+                    Document3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const Document4 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Document4?.setCompany)
+                {
+                    await
+                    Document4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateDocumentWithDocument_type() {
+            
+                const relatedDocument_type0 = await DocumentTypes.findOne({
+                    offset: Math.floor(Math.random() * (await DocumentTypes.count())),
+                });
+                const Document0 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Document0?.setDocument_type)
+                {
+                    await
+                    Document0.
+                    setDocument_type(relatedDocument_type0);
+                }
+            
+                const relatedDocument_type1 = await DocumentTypes.findOne({
+                    offset: Math.floor(Math.random() * (await DocumentTypes.count())),
+                });
+                const Document1 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Document1?.setDocument_type)
+                {
+                    await
+                    Document1.
+                    setDocument_type(relatedDocument_type1);
+                }
+            
+                const relatedDocument_type2 = await DocumentTypes.findOne({
+                    offset: Math.floor(Math.random() * (await DocumentTypes.count())),
+                });
+                const Document2 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Document2?.setDocument_type)
+                {
+                    await
+                    Document2.
+                    setDocument_type(relatedDocument_type2);
+                }
+            
+                const relatedDocument_type3 = await DocumentTypes.findOne({
+                    offset: Math.floor(Math.random() * (await DocumentTypes.count())),
+                });
+                const Document3 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Document3?.setDocument_type)
+                {
+                    await
+                    Document3.
+                    setDocument_type(relatedDocument_type3);
+                }
+            
+                const relatedDocument_type4 = await DocumentTypes.findOne({
+                    offset: Math.floor(Math.random() * (await DocumentTypes.count())),
+                });
+                const Document4 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Document4?.setDocument_type)
+                {
+                    await
+                    Document4.
+                    setDocument_type(relatedDocument_type4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateDocumentWithOwner() {
+            
+                const relatedOwner0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Document0 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Document0?.setOwner)
+                {
+                    await
+                    Document0.
+                    setOwner(relatedOwner0);
+                }
+            
+                const relatedOwner1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Document1 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Document1?.setOwner)
+                {
+                    await
+                    Document1.
+                    setOwner(relatedOwner1);
+                }
+            
+                const relatedOwner2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Document2 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Document2?.setOwner)
+                {
+                    await
+                    Document2.
+                    setOwner(relatedOwner2);
+                }
+            
+                const relatedOwner3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Document3 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Document3?.setOwner)
+                {
+                    await
+                    Document3.
+                    setOwner(relatedOwner3);
+                }
+            
+                const relatedOwner4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Document4 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Document4?.setOwner)
+                {
+                    await
+                    Document4.
+                    setOwner(relatedOwner4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateDocumentWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Document0 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Document0?.setOrganization)
+                {
+                    await
+                    Document0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Document1 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Document1?.setOrganization)
+                {
+                    await
+                    Document1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Document2 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Document2?.setOrganization)
+                {
+                    await
+                    Document2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Document3 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Document3?.setOrganization)
+                {
+                    await
+                    Document3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Document4 = await Documents.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Document4?.setOrganization)
+                {
+                    await
+                    Document4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateDocumentLinkWithDocument() {
+            
+                const relatedDocument0 = await Documents.findOne({
+                    offset: Math.floor(Math.random() * (await Documents.count())),
+                });
+                const DocumentLink0 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (DocumentLink0?.setDocument)
+                {
+                    await
+                    DocumentLink0.
+                    setDocument(relatedDocument0);
+                }
+            
+                const relatedDocument1 = await Documents.findOne({
+                    offset: Math.floor(Math.random() * (await Documents.count())),
+                });
+                const DocumentLink1 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (DocumentLink1?.setDocument)
+                {
+                    await
+                    DocumentLink1.
+                    setDocument(relatedDocument1);
+                }
+            
+                const relatedDocument2 = await Documents.findOne({
+                    offset: Math.floor(Math.random() * (await Documents.count())),
+                });
+                const DocumentLink2 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (DocumentLink2?.setDocument)
+                {
+                    await
+                    DocumentLink2.
+                    setDocument(relatedDocument2);
+                }
+            
+                const relatedDocument3 = await Documents.findOne({
+                    offset: Math.floor(Math.random() * (await Documents.count())),
+                });
+                const DocumentLink3 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (DocumentLink3?.setDocument)
+                {
+                    await
+                    DocumentLink3.
+                    setDocument(relatedDocument3);
+                }
+            
+                const relatedDocument4 = await Documents.findOne({
+                    offset: Math.floor(Math.random() * (await Documents.count())),
+                });
+                const DocumentLink4 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (DocumentLink4?.setDocument)
+                {
+                    await
+                    DocumentLink4.
+                    setDocument(relatedDocument4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateDocumentLinkWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentLink0 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (DocumentLink0?.setOrganization)
+                {
+                    await
+                    DocumentLink0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentLink1 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (DocumentLink1?.setOrganization)
+                {
+                    await
+                    DocumentLink1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentLink2 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (DocumentLink2?.setOrganization)
+                {
+                    await
+                    DocumentLink2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentLink3 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (DocumentLink3?.setOrganization)
+                {
+                    await
+                    DocumentLink3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const DocumentLink4 = await DocumentLinks.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (DocumentLink4?.setOrganization)
+                {
+                    await
+                    DocumentLink4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateApprovalWorkflowWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ApprovalWorkflow0 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ApprovalWorkflow0?.setCompany)
+                {
+                    await
+                    ApprovalWorkflow0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ApprovalWorkflow1 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ApprovalWorkflow1?.setCompany)
+                {
+                    await
+                    ApprovalWorkflow1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ApprovalWorkflow2 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ApprovalWorkflow2?.setCompany)
+                {
+                    await
+                    ApprovalWorkflow2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ApprovalWorkflow3 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ApprovalWorkflow3?.setCompany)
+                {
+                    await
+                    ApprovalWorkflow3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const ApprovalWorkflow4 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ApprovalWorkflow4?.setCompany)
+                {
+                    await
+                    ApprovalWorkflow4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateApprovalWorkflowWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalWorkflow0 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ApprovalWorkflow0?.setOrganization)
+                {
+                    await
+                    ApprovalWorkflow0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalWorkflow1 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ApprovalWorkflow1?.setOrganization)
+                {
+                    await
+                    ApprovalWorkflow1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalWorkflow2 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ApprovalWorkflow2?.setOrganization)
+                {
+                    await
+                    ApprovalWorkflow2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalWorkflow3 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ApprovalWorkflow3?.setOrganization)
+                {
+                    await
+                    ApprovalWorkflow3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalWorkflow4 = await ApprovalWorkflows.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ApprovalWorkflow4?.setOrganization)
+                {
+                    await
+                    ApprovalWorkflow4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateApprovalStepWithApproval_workflow() {
+            
+                const relatedApproval_workflow0 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const ApprovalStep0 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ApprovalStep0?.setApproval_workflow)
+                {
+                    await
+                    ApprovalStep0.
+                    setApproval_workflow(relatedApproval_workflow0);
+                }
+            
+                const relatedApproval_workflow1 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const ApprovalStep1 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ApprovalStep1?.setApproval_workflow)
+                {
+                    await
+                    ApprovalStep1.
+                    setApproval_workflow(relatedApproval_workflow1);
+                }
+            
+                const relatedApproval_workflow2 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const ApprovalStep2 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ApprovalStep2?.setApproval_workflow)
+                {
+                    await
+                    ApprovalStep2.
+                    setApproval_workflow(relatedApproval_workflow2);
+                }
+            
+                const relatedApproval_workflow3 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const ApprovalStep3 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ApprovalStep3?.setApproval_workflow)
+                {
+                    await
+                    ApprovalStep3.
+                    setApproval_workflow(relatedApproval_workflow3);
+                }
+            
+                const relatedApproval_workflow4 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const ApprovalStep4 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ApprovalStep4?.setApproval_workflow)
+                {
+                    await
+                    ApprovalStep4.
+                    setApproval_workflow(relatedApproval_workflow4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateApprovalStepWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalStep0 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ApprovalStep0?.setOrganization)
+                {
+                    await
+                    ApprovalStep0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalStep1 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ApprovalStep1?.setOrganization)
+                {
+                    await
+                    ApprovalStep1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalStep2 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ApprovalStep2?.setOrganization)
+                {
+                    await
+                    ApprovalStep2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalStep3 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ApprovalStep3?.setOrganization)
+                {
+                    await
+                    ApprovalStep3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ApprovalStep4 = await ApprovalSteps.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ApprovalStep4?.setOrganization)
+                {
+                    await
+                    ApprovalStep4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateApprovalWithApproval_workflow() {
+            
+                const relatedApproval_workflow0 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const Approval0 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Approval0?.setApproval_workflow)
+                {
+                    await
+                    Approval0.
+                    setApproval_workflow(relatedApproval_workflow0);
+                }
+            
+                const relatedApproval_workflow1 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const Approval1 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Approval1?.setApproval_workflow)
+                {
+                    await
+                    Approval1.
+                    setApproval_workflow(relatedApproval_workflow1);
+                }
+            
+                const relatedApproval_workflow2 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const Approval2 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Approval2?.setApproval_workflow)
+                {
+                    await
+                    Approval2.
+                    setApproval_workflow(relatedApproval_workflow2);
+                }
+            
+                const relatedApproval_workflow3 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const Approval3 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Approval3?.setApproval_workflow)
+                {
+                    await
+                    Approval3.
+                    setApproval_workflow(relatedApproval_workflow3);
+                }
+            
+                const relatedApproval_workflow4 = await ApprovalWorkflows.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalWorkflows.count())),
+                });
+                const Approval4 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Approval4?.setApproval_workflow)
+                {
+                    await
+                    Approval4.
+                    setApproval_workflow(relatedApproval_workflow4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateApprovalWithApproval_step() {
+            
+                const relatedApproval_step0 = await ApprovalSteps.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalSteps.count())),
+                });
+                const Approval0 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Approval0?.setApproval_step)
+                {
+                    await
+                    Approval0.
+                    setApproval_step(relatedApproval_step0);
+                }
+            
+                const relatedApproval_step1 = await ApprovalSteps.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalSteps.count())),
+                });
+                const Approval1 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Approval1?.setApproval_step)
+                {
+                    await
+                    Approval1.
+                    setApproval_step(relatedApproval_step1);
+                }
+            
+                const relatedApproval_step2 = await ApprovalSteps.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalSteps.count())),
+                });
+                const Approval2 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Approval2?.setApproval_step)
+                {
+                    await
+                    Approval2.
+                    setApproval_step(relatedApproval_step2);
+                }
+            
+                const relatedApproval_step3 = await ApprovalSteps.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalSteps.count())),
+                });
+                const Approval3 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Approval3?.setApproval_step)
+                {
+                    await
+                    Approval3.
+                    setApproval_step(relatedApproval_step3);
+                }
+            
+                const relatedApproval_step4 = await ApprovalSteps.findOne({
+                    offset: Math.floor(Math.random() * (await ApprovalSteps.count())),
+                });
+                const Approval4 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Approval4?.setApproval_step)
+                {
+                    await
+                    Approval4.
+                    setApproval_step(relatedApproval_step4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateApprovalWithRequested_by() {
+            
+                const relatedRequested_by0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval0 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Approval0?.setRequested_by)
+                {
+                    await
+                    Approval0.
+                    setRequested_by(relatedRequested_by0);
+                }
+            
+                const relatedRequested_by1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval1 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Approval1?.setRequested_by)
+                {
+                    await
+                    Approval1.
+                    setRequested_by(relatedRequested_by1);
+                }
+            
+                const relatedRequested_by2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval2 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Approval2?.setRequested_by)
+                {
+                    await
+                    Approval2.
+                    setRequested_by(relatedRequested_by2);
+                }
+            
+                const relatedRequested_by3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval3 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Approval3?.setRequested_by)
+                {
+                    await
+                    Approval3.
+                    setRequested_by(relatedRequested_by3);
+                }
+            
+                const relatedRequested_by4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval4 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Approval4?.setRequested_by)
+                {
+                    await
+                    Approval4.
+                    setRequested_by(relatedRequested_by4);
+                }
+            
+        }
+        
+    
+        
+            
+            async function associateApprovalWithAssigned_to() {
+            
+                const relatedAssigned_to0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval0 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Approval0?.setAssigned_to)
+                {
+                    await
+                    Approval0.
+                    setAssigned_to(relatedAssigned_to0);
+                }
+            
+                const relatedAssigned_to1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval1 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Approval1?.setAssigned_to)
+                {
+                    await
+                    Approval1.
+                    setAssigned_to(relatedAssigned_to1);
+                }
+            
+                const relatedAssigned_to2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval2 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Approval2?.setAssigned_to)
+                {
+                    await
+                    Approval2.
+                    setAssigned_to(relatedAssigned_to2);
+                }
+            
+                const relatedAssigned_to3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval3 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Approval3?.setAssigned_to)
+                {
+                    await
+                    Approval3.
+                    setAssigned_to(relatedAssigned_to3);
+                }
+            
+                const relatedAssigned_to4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const Approval4 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Approval4?.setAssigned_to)
+                {
+                    await
+                    Approval4.
+                    setAssigned_to(relatedAssigned_to4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateApprovalWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Approval0 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (Approval0?.setOrganization)
+                {
+                    await
+                    Approval0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Approval1 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (Approval1?.setOrganization)
+                {
+                    await
+                    Approval1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Approval2 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (Approval2?.setOrganization)
+                {
+                    await
+                    Approval2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Approval3 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (Approval3?.setOrganization)
+                {
+                    await
+                    Approval3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const Approval4 = await Approvals.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (Approval4?.setOrganization)
+                {
+                    await
+                    Approval4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateActivityLogWithActor() {
+            
+                const relatedActor0 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const ActivityLog0 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ActivityLog0?.setActor)
+                {
+                    await
+                    ActivityLog0.
+                    setActor(relatedActor0);
+                }
+            
+                const relatedActor1 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const ActivityLog1 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ActivityLog1?.setActor)
+                {
+                    await
+                    ActivityLog1.
+                    setActor(relatedActor1);
+                }
+            
+                const relatedActor2 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const ActivityLog2 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ActivityLog2?.setActor)
+                {
+                    await
+                    ActivityLog2.
+                    setActor(relatedActor2);
+                }
+            
+                const relatedActor3 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const ActivityLog3 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ActivityLog3?.setActor)
+                {
+                    await
+                    ActivityLog3.
+                    setActor(relatedActor3);
+                }
+            
+                const relatedActor4 = await Users.findOne({
+                    offset: Math.floor(Math.random() * (await Users.count())),
+                });
+                const ActivityLog4 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ActivityLog4?.setActor)
+                {
+                    await
+                    ActivityLog4.
+                    setActor(relatedActor4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateActivityLogWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ActivityLog0 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (ActivityLog0?.setOrganization)
+                {
+                    await
+                    ActivityLog0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ActivityLog1 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (ActivityLog1?.setOrganization)
+                {
+                    await
+                    ActivityLog1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ActivityLog2 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (ActivityLog2?.setOrganization)
+                {
+                    await
+                    ActivityLog2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ActivityLog3 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (ActivityLog3?.setOrganization)
+                {
+                    await
+                    ActivityLog3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const ActivityLog4 = await ActivityLogs.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (ActivityLog4?.setOrganization)
+                {
+                    await
+                    ActivityLog4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+    
+    
+    
+        
+            
+            async function associateUiAnnouncementWithCompany() {
+            
+                const relatedCompany0 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UiAnnouncement0 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (UiAnnouncement0?.setCompany)
+                {
+                    await
+                    UiAnnouncement0.
+                    setCompany(relatedCompany0);
+                }
+            
+                const relatedCompany1 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UiAnnouncement1 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (UiAnnouncement1?.setCompany)
+                {
+                    await
+                    UiAnnouncement1.
+                    setCompany(relatedCompany1);
+                }
+            
+                const relatedCompany2 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UiAnnouncement2 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (UiAnnouncement2?.setCompany)
+                {
+                    await
+                    UiAnnouncement2.
+                    setCompany(relatedCompany2);
+                }
+            
+                const relatedCompany3 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UiAnnouncement3 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (UiAnnouncement3?.setCompany)
+                {
+                    await
+                    UiAnnouncement3.
+                    setCompany(relatedCompany3);
+                }
+            
+                const relatedCompany4 = await Companies.findOne({
+                    offset: Math.floor(Math.random() * (await Companies.count())),
+                });
+                const UiAnnouncement4 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (UiAnnouncement4?.setCompany)
+                {
+                    await
+                    UiAnnouncement4.
+                    setCompany(relatedCompany4);
+                }
+            
+        }
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+            
+            async function associateUiAnnouncementWithOrganization() {
+            
+                const relatedOrganization0 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UiAnnouncement0 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 0
+                });
+                if (UiAnnouncement0?.setOrganization)
+                {
+                    await
+                    UiAnnouncement0.
+                    setOrganization(relatedOrganization0);
+                }
+            
+                const relatedOrganization1 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UiAnnouncement1 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 1
+                });
+                if (UiAnnouncement1?.setOrganization)
+                {
+                    await
+                    UiAnnouncement1.
+                    setOrganization(relatedOrganization1);
+                }
+            
+                const relatedOrganization2 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UiAnnouncement2 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 2
+                });
+                if (UiAnnouncement2?.setOrganization)
+                {
+                    await
+                    UiAnnouncement2.
+                    setOrganization(relatedOrganization2);
+                }
+            
+                const relatedOrganization3 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UiAnnouncement3 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 3
+                });
+                if (UiAnnouncement3?.setOrganization)
+                {
+                    await
+                    UiAnnouncement3.
+                    setOrganization(relatedOrganization3);
+                }
+            
+                const relatedOrganization4 = await Organizations.findOne({
+                    offset: Math.floor(Math.random() * (await Organizations.count())),
+                });
+                const UiAnnouncement4 = await UiAnnouncements.findOne({
+                    order: [['id', 'ASC']],
+                    offset: 4
+                });
+                if (UiAnnouncement4?.setOrganization)
+                {
+                    await
+                    UiAnnouncement4.
+                    setOrganization(relatedOrganization4);
+                }
+            
+        }
+        
+    
+
+
+module.exports = {
+    up: async (queryInterface, Sequelize) => {
+        
+            
+            
+            
+            
+            
+                
+                await Organizations.bulkCreate(OrganizationsData);
+                
+            
+            
+                
+                await Companies.bulkCreate(CompaniesData);
+                
+            
+            
+                
+                await UserRoleAssignments.bulkCreate(UserRoleAssignmentsData);
+                
+            
+            
+                
+                await RolePermissionMappings.bulkCreate(RolePermissionMappingsData);
+                
+            
+            
+                
+                await Vendors.bulkCreate(VendorsData);
+                
+            
+            
+                
+                await Warehouses.bulkCreate(WarehousesData);
+                
+            
+            
+                
+                await ProductCategories.bulkCreate(ProductCategoriesData);
+                
+            
+            
+                
+                await Products.bulkCreate(ProductsData);
+                
+            
+            
+                
+                await PurchaseRequisitions.bulkCreate(PurchaseRequisitionsData);
+                
+            
+            
+                
+                await PurchaseRequisitionLines.bulkCreate(PurchaseRequisitionLinesData);
+                
+            
+            
+                
+                await PurchaseOrders.bulkCreate(PurchaseOrdersData);
+                
+            
+            
+                
+                await PurchaseOrderLines.bulkCreate(PurchaseOrderLinesData);
+                
+            
+            
+                
+                await GoodsReceipts.bulkCreate(GoodsReceiptsData);
+                
+            
+            
+                
+                await GoodsReceiptLines.bulkCreate(GoodsReceiptLinesData);
+                
+            
+            
+                
+                await VendorInvoices.bulkCreate(VendorInvoicesData);
+                
+            
+            
+                
+                await InvoiceLines.bulkCreate(InvoiceLinesData);
+                
+            
+            
+                
+                await Payments.bulkCreate(PaymentsData);
+                
+            
+            
+                
+                await Departments.bulkCreate(DepartmentsData);
+                
+            
+            
+                
+                await DocumentTypes.bulkCreate(DocumentTypesData);
+                
+            
+            
+                
+                await Documents.bulkCreate(DocumentsData);
+                
+            
+            
+                
+                await DocumentLinks.bulkCreate(DocumentLinksData);
+                
+            
+            
+                
+                await ApprovalWorkflows.bulkCreate(ApprovalWorkflowsData);
+                
+            
+            
+                
+                await ApprovalSteps.bulkCreate(ApprovalStepsData);
+                
+            
+            
+                
+                await Approvals.bulkCreate(ApprovalsData);
+                
+            
+            
+                
+                await ActivityLogs.bulkCreate(ActivityLogsData);
+                
+            
+            
+                
+                await UiAnnouncements.bulkCreate(UiAnnouncementsData);
+                
+            
+            await Promise.all([
+            
+                
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        // Similar logic for "relation_many"
+                    
+                
+                    
+                        
+                        await associateUserWithOrganization(),
+                    
+                
+            
+                
+                
+                
+                
+                    
+                
+            
+                
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateCompanyWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateUserRoleAssignmentWithUser(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associateUserRoleAssignmentWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateUserRoleAssignmentWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                
+                    
+                        
+                        await associateRolePermissionMappingWithPermission(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associateRolePermissionMappingWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateVendorWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateVendorWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateWarehousWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateWarehousWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateProductCategoryWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateProductCategoryWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateProductWithCompany(),
+                    
+                
+                    
+                        
+                        await associateProductWithCategory(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateProductWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associatePurchaseRequisitionWithCompany(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionWithRequested_by(),
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionWithDepartment(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associatePurchaseRequisitionLineWithPurchase_requisition(),
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionLineWithProduct(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionLineWithWarehouse(),
+                    
+                
+                    
+                        
+                        await associatePurchaseRequisitionLineWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associatePurchaseOrderWithCompany(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderWithVendor(),
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderWithBuyer(),
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderWithSource_requisition(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associatePurchaseOrderLineWithPurchase_order(),
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderLineWithProduct(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderLineWithWarehouse(),
+                    
+                
+                    
+                        
+                        await associatePurchaseOrderLineWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateGoodsReceiptWithCompany(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptWithPurchase_order(),
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptWithReceived_by(),
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptWithWarehouse(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateGoodsReceiptLineWithGoods_receipt(),
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptLineWithPurchase_order_line(),
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptLineWithProduct(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateGoodsReceiptLineWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateVendorInvoiceWithCompany(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associateVendorInvoiceWithVendor(),
+                    
+                
+                    
+                        
+                        await associateVendorInvoiceWithPurchase_order(),
+                    
+                
+                    
+                        
+                        await associateVendorInvoiceWithGoods_receipt(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateVendorInvoiceWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateInvoiceLineWithVendor_invoice(),
+                    
+                
+                    
+                        
+                        await associateInvoiceLineWithProduct(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateInvoiceLineWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associatePaymentWithCompany(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePaymentWithVendor(),
+                    
+                
+                    
+                        
+                        await associatePaymentWithVendor_invoice(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associatePaymentWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateDepartmentWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDepartmentWithManager(),
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDepartmentWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDocumentTypeWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateDocumentWithCompany(),
+                    
+                
+                    
+                        
+                        await associateDocumentWithDocument_type(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDocumentWithOwner(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDocumentWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateDocumentLinkWithDocument(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateDocumentLinkWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateApprovalWorkflowWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateApprovalWorkflowWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateApprovalStepWithApproval_workflow(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateApprovalStepWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateApprovalWithApproval_workflow(),
+                    
+                
+                    
+                        
+                        await associateApprovalWithApproval_step(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateApprovalWithRequested_by(),
+                    
+                
+                    
+                        
+                        await associateApprovalWithAssigned_to(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateApprovalWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateActivityLogWithActor(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateActivityLogWithOrganization(),
+                    
+                
+            
+                
+                
+                    
+                        
+                        await associateUiAnnouncementWithCompany(),
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                
+                    
+                        
+                        await associateUiAnnouncementWithOrganization(),
+                    
+                
+            
+            ]);
+        
+    },
+
+    down: async (queryInterface, Sequelize) => {
+        
+            
+            
+            
+            
+            
+            await queryInterface.bulkDelete('organizations', null, {});
+            
+            
+            await queryInterface.bulkDelete('companies', null, {});
+            
+            
+            await queryInterface.bulkDelete('user_role_assignments', null, {});
+            
+            
+            await queryInterface.bulkDelete('role_permission_mappings', null, {});
+            
+            
+            await queryInterface.bulkDelete('vendors', null, {});
+            
+            
+            await queryInterface.bulkDelete('warehouses', null, {});
+            
+            
+            await queryInterface.bulkDelete('product_categories', null, {});
+            
+            
+            await queryInterface.bulkDelete('products', null, {});
+            
+            
+            await queryInterface.bulkDelete('purchase_requisitions', null, {});
+            
+            
+            await queryInterface.bulkDelete('purchase_requisition_lines', null, {});
+            
+            
+            await queryInterface.bulkDelete('purchase_orders', null, {});
+            
+            
+            await queryInterface.bulkDelete('purchase_order_lines', null, {});
+            
+            
+            await queryInterface.bulkDelete('goods_receipts', null, {});
+            
+            
+            await queryInterface.bulkDelete('goods_receipt_lines', null, {});
+            
+            
+            await queryInterface.bulkDelete('vendor_invoices', null, {});
+            
+            
+            await queryInterface.bulkDelete('invoice_lines', null, {});
+            
+            
+            await queryInterface.bulkDelete('payments', null, {});
+            
+            
+            await queryInterface.bulkDelete('departments', null, {});
+            
+            
+            await queryInterface.bulkDelete('document_types', null, {});
+            
+            
+            await queryInterface.bulkDelete('documents', null, {});
+            
+            
+            await queryInterface.bulkDelete('document_links', null, {});
+            
+            
+            await queryInterface.bulkDelete('approval_workflows', null, {});
+            
+            
+            await queryInterface.bulkDelete('approval_steps', null, {});
+            
+            
+            await queryInterface.bulkDelete('approvals', null, {});
+            
+            
+            await queryInterface.bulkDelete('activity_logs', null, {});
+            
+            
+            await queryInterface.bulkDelete('ui_announcements', null, {});
+            
+        
+    },
+};
\ No newline at end of file
diff --git a/backend/src/db/utils.js b/backend/src/db/utils.js
new file mode 100644
index 0000000..c253a07
--- /dev/null
+++ b/backend/src/db/utils.js
@@ -0,0 +1,27 @@
+const validator = require('validator');
+const { v4: uuid } = require('uuid');
+const Sequelize = require('./models').Sequelize;
+
+module.exports = class Utils {
+  static uuid(value) {
+    let id = value;
+
+    if (!validator.isUUID(id)) {
+      id = uuid();
+    }
+
+    return id;
+  }
+
+  static ilike(model, column, value) {
+    return Sequelize.where(
+      Sequelize.fn(
+        'lower',
+        Sequelize.col(`${model}.${column}`),
+      ),
+      {
+        [Sequelize.Op.like]: `%${value}%`.toLowerCase(),
+      },
+    );
+  }
+};
diff --git a/backend/src/helpers.js b/backend/src/helpers.js
new file mode 100644
index 0000000..c38440d
--- /dev/null
+++ b/backend/src/helpers.js
@@ -0,0 +1,23 @@
+const jwt = require('jsonwebtoken');
+const config = require('./config');
+
+module.exports = class Helpers {
+  static wrapAsync(fn) {
+    return function (req, res, next) {
+      fn(req, res, next).catch(next);
+    };
+  }
+
+  static commonErrorHandler(error, req, res, next) {
+    if ([400, 403, 404].includes(error.code)) {
+      return res.status(error.code).send(error.message);
+    }
+
+    console.error(error);
+    return res.status(500).send(error.message);
+  }
+
+  static jwtSign(data) {
+    return jwt.sign(data, config.secret_key, {expiresIn: '6h'});
+  };
+};
diff --git a/backend/src/index.js b/backend/src/index.js
new file mode 100644
index 0000000..65cacaf
--- /dev/null
+++ b/backend/src/index.js
@@ -0,0 +1,247 @@
+
+const express = require('express');
+const cors = require('cors');
+const app = express();
+const passport = require('passport');
+const path = require('path');
+const fs = require('fs');
+const bodyParser = require('body-parser');
+const db = require('./db/models');
+const config = require('./config');
+const swaggerUI = require('swagger-ui-express');
+const swaggerJsDoc = require('swagger-jsdoc');
+
+const authRoutes = require('./routes/auth');
+const fileRoutes = require('./routes/file');
+const searchRoutes = require('./routes/search');
+const sqlRoutes = require('./routes/sql');
+const pexelsRoutes = require('./routes/pexels');
+
+const organizationForAuthRoutes = require('./routes/organizationLogin');
+
+const openaiRoutes = require('./routes/openai');
+
+
+
+const usersRoutes = require('./routes/users');
+
+const rolesRoutes = require('./routes/roles');
+
+const permissionsRoutes = require('./routes/permissions');
+
+const organizationsRoutes = require('./routes/organizations');
+
+const companiesRoutes = require('./routes/companies');
+
+const user_role_assignmentsRoutes = require('./routes/user_role_assignments');
+
+const role_permission_mappingsRoutes = require('./routes/role_permission_mappings');
+
+const vendorsRoutes = require('./routes/vendors');
+
+const warehousesRoutes = require('./routes/warehouses');
+
+const product_categoriesRoutes = require('./routes/product_categories');
+
+const productsRoutes = require('./routes/products');
+
+const purchase_requisitionsRoutes = require('./routes/purchase_requisitions');
+
+const purchase_requisition_linesRoutes = require('./routes/purchase_requisition_lines');
+
+const purchase_ordersRoutes = require('./routes/purchase_orders');
+
+const purchase_order_linesRoutes = require('./routes/purchase_order_lines');
+
+const goods_receiptsRoutes = require('./routes/goods_receipts');
+
+const goods_receipt_linesRoutes = require('./routes/goods_receipt_lines');
+
+const vendor_invoicesRoutes = require('./routes/vendor_invoices');
+
+const invoice_linesRoutes = require('./routes/invoice_lines');
+
+const paymentsRoutes = require('./routes/payments');
+
+const departmentsRoutes = require('./routes/departments');
+
+const document_typesRoutes = require('./routes/document_types');
+
+const documentsRoutes = require('./routes/documents');
+
+const document_linksRoutes = require('./routes/document_links');
+
+const approval_workflowsRoutes = require('./routes/approval_workflows');
+
+const approval_stepsRoutes = require('./routes/approval_steps');
+
+const approvalsRoutes = require('./routes/approvals');
+
+const activity_logsRoutes = require('./routes/activity_logs');
+
+const ui_announcementsRoutes = require('./routes/ui_announcements');
+
+
+const getBaseUrl = (url) => {
+  if (!url) return '';
+  return url.endsWith('/api') ? url.slice(0, -4) : url;
+};
+
+const options = {
+  definition: {
+    openapi: "3.0.0",
+      info: {
+        version: "1.0.0",
+        title: "Modern ERP Redesign",
+        description: "Modern ERP Redesign Online REST API for Testing and Prototyping application. You can perform all major operations with your entities - create, delete and etc.",
+      },
+    servers: [
+      {
+        url: getBaseUrl(process.env.NEXT_PUBLIC_BACK_API) || config.swaggerUrl,
+        description: "Development server",
+      }
+    ],
+    components: {
+      securitySchemes: {
+        bearerAuth: {
+          type: 'http',
+          scheme: 'bearer',
+          bearerFormat: 'JWT',
+        }
+      },
+      responses: {
+        UnauthorizedError: {
+          description: "Access token is missing or invalid"
+        }
+      }
+    },
+    security: [{
+      bearerAuth: []
+    }]
+  },
+  apis: ["./src/routes/*.js"],
+};
+
+const specs = swaggerJsDoc(options);
+app.use('/api-docs', function (req, res, next) {
+    swaggerUI.host = getBaseUrl(process.env.NEXT_PUBLIC_BACK_API) || req.get('host');
+    next()
+  }, swaggerUI.serve, swaggerUI.setup(specs))
+
+app.use(cors({origin: true}));
+require('./auth/auth');
+
+app.use(bodyParser.json());
+
+app.use('/api/auth', authRoutes);
+app.use('/api/file', fileRoutes);
+app.use('/api/pexels', pexelsRoutes);
+app.enable('trust proxy');
+
+
+app.use('/api/users', passport.authenticate('jwt', {session: false}), usersRoutes);
+
+app.use('/api/roles', passport.authenticate('jwt', {session: false}), rolesRoutes);
+
+app.use('/api/permissions', passport.authenticate('jwt', {session: false}), permissionsRoutes);
+
+app.use('/api/organizations', passport.authenticate('jwt', {session: false}), organizationsRoutes);
+
+app.use('/api/companies', passport.authenticate('jwt', {session: false}), companiesRoutes);
+
+app.use('/api/user_role_assignments', passport.authenticate('jwt', {session: false}), user_role_assignmentsRoutes);
+
+app.use('/api/role_permission_mappings', passport.authenticate('jwt', {session: false}), role_permission_mappingsRoutes);
+
+app.use('/api/vendors', passport.authenticate('jwt', {session: false}), vendorsRoutes);
+
+app.use('/api/warehouses', passport.authenticate('jwt', {session: false}), warehousesRoutes);
+
+app.use('/api/product_categories', passport.authenticate('jwt', {session: false}), product_categoriesRoutes);
+
+app.use('/api/products', passport.authenticate('jwt', {session: false}), productsRoutes);
+
+app.use('/api/purchase_requisitions', passport.authenticate('jwt', {session: false}), purchase_requisitionsRoutes);
+
+app.use('/api/purchase_requisition_lines', passport.authenticate('jwt', {session: false}), purchase_requisition_linesRoutes);
+
+app.use('/api/purchase_orders', passport.authenticate('jwt', {session: false}), purchase_ordersRoutes);
+
+app.use('/api/purchase_order_lines', passport.authenticate('jwt', {session: false}), purchase_order_linesRoutes);
+
+app.use('/api/goods_receipts', passport.authenticate('jwt', {session: false}), goods_receiptsRoutes);
+
+app.use('/api/goods_receipt_lines', passport.authenticate('jwt', {session: false}), goods_receipt_linesRoutes);
+
+app.use('/api/vendor_invoices', passport.authenticate('jwt', {session: false}), vendor_invoicesRoutes);
+
+app.use('/api/invoice_lines', passport.authenticate('jwt', {session: false}), invoice_linesRoutes);
+
+app.use('/api/payments', passport.authenticate('jwt', {session: false}), paymentsRoutes);
+
+app.use('/api/departments', passport.authenticate('jwt', {session: false}), departmentsRoutes);
+
+app.use('/api/document_types', passport.authenticate('jwt', {session: false}), document_typesRoutes);
+
+app.use('/api/documents', passport.authenticate('jwt', {session: false}), documentsRoutes);
+
+app.use('/api/document_links', passport.authenticate('jwt', {session: false}), document_linksRoutes);
+
+app.use('/api/approval_workflows', passport.authenticate('jwt', {session: false}), approval_workflowsRoutes);
+
+app.use('/api/approval_steps', passport.authenticate('jwt', {session: false}), approval_stepsRoutes);
+
+app.use('/api/approvals', passport.authenticate('jwt', {session: false}), approvalsRoutes);
+
+app.use('/api/activity_logs', passport.authenticate('jwt', {session: false}), activity_logsRoutes);
+
+app.use('/api/ui_announcements', passport.authenticate('jwt', {session: false}), ui_announcementsRoutes);
+
+app.use(
+    '/api/openai',
+    passport.authenticate('jwt', { session: false }),
+    openaiRoutes,
+);
+app.use(
+    '/api/ai',
+    passport.authenticate('jwt', { session: false }),
+    openaiRoutes,
+);
+
+app.use(
+  '/api/search',
+  passport.authenticate('jwt', { session: false }),
+  searchRoutes);
+app.use(
+  '/api/sql',
+  passport.authenticate('jwt', { session: false }),
+  sqlRoutes);
+
+app.use(
+  '/api/org-for-auth',
+  organizationForAuthRoutes,
+  );
+
+  
+const publicDir = path.join(
+  __dirname,
+  '../public',
+);
+
+if (fs.existsSync(publicDir)) {
+  app.use('/', express.static(publicDir));
+
+  app.get('*', function(request, response) {
+    response.sendFile(
+      path.resolve(publicDir, 'index.html'),
+    );
+  });
+}
+
+const PORT = process.env.NODE_ENV === 'dev_stage' ? 3000 : 8080;
+
+  app.listen(PORT, () => {
+    console.log(`Listening on port ${PORT}`);
+  });
+
+module.exports = app;
diff --git a/backend/src/middlewares/check-permissions.js b/backend/src/middlewares/check-permissions.js
new file mode 100644
index 0000000..77740c7
--- /dev/null
+++ b/backend/src/middlewares/check-permissions.js
@@ -0,0 +1,149 @@
+
+const ValidationError = require('../services/notifications/errors/validation');
+const RolesDBApi = require('../db/api/roles');
+
+// Cache for the 'Public' role object
+let publicRoleCache = null;
+
+// Function to asynchronously fetch and cache the 'Public' role
+async function fetchAndCachePublicRole() {
+    try {
+        // Use RolesDBApi to find the role by name 'Public'
+        publicRoleCache = await RolesDBApi.findBy({ name: 'Public' });
+
+        if (!publicRoleCache) {
+            console.error("WARNING: Role 'Public' not found in database during middleware startup. Check your migrations.");
+            // The system might not function correctly without this role. May need to throw an error or use a fallback stub.
+        } else {
+            console.log("'Public' role successfully loaded and cached.");
+        }
+    } catch (error) {
+        console.error("Error fetching 'Public' role during middleware startup:", error);
+        // Handle the error during startup fetch
+        throw error; // Important to know if the app can proceed without the Public role
+    }
+}
+
+// Trigger the role fetching when the check-permissions.js module is imported/loaded
+// This should happen during application startup when routes are being configured.
+fetchAndCachePublicRole().catch(error => {
+    // Handle the case where the fetchAndCachePublicRole promise is rejected
+    console.error("Critical error during permissions middleware initialization:", error);
+    // Decide here if the process should exit if the Public role is essential.
+    // process.exit(1);
+});
+
+/**
+ * Middleware creator to check if the current user (or Public role) has a specific permission.
+ * @param {string} permission - The name of the required permission.
+ * @return {import("express").RequestHandler} Express middleware function.
+ */
+function checkPermissions(permission) {
+    return async (req, res, next) => {
+        const { currentUser } = req;
+
+        // 1. Check self-access bypass (only if the user is authenticated)
+        if (currentUser && (currentUser.id === req.params.id || currentUser.id === req.body.id)) {
+            return next(); // User has access to their own resource
+        }
+
+        // 2. Check Custom Permissions (only if the user is authenticated)
+        if (currentUser) {
+            // Ensure custom_permissions is an array before using find
+            const customPermissions = Array.isArray(currentUser.custom_permissions)
+                ? currentUser.custom_permissions
+                : [];
+            const userPermission = customPermissions.find(
+                (cp) => cp.name === permission,
+            );
+            if (userPermission) {
+                return next(); // User has a custom permission
+            }
+        }
+
+        // 3. Determine the "effective" role for permission check
+        let effectiveRole = null;
+        try {
+            if (currentUser && currentUser.app_role) {
+                // User is authenticated and has an assigned role
+                effectiveRole = currentUser.app_role;
+            } else {
+                // User is NOT authenticated OR is authenticated but has no role
+                // Use the cached 'Public' role
+                if (!publicRoleCache) {
+                    // If the cache is unexpectedly empty (e.g., startup error caught),
+                    // we can try fetching the role again synchronously (less ideal) or just deny access.
+                    console.error("Public role cache is empty. Attempting synchronous fetch...");
+                    // Less efficient fallback option:
+                    effectiveRole = await RolesDBApi.findBy({ name: 'Public' }); // Could be slow
+                    if (!effectiveRole) {
+                        // If even the synchronous attempt failed
+                        return next(new Error("Internal Server Error: Public role missing and cannot be fetched."));
+                    }
+                } else {
+                    effectiveRole = publicRoleCache; // Use the cached object
+                }
+            }
+
+            // Check if we got a valid role object
+            if (!effectiveRole) {
+                return next(new Error("Internal Server Error: Could not determine effective role."));
+            }
+
+            // 4. Check Permissions on the "effective" role
+            // Assume the effectiveRole object (from app_role or RolesDBApi) has a getPermissions() method
+            // or a 'permissions' property (if permissions are eagerly loaded).
+            let rolePermissions = [];
+            if (typeof effectiveRole.getPermissions === 'function') {
+                rolePermissions = await effectiveRole.getPermissions(); // Get permissions asynchronously if the method exists
+            } else if (Array.isArray(effectiveRole.permissions)) {
+                rolePermissions = effectiveRole.permissions; // Or take from property if permissions are pre-loaded
+            } else {
+                console.error("Role object lacks getPermissions() method or permissions property:", effectiveRole);
+                return next(new Error("Internal Server Error: Invalid role object format."));
+            }
+
+
+            if (rolePermissions.find((p) => p.name === permission)) {
+                next(); // The "effective" role has the required permission
+            } else {
+                // The "effective" role does not have the required permission
+                const roleName = effectiveRole.name || 'unknown role';
+                next(new ValidationError('auth.forbidden', `Role '${roleName}' denied access to '${permission}'.`));
+            }
+
+        } catch (e) {
+            // Handle errors during role or permission fetching
+            console.error("Error during permission check:", e);
+            next(e); // Pass the error to the next middleware
+        }
+    };
+}
+
+const METHOD_MAP = {
+  POST: 'CREATE',
+  GET: 'READ',
+  PUT: 'UPDATE',
+  PATCH: 'UPDATE',
+  DELETE: 'DELETE',
+};
+
+/**
+ * Middleware creator to check standard CRUD permissions based on HTTP method and entity name.
+ * @param {string} name - The name of the entity.
+ * @return {import("express").RequestHandler} Express middleware function.
+ */
+function checkCrudPermissions(name) {
+    return (req, res, next) => {
+        // Dynamically determine the permission name (e.g., 'READ_USERS')
+        const permissionName = `${METHOD_MAP[req.method]}_${name.toUpperCase()}`;
+        // Call the checkPermissions middleware with the determined permission
+        checkPermissions(permissionName)(req, res, next);
+    };
+}
+
+module.exports = {
+    checkPermissions,
+    checkCrudPermissions,
+};
+
diff --git a/backend/src/middlewares/upload.js b/backend/src/middlewares/upload.js
new file mode 100644
index 0000000..ea3e835
--- /dev/null
+++ b/backend/src/middlewares/upload.js
@@ -0,0 +1,11 @@
+const util = require('util');
+const Multer = require('multer');
+const maxSize = 10 * 1024 * 1024;
+
+let processFile = Multer({
+  storage: Multer.memoryStorage(),
+  limits: { fileSize: maxSize },
+}).single("file");
+
+let processFileMiddleware = util.promisify(processFile);
+module.exports = processFileMiddleware;
diff --git a/backend/src/routes/activity_logs.js b/backend/src/routes/activity_logs.js
new file mode 100644
index 0000000..5988229
--- /dev/null
+++ b/backend/src/routes/activity_logs.js
@@ -0,0 +1,448 @@
+
+const express = require('express');
+
+const Activity_logsService = require('../services/activity_logs');
+const Activity_logsDBApi = require('../db/api/activity_logs');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('activity_logs'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Activity_logs:
+ *        type: object
+ *        properties:
+ 
+ *          entity_reference:
+ *            type: string
+ *            default: entity_reference
+ *          message:
+ *            type: string
+ *            default: message
+ *          ip_address:
+ *            type: string
+ *            default: ip_address
+ 
+ 
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Activity_logs
+ *   description: The Activity_logs managing API
+ */
+
+/**
+*  @swagger
+*  /api/activity_logs:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Activity_logs]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Activity_logs"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Activity_logs"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Activity_logsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Activity_logs]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Activity_logs"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Activity_logs"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Activity_logsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/activity_logs/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Activity_logs]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Activity_logs"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Activity_logs"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Activity_logsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/activity_logs/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Activity_logs]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Activity_logs"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Activity_logsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/activity_logs/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Activity_logs]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Activity_logs"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Activity_logsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/activity_logs:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Activity_logs]
+  *      summary: Get all activity_logs
+  *      description: Get all activity_logs
+  *      responses:
+  *        200:
+  *          description: Activity_logs list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Activity_logs"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Activity_logsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','entity_reference','message','ip_address',
+        
+        
+      'event_time',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/activity_logs/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Activity_logs]
+ *      summary: Count all activity_logs
+ *      description: Count all activity_logs
+ *      responses:
+ *        200:
+ *          description: Activity_logs count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Activity_logs"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Activity_logsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/activity_logs/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Activity_logs]
+ *      summary: Find all activity_logs that match search criteria
+ *      description: Find all activity_logs that match search criteria
+ *      responses:
+ *        200:
+ *          description: Activity_logs list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Activity_logs"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Activity_logsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/activity_logs/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Activity_logs]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Activity_logs"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Activity_logsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/approval_steps.js b/backend/src/routes/approval_steps.js
new file mode 100644
index 0000000..d2c4c98
--- /dev/null
+++ b/backend/src/routes/approval_steps.js
@@ -0,0 +1,449 @@
+
+const express = require('express');
+
+const Approval_stepsService = require('../services/approval_steps');
+const Approval_stepsDBApi = require('../db/api/approval_steps');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('approval_steps'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Approval_steps:
+ *        type: object
+ *        properties:
+ 
+ *          step_name:
+ *            type: string
+ *            default: step_name
+ 
+ *          step_order:
+ *            type: integer
+ *            format: int64
+ 
+ *          min_amount:
+ *            type: integer
+ *            format: int64
+ *          max_amount:
+ *            type: integer
+ *            format: int64
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Approval_steps
+ *   description: The Approval_steps managing API
+ */
+
+/**
+*  @swagger
+*  /api/approval_steps:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Approval_steps]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Approval_steps"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Approval_steps"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Approval_stepsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Approval_steps]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Approval_steps"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Approval_steps"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Approval_stepsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approval_steps/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_steps]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Approval_steps"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_steps"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Approval_stepsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/approval_steps/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_steps]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_steps"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Approval_stepsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approval_steps/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_steps]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_steps"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Approval_stepsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/approval_steps:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_steps]
+  *      summary: Get all approval_steps
+  *      description: Get all approval_steps
+  *      responses:
+  *        200:
+  *          description: Approval_steps list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Approval_steps"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Approval_stepsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','step_name',
+        'step_order',
+        'min_amount','max_amount',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/approval_steps/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approval_steps]
+ *      summary: Count all approval_steps
+ *      description: Count all approval_steps
+ *      responses:
+ *        200:
+ *          description: Approval_steps count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approval_steps"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Approval_stepsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/approval_steps/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approval_steps]
+ *      summary: Find all approval_steps that match search criteria
+ *      description: Find all approval_steps that match search criteria
+ *      responses:
+ *        200:
+ *          description: Approval_steps list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approval_steps"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Approval_stepsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/approval_steps/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_steps]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_steps"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Approval_stepsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/approval_workflows.js b/backend/src/routes/approval_workflows.js
new file mode 100644
index 0000000..1de2a31
--- /dev/null
+++ b/backend/src/routes/approval_workflows.js
@@ -0,0 +1,444 @@
+
+const express = require('express');
+
+const Approval_workflowsService = require('../services/approval_workflows');
+const Approval_workflowsDBApi = require('../db/api/approval_workflows');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('approval_workflows'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Approval_workflows:
+ *        type: object
+ *        properties:
+ 
+ *          workflow_name:
+ *            type: string
+ *            default: workflow_name
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Approval_workflows
+ *   description: The Approval_workflows managing API
+ */
+
+/**
+*  @swagger
+*  /api/approval_workflows:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Approval_workflows]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Approval_workflows"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Approval_workflows"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Approval_workflowsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Approval_workflows]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Approval_workflows"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Approval_workflows"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Approval_workflowsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approval_workflows/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_workflows]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Approval_workflows"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_workflows"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Approval_workflowsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/approval_workflows/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_workflows]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_workflows"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Approval_workflowsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approval_workflows/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_workflows]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_workflows"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Approval_workflowsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/approval_workflows:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_workflows]
+  *      summary: Get all approval_workflows
+  *      description: Get all approval_workflows
+  *      responses:
+  *        200:
+  *          description: Approval_workflows list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Approval_workflows"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Approval_workflowsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','workflow_name','description',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/approval_workflows/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approval_workflows]
+ *      summary: Count all approval_workflows
+ *      description: Count all approval_workflows
+ *      responses:
+ *        200:
+ *          description: Approval_workflows count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approval_workflows"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Approval_workflowsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/approval_workflows/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approval_workflows]
+ *      summary: Find all approval_workflows that match search criteria
+ *      description: Find all approval_workflows that match search criteria
+ *      responses:
+ *        200:
+ *          description: Approval_workflows list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approval_workflows"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Approval_workflowsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/approval_workflows/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approval_workflows]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approval_workflows"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Approval_workflowsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/approvals.js b/backend/src/routes/approvals.js
new file mode 100644
index 0000000..8f49ec5
--- /dev/null
+++ b/backend/src/routes/approvals.js
@@ -0,0 +1,445 @@
+
+const express = require('express');
+
+const ApprovalsService = require('../services/approvals');
+const ApprovalsDBApi = require('../db/api/approvals');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('approvals'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Approvals:
+ *        type: object
+ *        properties:
+ 
+ *          entity_reference:
+ *            type: string
+ *            default: entity_reference
+ *          decision_notes:
+ *            type: string
+ *            default: decision_notes
+ 
+ 
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Approvals
+ *   description: The Approvals managing API
+ */
+
+/**
+*  @swagger
+*  /api/approvals:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Approvals]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Approvals"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Approvals"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await ApprovalsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Approvals]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Approvals"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Approvals"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await ApprovalsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approvals/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approvals]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Approvals"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approvals"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await ApprovalsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/approvals/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approvals]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approvals"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await ApprovalsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/approvals/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approvals]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approvals"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await ApprovalsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/approvals:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approvals]
+  *      summary: Get all approvals
+  *      description: Get all approvals
+  *      responses:
+  *        200:
+  *          description: Approvals list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Approvals"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await ApprovalsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','entity_reference','decision_notes',
+        
+        
+      'requested_at','decided_at',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/approvals/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approvals]
+ *      summary: Count all approvals
+ *      description: Count all approvals
+ *      responses:
+ *        200:
+ *          description: Approvals count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approvals"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await ApprovalsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/approvals/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Approvals]
+ *      summary: Find all approvals that match search criteria
+ *      description: Find all approvals that match search criteria
+ *      responses:
+ *        200:
+ *          description: Approvals list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Approvals"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await ApprovalsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/approvals/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Approvals]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Approvals"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await ApprovalsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/auth.js b/backend/src/routes/auth.js
new file mode 100644
index 0000000..31d62cb
--- /dev/null
+++ b/backend/src/routes/auth.js
@@ -0,0 +1,209 @@
+const express = require('express');
+const passport = require('passport');
+
+const config = require('../config');
+const AuthService = require('../services/auth');
+const ForbiddenError = require('../services/notifications/errors/forbidden');
+const EmailSender = require('../services/email');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Auth:
+ *        type: object
+ *        required:
+ *          - email
+ *          - password
+ *        properties:
+ *          email:
+ *            type: string
+ *            default: admin@flatlogic.com
+ *            description: User email
+ *          password:
+ *            type: string
+ *            default: password
+ *            description: User password
+ */
+
+/**
+ * @swagger
+ * tags:
+ *   name: Auth
+ *   description: Authorization operations
+ */
+
+/**
+ * @swagger
+ *  /api/auth/signin/local:
+ *    post:
+ *      tags: [Auth]
+ *      summary: Logs user into the system
+ *      description: Logs user into the system
+ *      requestBody:
+ *        description: Set valid user email and password
+ *        content:
+ *          application/json:
+ *            schema:
+ *              $ref: "#/components/schemas/Auth"
+ *      responses:
+ *        200:
+ *          description: Successful login
+ *        400:
+ *          description: Invalid username/password supplied
+ *      x-codegen-request-body-name: body
+ */
+
+router.post('/signin/local', wrapAsync(async (req, res) => {
+  const payload = await AuthService.signin(req.body.email, req.body.password, req,);
+  res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ *  /api/auth/me:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Auth]
+ *      summary: Get current authorized user info
+ *      description: Get current authorized user info
+ *      responses:
+ *        200:
+ *          description: Successful retrieval of current authorized user data
+ *        400:
+ *          description: Invalid username/password supplied
+ *      x-codegen-request-body-name: body
+ */
+
+router.get('/me', passport.authenticate('jwt', {session: false}), (req, res) => {
+  if (!req.currentUser || !req.currentUser.id) {
+    throw new ForbiddenError();
+  }
+
+  const payload = req.currentUser;
+  delete payload.password;
+  res.status(200).send(payload);
+});
+
+router.put('/password-reset', wrapAsync(async (req, res) => {
+  const payload = await AuthService.passwordReset(req.body.token, req.body.password, req,);
+  res.status(200).send(payload);
+}));
+
+router.put('/password-update', passport.authenticate('jwt', {session: false}), wrapAsync(async (req, res) => {
+  const payload = await AuthService.passwordUpdate(req.body.currentPassword, req.body.newPassword, req);
+  res.status(200).send(payload);
+}));
+
+router.post('/send-email-address-verification-email', passport.authenticate('jwt', {session: false}), wrapAsync(async (req, res) => {
+  if (!req.currentUser) {
+    throw new ForbiddenError();
+  }
+
+  await AuthService.sendEmailAddressVerificationEmail(req.currentUser.email);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+router.post('/send-password-reset-email', wrapAsync(async (req, res) => {
+  const link = new URL(req.headers.referer);
+  await AuthService.sendPasswordResetEmail(req.body.email, 'register', link.host,);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ *  /api/auth/signup:
+ *    post:
+ *      tags: [Auth]
+ *      summary: Register new user into the system
+ *      description: Register new user into the system
+ *      requestBody:
+ *        description: Set valid user email and password
+ *        content:
+ *          application/json:
+ *            schema:
+ *              $ref: "#/components/schemas/Auth"
+ *      responses:
+ *        200:
+ *          description: New user successfully signed up
+ *        400:
+ *          description: Invalid username/password supplied
+ *        500:
+ *          description: Some server error
+ *      x-codegen-request-body-name: body
+ */
+
+router.post('/signup', wrapAsync(async (req, res) => {
+  const link = new URL(req.headers.referer);
+  const payload = await AuthService.signup(
+      req.body.email,
+      req.body.password,
+      
+      req.body.organizationId,
+      
+      req,
+      link.host,
+    )
+  res.status(200).send(payload);
+}));
+
+router.put('/profile', passport.authenticate('jwt', {session: false}), wrapAsync(async (req, res) => {
+  if (!req.currentUser || !req.currentUser.id) {
+    throw new ForbiddenError();
+  }
+
+  await AuthService.updateProfile(req.body.profile, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+router.put('/verify-email', wrapAsync(async (req, res) => {
+  const payload = await AuthService.verifyEmail(req.body.token, req, req.headers.referer)
+  res.status(200).send(payload);
+}));
+
+router.get('/email-configured', (req, res) => {
+  const payload = EmailSender.isConfigured;
+  res.status(200).send(payload);
+});
+
+router.get('/signin/google', (req, res, next) => {
+  passport.authenticate("google", {scope: ["profile", "email"], state: req.query.app})(req, res, next);
+});
+
+router.get('/signin/google/callback', passport.authenticate("google", {failureRedirect: "/login", session: false}),
+
+  function (req, res) {
+    socialRedirect(res, req.query.state, req.user.token, config);
+  }
+);
+
+router.get('/signin/microsoft', (req, res, next) => {
+  passport.authenticate("microsoft", {
+    scope: ["https://graph.microsoft.com/user.read openid"],
+    state: req.query.app
+  })(req, res, next);
+});
+
+router.get('/signin/microsoft/callback', passport.authenticate("microsoft", {
+    failureRedirect: "/login",
+    session: false
+  }),
+  function (req, res) {
+    socialRedirect(res, req.query.state, req.user.token, config);
+  }
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+function socialRedirect(res, state, token, config) {
+  res.redirect(config.uiUrl + "/login?token=" + token);
+}
+
+module.exports = router;
diff --git a/backend/src/routes/companies.js b/backend/src/routes/companies.js
new file mode 100644
index 0000000..376218c
--- /dev/null
+++ b/backend/src/routes/companies.js
@@ -0,0 +1,473 @@
+
+const express = require('express');
+
+const CompaniesService = require('../services/companies');
+const CompaniesDBApi = require('../db/api/companies');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('companies'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Companies:
+ *        type: object
+ *        properties:
+ 
+ *          company_name:
+ *            type: string
+ *            default: company_name
+ *          legal_name:
+ *            type: string
+ *            default: legal_name
+ *          tax_number:
+ *            type: string
+ *            default: tax_number
+ *          website:
+ *            type: string
+ *            default: website
+ *          phone:
+ *            type: string
+ *            default: phone
+ *          email:
+ *            type: string
+ *            default: email
+ *          address_line1:
+ *            type: string
+ *            default: address_line1
+ *          address_line2:
+ *            type: string
+ *            default: address_line2
+ *          city:
+ *            type: string
+ *            default: city
+ *          state:
+ *            type: string
+ *            default: state
+ *          postal_code:
+ *            type: string
+ *            default: postal_code
+ *          country:
+ *            type: string
+ *            default: country
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Companies
+ *   description: The Companies managing API
+ */
+
+/**
+*  @swagger
+*  /api/companies:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Companies]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Companies"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Companies"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await CompaniesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Companies]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Companies"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Companies"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await CompaniesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/companies/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Companies]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Companies"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Companies"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await CompaniesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/companies/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Companies]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Companies"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await CompaniesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/companies/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Companies]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Companies"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await CompaniesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/companies:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Companies]
+  *      summary: Get all companies
+  *      description: Get all companies
+  *      responses:
+  *        200:
+  *          description: Companies list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Companies"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await CompaniesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','company_name','legal_name','tax_number','website','phone','email','address_line1','address_line2','city','state','postal_code','country',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/companies/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Companies]
+ *      summary: Count all companies
+ *      description: Count all companies
+ *      responses:
+ *        200:
+ *          description: Companies count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Companies"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await CompaniesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/companies/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Companies]
+ *      summary: Find all companies that match search criteria
+ *      description: Find all companies that match search criteria
+ *      responses:
+ *        200:
+ *          description: Companies list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Companies"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await CompaniesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/companies/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Companies]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Companies"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await CompaniesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/contactForm.js b/backend/src/routes/contactForm.js
new file mode 100644
index 0000000..e69de29
diff --git a/backend/src/routes/departments.js b/backend/src/routes/departments.js
new file mode 100644
index 0000000..0894e15
--- /dev/null
+++ b/backend/src/routes/departments.js
@@ -0,0 +1,443 @@
+
+const express = require('express');
+
+const DepartmentsService = require('../services/departments');
+const DepartmentsDBApi = require('../db/api/departments');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('departments'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Departments:
+ *        type: object
+ *        properties:
+ 
+ *          department_name:
+ *            type: string
+ *            default: department_name
+ *          department_code:
+ *            type: string
+ *            default: department_code
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Departments
+ *   description: The Departments managing API
+ */
+
+/**
+*  @swagger
+*  /api/departments:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Departments]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Departments"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Departments"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await DepartmentsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Departments]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Departments"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Departments"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await DepartmentsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/departments/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Departments]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Departments"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Departments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await DepartmentsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/departments/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Departments]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Departments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await DepartmentsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/departments/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Departments]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Departments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await DepartmentsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/departments:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Departments]
+  *      summary: Get all departments
+  *      description: Get all departments
+  *      responses:
+  *        200:
+  *          description: Departments list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Departments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await DepartmentsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','department_name','department_code',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/departments/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Departments]
+ *      summary: Count all departments
+ *      description: Count all departments
+ *      responses:
+ *        200:
+ *          description: Departments count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Departments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await DepartmentsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/departments/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Departments]
+ *      summary: Find all departments that match search criteria
+ *      description: Find all departments that match search criteria
+ *      responses:
+ *        200:
+ *          description: Departments list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Departments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await DepartmentsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/departments/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Departments]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Departments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await DepartmentsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/document_links.js b/backend/src/routes/document_links.js
new file mode 100644
index 0000000..004924b
--- /dev/null
+++ b/backend/src/routes/document_links.js
@@ -0,0 +1,444 @@
+
+const express = require('express');
+
+const Document_linksService = require('../services/document_links');
+const Document_linksDBApi = require('../db/api/document_links');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('document_links'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Document_links:
+ *        type: object
+ *        properties:
+ 
+ *          source_reference:
+ *            type: string
+ *            default: source_reference
+ *          notes:
+ *            type: string
+ *            default: notes
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Document_links
+ *   description: The Document_links managing API
+ */
+
+/**
+*  @swagger
+*  /api/document_links:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Document_links]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Document_links"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Document_links"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Document_linksService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Document_links]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Document_links"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Document_links"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Document_linksService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/document_links/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_links]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Document_links"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_links"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Document_linksService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/document_links/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_links]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_links"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Document_linksService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/document_links/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_links]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_links"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Document_linksService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/document_links:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_links]
+  *      summary: Get all document_links
+  *      description: Get all document_links
+  *      responses:
+  *        200:
+  *          description: Document_links list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Document_links"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Document_linksDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','source_reference','notes',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/document_links/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Document_links]
+ *      summary: Count all document_links
+ *      description: Count all document_links
+ *      responses:
+ *        200:
+ *          description: Document_links count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Document_links"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Document_linksDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/document_links/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Document_links]
+ *      summary: Find all document_links that match search criteria
+ *      description: Find all document_links that match search criteria
+ *      responses:
+ *        200:
+ *          description: Document_links list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Document_links"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Document_linksDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/document_links/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_links]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_links"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Document_linksDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/document_types.js b/backend/src/routes/document_types.js
new file mode 100644
index 0000000..6d14c27
--- /dev/null
+++ b/backend/src/routes/document_types.js
@@ -0,0 +1,447 @@
+
+const express = require('express');
+
+const Document_typesService = require('../services/document_types');
+const Document_typesDBApi = require('../db/api/document_types');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('document_types'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Document_types:
+ *        type: object
+ *        properties:
+ 
+ *          type_name:
+ *            type: string
+ *            default: type_name
+ *          type_code:
+ *            type: string
+ *            default: type_code
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Document_types
+ *   description: The Document_types managing API
+ */
+
+/**
+*  @swagger
+*  /api/document_types:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Document_types]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Document_types"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Document_types"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Document_typesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Document_types]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Document_types"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Document_types"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Document_typesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/document_types/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_types]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Document_types"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_types"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Document_typesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/document_types/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_types]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_types"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Document_typesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/document_types/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_types]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_types"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Document_typesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/document_types:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_types]
+  *      summary: Get all document_types
+  *      description: Get all document_types
+  *      responses:
+  *        200:
+  *          description: Document_types list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Document_types"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Document_typesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','type_name','type_code','description',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/document_types/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Document_types]
+ *      summary: Count all document_types
+ *      description: Count all document_types
+ *      responses:
+ *        200:
+ *          description: Document_types count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Document_types"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Document_typesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/document_types/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Document_types]
+ *      summary: Find all document_types that match search criteria
+ *      description: Find all document_types that match search criteria
+ *      responses:
+ *        200:
+ *          description: Document_types list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Document_types"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Document_typesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/document_types/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Document_types]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Document_types"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Document_typesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/documents.js b/backend/src/routes/documents.js
new file mode 100644
index 0000000..cd7a942
--- /dev/null
+++ b/backend/src/routes/documents.js
@@ -0,0 +1,451 @@
+
+const express = require('express');
+
+const DocumentsService = require('../services/documents');
+const DocumentsDBApi = require('../db/api/documents');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('documents'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Documents:
+ *        type: object
+ *        properties:
+ 
+ *          document_number:
+ *            type: string
+ *            default: document_number
+ *          title:
+ *            type: string
+ *            default: title
+ *          summary:
+ *            type: string
+ *            default: summary
+ *          tags:
+ *            type: string
+ *            default: tags
+ 
+ 
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Documents
+ *   description: The Documents managing API
+ */
+
+/**
+*  @swagger
+*  /api/documents:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Documents]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Documents"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Documents"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await DocumentsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Documents]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Documents"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Documents"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await DocumentsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/documents/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Documents]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Documents"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Documents"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await DocumentsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/documents/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Documents]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Documents"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await DocumentsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/documents/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Documents]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Documents"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await DocumentsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/documents:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Documents]
+  *      summary: Get all documents
+  *      description: Get all documents
+  *      responses:
+  *        200:
+  *          description: Documents list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Documents"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await DocumentsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','document_number','title','summary','tags',
+        
+        
+      'document_date','review_due_date',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/documents/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Documents]
+ *      summary: Count all documents
+ *      description: Count all documents
+ *      responses:
+ *        200:
+ *          description: Documents count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Documents"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await DocumentsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/documents/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Documents]
+ *      summary: Find all documents that match search criteria
+ *      description: Find all documents that match search criteria
+ *      responses:
+ *        200:
+ *          description: Documents list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Documents"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await DocumentsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/documents/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Documents]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Documents"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await DocumentsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/file.js b/backend/src/routes/file.js
new file mode 100644
index 0000000..ddd2bc0
--- /dev/null
+++ b/backend/src/routes/file.js
@@ -0,0 +1,32 @@
+const express = require('express');
+const config = require('../config');
+const path = require('path');
+const passport = require('passport');
+const services = require('../services/file');
+const router = express.Router();
+
+router.get('/download', (req, res) => {
+  if (process.env.NODE_ENV == "production" || process.env.NEXT_PUBLIC_BACK_API) {
+    services.downloadGCloud(req, res);
+  }
+  else {
+    services.downloadLocal(req, res);
+  }
+});
+
+router.post('/upload/:table/:field', passport.authenticate('jwt', {session: false}), (req, res) => {
+  const fileName = `${req.params.table}/${req.params.field}`;
+
+  if (process.env.NODE_ENV == "production" || process.env.NEXT_PUBLIC_BACK_API) {
+    services.uploadGCloud(fileName, req, res);
+  }
+  else {
+    services.uploadLocal(fileName, {
+      entity: null,
+      maxFileSize: 10 * 1024 * 1024,
+      folderIncludesAuthenticationUid: false,
+    })(req, res);
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/goods_receipt_lines.js b/backend/src/routes/goods_receipt_lines.js
new file mode 100644
index 0000000..1be7cbb
--- /dev/null
+++ b/backend/src/routes/goods_receipt_lines.js
@@ -0,0 +1,449 @@
+
+const express = require('express');
+
+const Goods_receipt_linesService = require('../services/goods_receipt_lines');
+const Goods_receipt_linesDBApi = require('../db/api/goods_receipt_lines');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('goods_receipt_lines'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Goods_receipt_lines:
+ *        type: object
+ *        properties:
+ 
+ *          quality_notes:
+ *            type: string
+ *            default: quality_notes
+ 
+ 
+ *          quantity_received:
+ *            type: integer
+ *            format: int64
+ *          quantity_accepted:
+ *            type: integer
+ *            format: int64
+ *          quantity_rejected:
+ *            type: integer
+ *            format: int64
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Goods_receipt_lines
+ *   description: The Goods_receipt_lines managing API
+ */
+
+/**
+*  @swagger
+*  /api/goods_receipt_lines:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Goods_receipt_lines]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Goods_receipt_lines"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Goods_receipt_lines"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Goods_receipt_linesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Goods_receipt_lines]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Goods_receipt_lines"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Goods_receipt_lines"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Goods_receipt_linesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/goods_receipt_lines/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipt_lines]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Goods_receipt_lines"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipt_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Goods_receipt_linesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/goods_receipt_lines/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipt_lines]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipt_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Goods_receipt_linesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/goods_receipt_lines/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipt_lines]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipt_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Goods_receipt_linesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/goods_receipt_lines:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipt_lines]
+  *      summary: Get all goods_receipt_lines
+  *      description: Get all goods_receipt_lines
+  *      responses:
+  *        200:
+  *          description: Goods_receipt_lines list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Goods_receipt_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Goods_receipt_linesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','quality_notes',
+        
+        'quantity_received','quantity_accepted','quantity_rejected',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/goods_receipt_lines/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Goods_receipt_lines]
+ *      summary: Count all goods_receipt_lines
+ *      description: Count all goods_receipt_lines
+ *      responses:
+ *        200:
+ *          description: Goods_receipt_lines count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Goods_receipt_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Goods_receipt_linesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/goods_receipt_lines/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Goods_receipt_lines]
+ *      summary: Find all goods_receipt_lines that match search criteria
+ *      description: Find all goods_receipt_lines that match search criteria
+ *      responses:
+ *        200:
+ *          description: Goods_receipt_lines list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Goods_receipt_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Goods_receipt_linesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/goods_receipt_lines/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipt_lines]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipt_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Goods_receipt_linesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/goods_receipts.js b/backend/src/routes/goods_receipts.js
new file mode 100644
index 0000000..bb9d1b8
--- /dev/null
+++ b/backend/src/routes/goods_receipts.js
@@ -0,0 +1,444 @@
+
+const express = require('express');
+
+const Goods_receiptsService = require('../services/goods_receipts');
+const Goods_receiptsDBApi = require('../db/api/goods_receipts');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('goods_receipts'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Goods_receipts:
+ *        type: object
+ *        properties:
+ 
+ *          grn_number:
+ *            type: string
+ *            default: grn_number
+ *          remarks:
+ *            type: string
+ *            default: remarks
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Goods_receipts
+ *   description: The Goods_receipts managing API
+ */
+
+/**
+*  @swagger
+*  /api/goods_receipts:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Goods_receipts]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Goods_receipts"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Goods_receipts"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Goods_receiptsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Goods_receipts]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Goods_receipts"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Goods_receipts"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Goods_receiptsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/goods_receipts/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipts]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Goods_receipts"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipts"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Goods_receiptsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/goods_receipts/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipts]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipts"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Goods_receiptsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/goods_receipts/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipts]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipts"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Goods_receiptsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/goods_receipts:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipts]
+  *      summary: Get all goods_receipts
+  *      description: Get all goods_receipts
+  *      responses:
+  *        200:
+  *          description: Goods_receipts list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Goods_receipts"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Goods_receiptsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','grn_number','remarks',
+        
+        
+      'receipt_date','posted_date',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/goods_receipts/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Goods_receipts]
+ *      summary: Count all goods_receipts
+ *      description: Count all goods_receipts
+ *      responses:
+ *        200:
+ *          description: Goods_receipts count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Goods_receipts"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Goods_receiptsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/goods_receipts/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Goods_receipts]
+ *      summary: Find all goods_receipts that match search criteria
+ *      description: Find all goods_receipts that match search criteria
+ *      responses:
+ *        200:
+ *          description: Goods_receipts list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Goods_receipts"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Goods_receiptsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/goods_receipts/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Goods_receipts]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Goods_receipts"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Goods_receiptsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/invoice_lines.js b/backend/src/routes/invoice_lines.js
new file mode 100644
index 0000000..3d3c5ca
--- /dev/null
+++ b/backend/src/routes/invoice_lines.js
@@ -0,0 +1,452 @@
+
+const express = require('express');
+
+const Invoice_linesService = require('../services/invoice_lines');
+const Invoice_linesDBApi = require('../db/api/invoice_lines');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('invoice_lines'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Invoice_lines:
+ *        type: object
+ *        properties:
+ 
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ *          quantity:
+ *            type: integer
+ *            format: int64
+ *          unit_price:
+ *            type: integer
+ *            format: int64
+ *          tax_rate:
+ *            type: integer
+ *            format: int64
+ *          line_total:
+ *            type: integer
+ *            format: int64
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Invoice_lines
+ *   description: The Invoice_lines managing API
+ */
+
+/**
+*  @swagger
+*  /api/invoice_lines:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Invoice_lines]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Invoice_lines"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Invoice_lines"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Invoice_linesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Invoice_lines]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Invoice_lines"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Invoice_lines"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Invoice_linesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/invoice_lines/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Invoice_lines]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Invoice_lines"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Invoice_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Invoice_linesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/invoice_lines/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Invoice_lines]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Invoice_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Invoice_linesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/invoice_lines/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Invoice_lines]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Invoice_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Invoice_linesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/invoice_lines:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Invoice_lines]
+  *      summary: Get all invoice_lines
+  *      description: Get all invoice_lines
+  *      responses:
+  *        200:
+  *          description: Invoice_lines list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Invoice_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Invoice_linesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','description',
+        
+        'quantity','unit_price','tax_rate','line_total',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/invoice_lines/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Invoice_lines]
+ *      summary: Count all invoice_lines
+ *      description: Count all invoice_lines
+ *      responses:
+ *        200:
+ *          description: Invoice_lines count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Invoice_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Invoice_linesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/invoice_lines/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Invoice_lines]
+ *      summary: Find all invoice_lines that match search criteria
+ *      description: Find all invoice_lines that match search criteria
+ *      responses:
+ *        200:
+ *          description: Invoice_lines list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Invoice_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Invoice_linesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/invoice_lines/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Invoice_lines]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Invoice_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Invoice_linesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/openai.js b/backend/src/routes/openai.js
new file mode 100644
index 0000000..2d47d9f
--- /dev/null
+++ b/backend/src/routes/openai.js
@@ -0,0 +1,328 @@
+const express = require('express');
+const db = require('../db/models');
+const wrapAsync = require('../helpers').wrapAsync;
+const router = express.Router();
+const sjs = require('sequelize-json-schema');
+const { getWidget, askGpt } = require('../services/openai');
+const { LocalAIApi } = require('../ai/LocalAIApi');
+
+const loadRolesModules = () => {
+    try {
+        return {
+            RolesService: require('../services/roles'),
+            RolesDBApi: require('../db/api/roles'),
+        };
+    } catch (error) {
+        console.error('Roles modules are missing. Advanced roles are required for this endpoint.', error);
+        const err = new Error('Roles modules are missing. Advanced roles are required for this endpoint.');
+        err.originalError = error;
+        throw err;
+    }
+};
+
+/**
+ * @swagger
+ * /api/roles/roles-info/{infoId}:
+ *   delete:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [Roles]
+ *     summary: Remove role information by ID
+ *     description: Remove specific role information by ID
+ *     parameters:
+ *       - in: path
+ *         name: infoId
+ *         description: ID of role information to remove
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: userId
+ *         description: ID of the user
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: key
+ *         description: Key of the role information to remove
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Role information successfully removed
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 user:
+ *                   type: string
+ *                   description: The user information
+ *       400:
+ *         description: Invalid ID or key supplied
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       404:
+ *         description: Role not found
+ *       500:
+ *         description: Some server error
+ */
+
+router.delete(
+    '/roles-info/:infoId',
+    wrapAsync(async (req, res) => {
+        const { RolesService } = loadRolesModules();
+        const role = await RolesService.removeRoleInfoById(
+            req.query.infoId,
+            req.query.roleId,
+            req.query.key,
+            req.currentUser,
+        );
+
+        res.status(200).send(role);
+    }),
+);
+
+/**
+ * @swagger
+ * /api/roles/role-info/{roleId}:
+ *   get:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [Roles]
+ *     summary: Get role information by key
+ *     description: Get specific role information by key
+ *     parameters:
+ *       - in: path
+ *         name: roleId
+ *         description: ID of role to get information for
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: key
+ *         description: Key of the role information to retrieve
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Role information successfully received
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 info:
+ *                   type: string
+ *                   description: The role information
+ *       400:
+ *         description: Invalid ID or key supplied
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       404:
+ *         description: Role not found
+ *       500:
+ *         description: Some server error
+ */
+
+router.get(
+    '/info-by-key',
+    wrapAsync(async (req, res) => {
+        const { RolesService, RolesDBApi } = loadRolesModules();
+        const roleId = req.query.roleId;
+        const key = req.query.key;
+        const currentUser = req.currentUser;
+        let info = await RolesService.getRoleInfoByKey(
+            key,
+            roleId,
+            currentUser,
+        );
+        const role = await RolesDBApi.findBy({ id: roleId });
+        if (!role?.role_customization) {
+            await Promise.all(["pie", "bar"].map(async (e) => {
+                const schema = await sjs.getSequelizeSchema(db.sequelize, {});
+                const payload = {
+                    description: `Create some cool ${e} chart`,
+                    modelDefinition: schema.definitions,
+                };
+                const widgetId = await getWidget(payload, currentUser?.id, roleId);
+                if (widgetId) {
+                    await RolesService.addRoleInfo(
+                        roleId,
+                        currentUser?.id,
+                        'widgets',
+                        widgetId,
+                        req.currentUser,
+                    );
+                }
+            }))
+            info = await RolesService.getRoleInfoByKey(
+                key,
+                roleId,
+                currentUser,
+            );
+        }
+        res.status(200).send(info);
+    }),
+);
+
+router.post(
+    '/create_widget',
+    wrapAsync(async (req, res) => {
+        const { RolesService } = loadRolesModules();
+        const { description, userId, roleId } = req.body;
+
+        const currentUser = req.currentUser;
+        const schema = await sjs.getSequelizeSchema(db.sequelize, {});
+        const payload = {
+            description,
+            modelDefinition: schema.definitions,
+        };
+
+        const widgetId = await getWidget(payload, userId, roleId);
+
+        if (widgetId) {
+            await RolesService.addRoleInfo(
+                roleId,
+                userId,
+                'widgets',
+                widgetId,
+                currentUser,
+            );
+
+            return res.status(200).send(widgetId);
+        } else {
+            return res.status(400).send(widgetId);
+        }
+    }),
+);
+
+/**
+ * @swagger
+ * /api/openai/response:
+ *   post:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [OpenAI]
+ *     summary: Proxy a Responses API request
+ *     description: Sends the payload to the Flatlogic AI proxy and returns the response.
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               input:
+ *                 type: array
+ *                 description: List of messages with roles and content.
+ *                 items:
+ *                   type: object
+ *                   properties:
+ *                     role:
+ *                       type: string
+ *                     content:
+ *                       type: string
+ *               options:
+ *                 type: object
+ *                 description: Optional polling controls.
+ *                 properties:
+ *                   poll_interval:
+ *                     type: number
+ *                   poll_timeout:
+ *                     type: number
+ *     responses:
+ *       200:
+ *         description: AI response received
+ *       400:
+ *         description: Invalid request
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       502:
+ *         description: Proxy error
+ */
+router.post(
+    '/response',
+    wrapAsync(async (req, res) => {
+        const body = req.body || {};
+        const options = body.options || {};
+        const payload = { ...body };
+        delete payload.options;
+
+        const response = await LocalAIApi.createResponse(payload, options);
+
+        if (response.success) {
+            return res.status(200).send(response);
+        }
+
+        console.error('AI proxy error:', response);
+        const status = response.error === 'input_missing' ? 400 : 502;
+        return res.status(status).send(response);
+    }),
+);
+
+/**
+ * @swagger
+ * /api/openai/ask:
+ *   post:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [OpenAI]
+ *     summary: Ask a question to ChatGPT
+ *     description: Send a question through the Flatlogic AI proxy and get a response
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               prompt:
+ *                 type: string
+ *                 description: The question to ask ChatGPT
+ *     responses:
+ *       200:
+ *         description: Question successfully answered
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   description: Whether the request was successful
+ *                 data:
+ *                   type: string
+ *                   description: The answer from ChatGPT
+ *       400:
+ *         description: Invalid request
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       500:
+ *         description: Some server error
+ */
+router.post(
+    '/ask-gpt',
+    wrapAsync(async (req, res) => {
+        const { prompt } = req.body;
+        if (!prompt) {
+            return res.status(400).send({
+                success: false,
+                error: 'Prompt is required',
+            });
+        }
+
+        const response = await askGpt(prompt);
+
+        if (response.success) {
+            return res.status(200).send(response);
+        } else {
+            return res.status(500).send(response);
+        }
+    }),
+);
+
+
+module.exports = router;
diff --git a/backend/src/routes/organizationLogin.js b/backend/src/routes/organizationLogin.js
new file mode 100644
index 0000000..718b6c1
--- /dev/null
+++ b/backend/src/routes/organizationLogin.js
@@ -0,0 +1,55 @@
+
+
+
+const express = require('express');
+
+const OrganizationsDBApi = require('../db/api/organizations');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+/**
+ *  @swagger
+ *  /api/organizations:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Organizations]
+ *      summary: Get all organizations
+ *      description: Get all organizations
+ *      responses:
+ *        200:
+ *          description: Organizations list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Organizations"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+
+router.get(
+  '/',
+  wrapAsync(async (req, res) => {
+    const payload = await OrganizationsDBApi.findAll(req.query);
+    const simplifiedPayload = payload.rows.map(org => ({
+      id: org.id,
+      name: org.name
+    }));
+      res.status(200).send(simplifiedPayload);
+    
+  }),
+);
+
+
+
+
+module.exports = router;
+
+
diff --git a/backend/src/routes/organizations.js b/backend/src/routes/organizations.js
new file mode 100644
index 0000000..6f96a1d
--- /dev/null
+++ b/backend/src/routes/organizations.js
@@ -0,0 +1,440 @@
+
+const express = require('express');
+
+const OrganizationsService = require('../services/organizations');
+const OrganizationsDBApi = require('../db/api/organizations');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('organizations'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Organizations:
+ *        type: object
+ *        properties:
+ 
+ *          name:
+ *            type: string
+ *            default: name
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Organizations
+ *   description: The Organizations managing API
+ */
+
+/**
+*  @swagger
+*  /api/organizations:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Organizations]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Organizations"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Organizations"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await OrganizationsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Organizations]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Organizations"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Organizations"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await OrganizationsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/organizations/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Organizations]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Organizations"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Organizations"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await OrganizationsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/organizations/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Organizations]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Organizations"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await OrganizationsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/organizations/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Organizations]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Organizations"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await OrganizationsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/organizations:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Organizations]
+  *      summary: Get all organizations
+  *      description: Get all organizations
+  *      responses:
+  *        200:
+  *          description: Organizations list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Organizations"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await OrganizationsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','name',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/organizations/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Organizations]
+ *      summary: Count all organizations
+ *      description: Count all organizations
+ *      responses:
+ *        200:
+ *          description: Organizations count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Organizations"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await OrganizationsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/organizations/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Organizations]
+ *      summary: Find all organizations that match search criteria
+ *      description: Find all organizations that match search criteria
+ *      responses:
+ *        200:
+ *          description: Organizations list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Organizations"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await OrganizationsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/organizations/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Organizations]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Organizations"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await OrganizationsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/payments.js b/backend/src/routes/payments.js
new file mode 100644
index 0000000..987cda7
--- /dev/null
+++ b/backend/src/routes/payments.js
@@ -0,0 +1,448 @@
+
+const express = require('express');
+
+const PaymentsService = require('../services/payments');
+const PaymentsDBApi = require('../db/api/payments');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('payments'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Payments:
+ *        type: object
+ *        properties:
+ 
+ *          payment_reference:
+ *            type: string
+ *            default: payment_reference
+ *          notes:
+ *            type: string
+ *            default: notes
+ 
+ 
+ *          amount:
+ *            type: integer
+ *            format: int64
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Payments
+ *   description: The Payments managing API
+ */
+
+/**
+*  @swagger
+*  /api/payments:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Payments]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Payments"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Payments"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await PaymentsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Payments]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Payments"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Payments"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await PaymentsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/payments/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Payments]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Payments"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Payments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await PaymentsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/payments/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Payments]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Payments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await PaymentsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/payments/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Payments]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Payments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await PaymentsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/payments:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Payments]
+  *      summary: Get all payments
+  *      description: Get all payments
+  *      responses:
+  *        200:
+  *          description: Payments list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Payments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await PaymentsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','payment_reference','notes',
+        
+        'amount',
+      'payment_date',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/payments/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Payments]
+ *      summary: Count all payments
+ *      description: Count all payments
+ *      responses:
+ *        200:
+ *          description: Payments count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Payments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await PaymentsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/payments/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Payments]
+ *      summary: Find all payments that match search criteria
+ *      description: Find all payments that match search criteria
+ *      responses:
+ *        200:
+ *          description: Payments list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Payments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await PaymentsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/payments/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Payments]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Payments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await PaymentsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/permissions.js b/backend/src/routes/permissions.js
new file mode 100644
index 0000000..b569a78
--- /dev/null
+++ b/backend/src/routes/permissions.js
@@ -0,0 +1,429 @@
+
+const express = require('express');
+
+const PermissionsService = require('../services/permissions');
+const PermissionsDBApi = require('../db/api/permissions');
+const wrapAsync = require('../helpers').wrapAsync;
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('permissions'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Permissions:
+ *        type: object
+ *        properties:
+ 
+ *          name:
+ *            type: string
+ *            default: name
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Permissions
+ *   description: The Permissions managing API
+ */
+
+/**
+*  @swagger
+*  /api/permissions:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Permissions]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Permissions"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Permissions"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await PermissionsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Permissions]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Permissions"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Permissions"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await PermissionsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/permissions/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Permissions]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Permissions"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Permissions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await PermissionsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/permissions/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Permissions]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Permissions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await PermissionsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/permissions/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Permissions]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Permissions"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await PermissionsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/permissions:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Permissions]
+  *      summary: Get all permissions
+  *      description: Get all permissions
+  *      responses:
+  *        200:
+  *          description: Permissions list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Permissions"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const currentUser = req.currentUser;
+  const payload = await PermissionsDBApi.findAll(
+    req.query,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','name',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/permissions/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Permissions]
+ *      summary: Count all permissions
+ *      description: Count all permissions
+ *      responses:
+ *        200:
+ *          description: Permissions count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Permissions"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+    const currentUser = req.currentUser;
+    const payload = await PermissionsDBApi.findAll(
+        req.query,
+         null, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/permissions/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Permissions]
+ *      summary: Find all permissions that match search criteria
+ *      description: Find all permissions that match search criteria
+ *      responses:
+ *        200:
+ *          description: Permissions list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Permissions"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const payload = await PermissionsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+    
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/permissions/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Permissions]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Permissions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await PermissionsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/pexels.js b/backend/src/routes/pexels.js
new file mode 100644
index 0000000..8298595
--- /dev/null
+++ b/backend/src/routes/pexels.js
@@ -0,0 +1,104 @@
+const express = require('express');
+const router = express.Router();
+const { pexelsKey, pexelsQuery } = require('../config');
+const fetch = require('node-fetch');
+
+const KEY = pexelsKey;
+
+router.get('/image', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+  const query = pexelsQuery || 'nature';
+  const orientation = 'portrait';
+  const perPage = 1;
+  const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+
+  try {
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    res.status(200).json(data.photos[0]);
+  } catch (error) {
+    res.status(200).json({ error: 'Failed to fetch image' });
+  }
+});
+
+router.get('/video', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+  const query = pexelsQuery || 'nature';
+  const orientation = 'portrait';
+  const perPage = 1;
+  const url = `https://api.pexels.com/videos/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+
+  try {
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    res.status(200).json(data.videos[0]);
+  } catch (error) {
+    res.status(200).json({ error: 'Failed to fetch video' });
+  }
+});
+
+router.get('/multiple-images', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+
+  const queries = req.query.queries
+    ? req.query.queries.split(',')
+    : ['home', 'apple', 'pizza', 'mountains', 'cat'];
+  const orientation = 'square';
+  const perPage = 1;
+
+  const fallbackImage = {
+    src: 'https://images.pexels.com/photos/8199252/pexels-photo-8199252.jpeg',
+    photographer: 'Yan Krukau',
+    photographer_url: 'https://www.pexels.com/@yankrukov',
+  };
+  const fetchFallbackImage = async () => {
+    try {
+      const response = await fetch('https://picsum.photos/600');
+      return {
+        src: response.url,
+        photographer: 'Random Picsum',
+        photographer_url: 'https://picsum.photos/',
+      };
+    } catch (error) {
+      return fallbackImage; 
+    }
+  };
+  const fetchImage = async (query) => {
+    const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    return data.photos[0] || null;
+  };
+
+  const imagePromises = queries.map((query) => fetchImage(query));
+  const imagesResults = await Promise.allSettled(imagePromises);
+
+  const formattedImages = await Promise.all(imagesResults.map(async (result) => {
+    if (result.status === 'fulfilled' && result.value) {
+      const image = result.value;
+      return {
+        src: image.src?.original || fallbackImage.src,
+        photographer: image.photographer || fallbackImage.photographer,
+        photographer_url: image.photographer_url || fallbackImage.photographer_url,
+      };
+    } else {
+      const fallback = await fetchFallbackImage();
+      return {
+        src: fallback.src || '',
+        photographer: fallback.photographer || 'Unknown',
+        photographer_url: fallback.photographer_url || '',
+      };
+    }
+  }));
+   
+
+  res.json(formattedImages);
+});
+
+module.exports = router;
diff --git a/backend/src/routes/product_categories.js b/backend/src/routes/product_categories.js
new file mode 100644
index 0000000..012640a
--- /dev/null
+++ b/backend/src/routes/product_categories.js
@@ -0,0 +1,446 @@
+
+const express = require('express');
+
+const Product_categoriesService = require('../services/product_categories');
+const Product_categoriesDBApi = require('../db/api/product_categories');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('product_categories'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Product_categories:
+ *        type: object
+ *        properties:
+ 
+ *          category_name:
+ *            type: string
+ *            default: category_name
+ *          category_code:
+ *            type: string
+ *            default: category_code
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Product_categories
+ *   description: The Product_categories managing API
+ */
+
+/**
+*  @swagger
+*  /api/product_categories:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Product_categories]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Product_categories"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Product_categories"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Product_categoriesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Product_categories]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Product_categories"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Product_categories"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Product_categoriesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/product_categories/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Product_categories]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Product_categories"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Product_categories"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Product_categoriesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/product_categories/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Product_categories]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Product_categories"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Product_categoriesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/product_categories/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Product_categories]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Product_categories"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Product_categoriesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/product_categories:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Product_categories]
+  *      summary: Get all product_categories
+  *      description: Get all product_categories
+  *      responses:
+  *        200:
+  *          description: Product_categories list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Product_categories"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Product_categoriesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','category_name','category_code','description',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/product_categories/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Product_categories]
+ *      summary: Count all product_categories
+ *      description: Count all product_categories
+ *      responses:
+ *        200:
+ *          description: Product_categories count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Product_categories"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Product_categoriesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/product_categories/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Product_categories]
+ *      summary: Find all product_categories that match search criteria
+ *      description: Find all product_categories that match search criteria
+ *      responses:
+ *        200:
+ *          description: Product_categories list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Product_categories"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Product_categoriesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/product_categories/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Product_categories]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Product_categories"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Product_categoriesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/products.js b/backend/src/routes/products.js
new file mode 100644
index 0000000..fc3bbab
--- /dev/null
+++ b/backend/src/routes/products.js
@@ -0,0 +1,462 @@
+
+const express = require('express');
+
+const ProductsService = require('../services/products');
+const ProductsDBApi = require('../db/api/products');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('products'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Products:
+ *        type: object
+ *        properties:
+ 
+ *          product_name:
+ *            type: string
+ *            default: product_name
+ *          sku:
+ *            type: string
+ *            default: sku
+ *          barcode:
+ *            type: string
+ *            default: barcode
+ *          uom:
+ *            type: string
+ *            default: uom
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ *          standard_cost:
+ *            type: integer
+ *            format: int64
+ *          purchase_price:
+ *            type: integer
+ *            format: int64
+ *          sales_price:
+ *            type: integer
+ *            format: int64
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Products
+ *   description: The Products managing API
+ */
+
+/**
+*  @swagger
+*  /api/products:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Products]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Products"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Products"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await ProductsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Products]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Products"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Products"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await ProductsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/products/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Products]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Products"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Products"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await ProductsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/products/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Products]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Products"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await ProductsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/products/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Products]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Products"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await ProductsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/products:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Products]
+  *      summary: Get all products
+  *      description: Get all products
+  *      responses:
+  *        200:
+  *          description: Products list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Products"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await ProductsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','product_name','sku','barcode','uom','description',
+        
+        'standard_cost','purchase_price','sales_price',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/products/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Products]
+ *      summary: Count all products
+ *      description: Count all products
+ *      responses:
+ *        200:
+ *          description: Products count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Products"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await ProductsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/products/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Products]
+ *      summary: Find all products that match search criteria
+ *      description: Find all products that match search criteria
+ *      responses:
+ *        200:
+ *          description: Products list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Products"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await ProductsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/products/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Products]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Products"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await ProductsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/purchase_order_lines.js b/backend/src/routes/purchase_order_lines.js
new file mode 100644
index 0000000..53d685d
--- /dev/null
+++ b/backend/src/routes/purchase_order_lines.js
@@ -0,0 +1,455 @@
+
+const express = require('express');
+
+const Purchase_order_linesService = require('../services/purchase_order_lines');
+const Purchase_order_linesDBApi = require('../db/api/purchase_order_lines');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('purchase_order_lines'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Purchase_order_lines:
+ *        type: object
+ *        properties:
+ 
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ *          quantity:
+ *            type: integer
+ *            format: int64
+ *          unit_price:
+ *            type: integer
+ *            format: int64
+ *          tax_rate:
+ *            type: integer
+ *            format: int64
+ *          discount_rate:
+ *            type: integer
+ *            format: int64
+ *          line_total:
+ *            type: integer
+ *            format: int64
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Purchase_order_lines
+ *   description: The Purchase_order_lines managing API
+ */
+
+/**
+*  @swagger
+*  /api/purchase_order_lines:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Purchase_order_lines]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Purchase_order_lines"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Purchase_order_lines"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_order_linesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Purchase_order_lines]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Purchase_order_lines"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Purchase_order_lines"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_order_linesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_order_lines/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_order_lines]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Purchase_order_lines"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_order_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Purchase_order_linesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/purchase_order_lines/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_order_lines]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_order_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Purchase_order_linesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_order_lines/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_order_lines]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_order_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Purchase_order_linesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/purchase_order_lines:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_order_lines]
+  *      summary: Get all purchase_order_lines
+  *      description: Get all purchase_order_lines
+  *      responses:
+  *        200:
+  *          description: Purchase_order_lines list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Purchase_order_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Purchase_order_linesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','description',
+        
+        'quantity','unit_price','tax_rate','discount_rate','line_total',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_order_lines/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_order_lines]
+ *      summary: Count all purchase_order_lines
+ *      description: Count all purchase_order_lines
+ *      responses:
+ *        200:
+ *          description: Purchase_order_lines count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_order_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Purchase_order_linesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_order_lines/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_order_lines]
+ *      summary: Find all purchase_order_lines that match search criteria
+ *      description: Find all purchase_order_lines that match search criteria
+ *      responses:
+ *        200:
+ *          description: Purchase_order_lines list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_order_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Purchase_order_linesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/purchase_order_lines/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_order_lines]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_order_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Purchase_order_linesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/purchase_orders.js b/backend/src/routes/purchase_orders.js
new file mode 100644
index 0000000..096bb63
--- /dev/null
+++ b/backend/src/routes/purchase_orders.js
@@ -0,0 +1,457 @@
+
+const express = require('express');
+
+const Purchase_ordersService = require('../services/purchase_orders');
+const Purchase_ordersDBApi = require('../db/api/purchase_orders');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('purchase_orders'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Purchase_orders:
+ *        type: object
+ *        properties:
+ 
+ *          po_number:
+ *            type: string
+ *            default: po_number
+ *          notes:
+ *            type: string
+ *            default: notes
+ 
+ 
+ *          subtotal:
+ *            type: integer
+ *            format: int64
+ *          tax_total:
+ *            type: integer
+ *            format: int64
+ *          discount_total:
+ *            type: integer
+ *            format: int64
+ *          grand_total:
+ *            type: integer
+ *            format: int64
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Purchase_orders
+ *   description: The Purchase_orders managing API
+ */
+
+/**
+*  @swagger
+*  /api/purchase_orders:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Purchase_orders]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Purchase_orders"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Purchase_orders"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_ordersService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Purchase_orders]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Purchase_orders"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Purchase_orders"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_ordersService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_orders/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_orders]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Purchase_orders"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_orders"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Purchase_ordersService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/purchase_orders/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_orders]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_orders"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Purchase_ordersService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_orders/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_orders]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_orders"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Purchase_ordersService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/purchase_orders:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_orders]
+  *      summary: Get all purchase_orders
+  *      description: Get all purchase_orders
+  *      responses:
+  *        200:
+  *          description: Purchase_orders list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Purchase_orders"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Purchase_ordersDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','po_number','notes',
+        
+        'subtotal','tax_total','discount_total','grand_total',
+      'order_date','expected_delivery_date',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_orders/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_orders]
+ *      summary: Count all purchase_orders
+ *      description: Count all purchase_orders
+ *      responses:
+ *        200:
+ *          description: Purchase_orders count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_orders"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Purchase_ordersDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_orders/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_orders]
+ *      summary: Find all purchase_orders that match search criteria
+ *      description: Find all purchase_orders that match search criteria
+ *      responses:
+ *        200:
+ *          description: Purchase_orders list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_orders"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Purchase_ordersDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/purchase_orders/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_orders]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_orders"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Purchase_ordersDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/purchase_requisition_lines.js b/backend/src/routes/purchase_requisition_lines.js
new file mode 100644
index 0000000..75bce43
--- /dev/null
+++ b/backend/src/routes/purchase_requisition_lines.js
@@ -0,0 +1,449 @@
+
+const express = require('express');
+
+const Purchase_requisition_linesService = require('../services/purchase_requisition_lines');
+const Purchase_requisition_linesDBApi = require('../db/api/purchase_requisition_lines');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('purchase_requisition_lines'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Purchase_requisition_lines:
+ *        type: object
+ *        properties:
+ 
+ *          description:
+ *            type: string
+ *            default: description
+ 
+ 
+ *          quantity:
+ *            type: integer
+ *            format: int64
+ *          unit_price_estimate:
+ *            type: integer
+ *            format: int64
+ *          line_total_estimate:
+ *            type: integer
+ *            format: int64
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Purchase_requisition_lines
+ *   description: The Purchase_requisition_lines managing API
+ */
+
+/**
+*  @swagger
+*  /api/purchase_requisition_lines:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Purchase_requisition_lines]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Purchase_requisition_lines"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Purchase_requisition_lines"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_requisition_linesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Purchase_requisition_lines]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Purchase_requisition_lines"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Purchase_requisition_lines"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_requisition_linesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisition_lines/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisition_lines]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Purchase_requisition_lines"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisition_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Purchase_requisition_linesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/purchase_requisition_lines/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisition_lines]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisition_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Purchase_requisition_linesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisition_lines/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisition_lines]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisition_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Purchase_requisition_linesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisition_lines:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisition_lines]
+  *      summary: Get all purchase_requisition_lines
+  *      description: Get all purchase_requisition_lines
+  *      responses:
+  *        200:
+  *          description: Purchase_requisition_lines list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Purchase_requisition_lines"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Purchase_requisition_linesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','description',
+        
+        'quantity','unit_price_estimate','line_total_estimate',
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_requisition_lines/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_requisition_lines]
+ *      summary: Count all purchase_requisition_lines
+ *      description: Count all purchase_requisition_lines
+ *      responses:
+ *        200:
+ *          description: Purchase_requisition_lines count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_requisition_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Purchase_requisition_linesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_requisition_lines/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_requisition_lines]
+ *      summary: Find all purchase_requisition_lines that match search criteria
+ *      description: Find all purchase_requisition_lines that match search criteria
+ *      responses:
+ *        200:
+ *          description: Purchase_requisition_lines list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_requisition_lines"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Purchase_requisition_linesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/purchase_requisition_lines/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisition_lines]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisition_lines"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Purchase_requisition_linesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/purchase_requisitions.js b/backend/src/routes/purchase_requisitions.js
new file mode 100644
index 0000000..59cfaf2
--- /dev/null
+++ b/backend/src/routes/purchase_requisitions.js
@@ -0,0 +1,447 @@
+
+const express = require('express');
+
+const Purchase_requisitionsService = require('../services/purchase_requisitions');
+const Purchase_requisitionsDBApi = require('../db/api/purchase_requisitions');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('purchase_requisitions'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Purchase_requisitions:
+ *        type: object
+ *        properties:
+ 
+ *          requisition_number:
+ *            type: string
+ *            default: requisition_number
+ *          reason:
+ *            type: string
+ *            default: reason
+ 
+ 
+ *          estimated_total:
+ *            type: integer
+ *            format: int64
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Purchase_requisitions
+ *   description: The Purchase_requisitions managing API
+ */
+
+/**
+*  @swagger
+*  /api/purchase_requisitions:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Purchase_requisitions]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Purchase_requisitions"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Purchase_requisitions"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_requisitionsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Purchase_requisitions]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Purchase_requisitions"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Purchase_requisitions"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Purchase_requisitionsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisitions/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisitions]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Purchase_requisitions"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisitions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Purchase_requisitionsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/purchase_requisitions/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisitions]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisitions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Purchase_requisitionsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisitions/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisitions]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisitions"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Purchase_requisitionsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/purchase_requisitions:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisitions]
+  *      summary: Get all purchase_requisitions
+  *      description: Get all purchase_requisitions
+  *      responses:
+  *        200:
+  *          description: Purchase_requisitions list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Purchase_requisitions"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Purchase_requisitionsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','requisition_number','reason',
+        
+        'estimated_total',
+      'requested_date','needed_by',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_requisitions/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_requisitions]
+ *      summary: Count all purchase_requisitions
+ *      description: Count all purchase_requisitions
+ *      responses:
+ *        200:
+ *          description: Purchase_requisitions count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_requisitions"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Purchase_requisitionsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/purchase_requisitions/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Purchase_requisitions]
+ *      summary: Find all purchase_requisitions that match search criteria
+ *      description: Find all purchase_requisitions that match search criteria
+ *      responses:
+ *        200:
+ *          description: Purchase_requisitions list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Purchase_requisitions"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Purchase_requisitionsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/purchase_requisitions/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Purchase_requisitions]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Purchase_requisitions"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Purchase_requisitionsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/role_permission_mappings.js b/backend/src/routes/role_permission_mappings.js
new file mode 100644
index 0000000..d4a7fd0
--- /dev/null
+++ b/backend/src/routes/role_permission_mappings.js
@@ -0,0 +1,437 @@
+
+const express = require('express');
+
+const Role_permission_mappingsService = require('../services/role_permission_mappings');
+const Role_permission_mappingsDBApi = require('../db/api/role_permission_mappings');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('role_permission_mappings'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Role_permission_mappings:
+ *        type: object
+ *        properties:
+ 
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Role_permission_mappings
+ *   description: The Role_permission_mappings managing API
+ */
+
+/**
+*  @swagger
+*  /api/role_permission_mappings:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Role_permission_mappings]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Role_permission_mappings"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Role_permission_mappings"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Role_permission_mappingsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Role_permission_mappings]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Role_permission_mappings"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Role_permission_mappings"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Role_permission_mappingsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/role_permission_mappings/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Role_permission_mappings]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Role_permission_mappings"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Role_permission_mappings"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Role_permission_mappingsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/role_permission_mappings/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Role_permission_mappings]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Role_permission_mappings"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Role_permission_mappingsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/role_permission_mappings/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Role_permission_mappings]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Role_permission_mappings"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Role_permission_mappingsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/role_permission_mappings:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Role_permission_mappings]
+  *      summary: Get all role_permission_mappings
+  *      description: Get all role_permission_mappings
+  *      responses:
+  *        200:
+  *          description: Role_permission_mappings list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Role_permission_mappings"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Role_permission_mappingsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/role_permission_mappings/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Role_permission_mappings]
+ *      summary: Count all role_permission_mappings
+ *      description: Count all role_permission_mappings
+ *      responses:
+ *        200:
+ *          description: Role_permission_mappings count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Role_permission_mappings"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Role_permission_mappingsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/role_permission_mappings/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Role_permission_mappings]
+ *      summary: Find all role_permission_mappings that match search criteria
+ *      description: Find all role_permission_mappings that match search criteria
+ *      responses:
+ *        200:
+ *          description: Role_permission_mappings list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Role_permission_mappings"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Role_permission_mappingsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/role_permission_mappings/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Role_permission_mappings]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Role_permission_mappings"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Role_permission_mappingsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/roles.js b/backend/src/routes/roles.js
new file mode 100644
index 0000000..91ceba8
--- /dev/null
+++ b/backend/src/routes/roles.js
@@ -0,0 +1,438 @@
+
+const express = require('express');
+
+const RolesService = require('../services/roles');
+const RolesDBApi = require('../db/api/roles');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('roles'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Roles:
+ *        type: object
+ *        properties:
+ 
+ *          name:
+ *            type: string
+ *            default: name
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Roles
+ *   description: The Roles managing API
+ */
+
+/**
+*  @swagger
+*  /api/roles:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Roles]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Roles"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Roles"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await RolesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Roles]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Roles"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Roles"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await RolesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/roles/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Roles]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Roles"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Roles"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await RolesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/roles/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Roles]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Roles"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await RolesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/roles/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Roles]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Roles"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await RolesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/roles:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Roles]
+  *      summary: Get all roles
+  *      description: Get all roles
+  *      responses:
+  *        200:
+  *          description: Roles list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Roles"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await RolesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','name',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/roles/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Roles]
+ *      summary: Count all roles
+ *      description: Count all roles
+ *      responses:
+ *        200:
+ *          description: Roles count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Roles"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await RolesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/roles/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Roles]
+ *      summary: Find all roles that match search criteria
+ *      description: Find all roles that match search criteria
+ *      responses:
+ *        200:
+ *          description: Roles list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Roles"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+   
+  
+  const payload = await RolesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/roles/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Roles]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Roles"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await RolesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/search.js b/backend/src/routes/search.js
new file mode 100644
index 0000000..25da9e0
--- /dev/null
+++ b/backend/src/routes/search.js
@@ -0,0 +1,56 @@
+const express = require('express');
+const SearchService = require('../services/search');
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { checkCrudPermissions } = require('../middlewares/check-permissions');
+router.use(checkCrudPermissions('search'));
+
+/**
+ * @swagger
+ * path:
+ *  /api/search:
+ *    post:
+ *      summary: Search
+ *      description: Search results across multiple tables
+ *      requestBody:
+ *        content:
+ *          application/json:
+ *            schema:
+ *              type: object
+ *              properties:
+ *                searchQuery:
+ *                  type: string
+ *              required:
+ *                - searchQuery
+ *      responses:
+ *        200:
+ *          description: Successful request
+ *        400:
+ *          description: Invalid request
+ *        500:
+ *          description: Internal server error
+ */
+
+router.post('/', async (req, res) => {
+    const { searchQuery , organizationId} = req.body;
+    
+    const globalAccess = req.currentUser.app_role.globalAccess;
+    
+    if (!searchQuery) {
+      return res.status(400).json({ error: 'Please enter a search query' });
+    }
+  
+    try {
+      const foundMatches = await SearchService.search(searchQuery, req.currentUser , organizationId, globalAccess,);
+      res.json(foundMatches);
+    } catch (error) {
+      console.error('Internal Server Error', error);
+      res.status(500).json({ error: 'Internal Server Error' });
+    }
+  });
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/sql.js b/backend/src/routes/sql.js
new file mode 100644
index 0000000..b844f07
--- /dev/null
+++ b/backend/src/routes/sql.js
@@ -0,0 +1,61 @@
+const express = require('express');
+const db = require('../db/models');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+/**
+ * @swagger
+ * /api/sql:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    summary: Execute a SELECT-only SQL query
+ *    description: Executes a read-only SQL query and returns rows.
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *          schema:
+ *            type: object
+ *            properties:
+ *              sql:
+ *                type: string
+ *            required:
+ *              - sql
+ *    responses:
+ *      200:
+ *        description: Query result
+ *      400:
+ *        description: Invalid SQL
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      500:
+ *        description: Internal server error
+ */
+router.post(
+  '/',
+  wrapAsync(async (req, res) => {
+    const { sql } = req.body;
+    if (typeof sql !== 'string' || !sql.trim()) {
+      return res.status(400).json({ error: 'SQL is required' });
+    }
+
+    const normalized = sql.trim().replace(/;+\s*$/, '');
+    if (!/^select\b/i.test(normalized)) {
+      return res.status(400).json({ error: 'Only SELECT statements are allowed' });
+    }
+
+    if (normalized.includes(';')) {
+      return res.status(400).json({ error: 'Only a single SELECT statement is allowed' });
+    }
+
+    const rows = await db.sequelize.query(normalized, {
+      type: db.Sequelize.QueryTypes.SELECT,
+    });
+
+    return res.status(200).json({ rows });
+  }),
+);
+
+module.exports = router;
diff --git a/backend/src/routes/ui_announcements.js b/backend/src/routes/ui_announcements.js
new file mode 100644
index 0000000..2554690
--- /dev/null
+++ b/backend/src/routes/ui_announcements.js
@@ -0,0 +1,444 @@
+
+const express = require('express');
+
+const Ui_announcementsService = require('../services/ui_announcements');
+const Ui_announcementsDBApi = require('../db/api/ui_announcements');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('ui_announcements'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Ui_announcements:
+ *        type: object
+ *        properties:
+ 
+ *          headline:
+ *            type: string
+ *            default: headline
+ *          content:
+ *            type: string
+ *            default: content
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Ui_announcements
+ *   description: The Ui_announcements managing API
+ */
+
+/**
+*  @swagger
+*  /api/ui_announcements:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Ui_announcements]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Ui_announcements"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Ui_announcements"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Ui_announcementsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Ui_announcements]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Ui_announcements"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Ui_announcements"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Ui_announcementsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/ui_announcements/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Ui_announcements]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Ui_announcements"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Ui_announcements"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Ui_announcementsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/ui_announcements/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Ui_announcements]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Ui_announcements"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Ui_announcementsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/ui_announcements/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Ui_announcements]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Ui_announcements"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Ui_announcementsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/ui_announcements:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Ui_announcements]
+  *      summary: Get all ui_announcements
+  *      description: Get all ui_announcements
+  *      responses:
+  *        200:
+  *          description: Ui_announcements list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Ui_announcements"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Ui_announcementsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','headline','content',
+        
+        
+      'publish_from','publish_to',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/ui_announcements/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Ui_announcements]
+ *      summary: Count all ui_announcements
+ *      description: Count all ui_announcements
+ *      responses:
+ *        200:
+ *          description: Ui_announcements count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Ui_announcements"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Ui_announcementsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/ui_announcements/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Ui_announcements]
+ *      summary: Find all ui_announcements that match search criteria
+ *      description: Find all ui_announcements that match search criteria
+ *      responses:
+ *        200:
+ *          description: Ui_announcements list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Ui_announcements"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Ui_announcementsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/ui_announcements/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Ui_announcements]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Ui_announcements"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Ui_announcementsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/user_role_assignments.js b/backend/src/routes/user_role_assignments.js
new file mode 100644
index 0000000..17fd200
--- /dev/null
+++ b/backend/src/routes/user_role_assignments.js
@@ -0,0 +1,437 @@
+
+const express = require('express');
+
+const User_role_assignmentsService = require('../services/user_role_assignments');
+const User_role_assignmentsDBApi = require('../db/api/user_role_assignments');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('user_role_assignments'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      User_role_assignments:
+ *        type: object
+ *        properties:
+ 
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: User_role_assignments
+ *   description: The User_role_assignments managing API
+ */
+
+/**
+*  @swagger
+*  /api/user_role_assignments:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [User_role_assignments]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/User_role_assignments"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/User_role_assignments"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await User_role_assignmentsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [User_role_assignments]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/User_role_assignments"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/User_role_assignments"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await User_role_assignmentsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/user_role_assignments/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [User_role_assignments]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/User_role_assignments"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/User_role_assignments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await User_role_assignmentsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/user_role_assignments/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [User_role_assignments]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/User_role_assignments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await User_role_assignmentsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/user_role_assignments/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [User_role_assignments]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/User_role_assignments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await User_role_assignmentsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/user_role_assignments:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [User_role_assignments]
+  *      summary: Get all user_role_assignments
+  *      description: Get all user_role_assignments
+  *      responses:
+  *        200:
+  *          description: User_role_assignments list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/User_role_assignments"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await User_role_assignmentsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id',
+        
+        
+      'effective_from','effective_to',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/user_role_assignments/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [User_role_assignments]
+ *      summary: Count all user_role_assignments
+ *      description: Count all user_role_assignments
+ *      responses:
+ *        200:
+ *          description: User_role_assignments count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/User_role_assignments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await User_role_assignmentsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/user_role_assignments/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [User_role_assignments]
+ *      summary: Find all user_role_assignments that match search criteria
+ *      description: Find all user_role_assignments that match search criteria
+ *      responses:
+ *        200:
+ *          description: User_role_assignments list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/User_role_assignments"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await User_role_assignmentsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/user_role_assignments/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [User_role_assignments]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/User_role_assignments"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await User_role_assignmentsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/users.js b/backend/src/routes/users.js
new file mode 100644
index 0000000..69f227e
--- /dev/null
+++ b/backend/src/routes/users.js
@@ -0,0 +1,451 @@
+
+const express = require('express');
+
+const UsersService = require('../services/users');
+const UsersDBApi = require('../db/api/users');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('users'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Users:
+ *        type: object
+ *        properties:
+ 
+ *          firstName:
+ *            type: string
+ *            default: firstName
+ *          lastName:
+ *            type: string
+ *            default: lastName
+ *          phoneNumber:
+ *            type: string
+ *            default: phoneNumber
+ *          email:
+ *            type: string
+ *            default: email
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Users
+ *   description: The Users managing API
+ */
+
+/**
+*  @swagger
+*  /api/users:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Users]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Users"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Users"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await UsersService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Users]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Users"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Users"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await UsersService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/users/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Users]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Users"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Users"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await UsersService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/users/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Users]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Users"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await UsersService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/users/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Users]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Users"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await UsersService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/users:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Users]
+  *      summary: Get all users
+  *      description: Get all users
+  *      responses:
+  *        200:
+  *          description: Users list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Users"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await UsersDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','firstName','lastName','phoneNumber','email',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/users/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Count all users
+ *      description: Count all users
+ *      responses:
+ *        200:
+ *          description: Users count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await UsersDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/users/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Find all users that match search criteria
+ *      description: Find all users that match search criteria
+ *      responses:
+ *        200:
+ *          description: Users list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await UsersDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/users/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Users]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Users"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await UsersDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+    delete payload.password;
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/vendor_invoices.js b/backend/src/routes/vendor_invoices.js
new file mode 100644
index 0000000..06fc7f3
--- /dev/null
+++ b/backend/src/routes/vendor_invoices.js
@@ -0,0 +1,454 @@
+
+const express = require('express');
+
+const Vendor_invoicesService = require('../services/vendor_invoices');
+const Vendor_invoicesDBApi = require('../db/api/vendor_invoices');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('vendor_invoices'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Vendor_invoices:
+ *        type: object
+ *        properties:
+ 
+ *          invoice_number:
+ *            type: string
+ *            default: invoice_number
+ *          notes:
+ *            type: string
+ *            default: notes
+ 
+ 
+ *          subtotal:
+ *            type: integer
+ *            format: int64
+ *          tax_total:
+ *            type: integer
+ *            format: int64
+ *          grand_total:
+ *            type: integer
+ *            format: int64
+ 
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Vendor_invoices
+ *   description: The Vendor_invoices managing API
+ */
+
+/**
+*  @swagger
+*  /api/vendor_invoices:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Vendor_invoices]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Vendor_invoices"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Vendor_invoices"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Vendor_invoicesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Vendor_invoices]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Vendor_invoices"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Vendor_invoices"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await Vendor_invoicesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/vendor_invoices/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendor_invoices]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Vendor_invoices"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendor_invoices"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await Vendor_invoicesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/vendor_invoices/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendor_invoices]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendor_invoices"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await Vendor_invoicesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/vendor_invoices/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendor_invoices]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendor_invoices"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await Vendor_invoicesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/vendor_invoices:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendor_invoices]
+  *      summary: Get all vendor_invoices
+  *      description: Get all vendor_invoices
+  *      responses:
+  *        200:
+  *          description: Vendor_invoices list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Vendor_invoices"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await Vendor_invoicesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','invoice_number','notes',
+        
+        'subtotal','tax_total','grand_total',
+      'invoice_date','due_date',
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/vendor_invoices/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Vendor_invoices]
+ *      summary: Count all vendor_invoices
+ *      description: Count all vendor_invoices
+ *      responses:
+ *        200:
+ *          description: Vendor_invoices count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Vendor_invoices"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await Vendor_invoicesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/vendor_invoices/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Vendor_invoices]
+ *      summary: Find all vendor_invoices that match search criteria
+ *      description: Find all vendor_invoices that match search criteria
+ *      responses:
+ *        200:
+ *          description: Vendor_invoices list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Vendor_invoices"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await Vendor_invoicesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/vendor_invoices/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendor_invoices]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendor_invoices"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await Vendor_invoicesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/vendors.js b/backend/src/routes/vendors.js
new file mode 100644
index 0000000..a74ce41
--- /dev/null
+++ b/backend/src/routes/vendors.js
@@ -0,0 +1,459 @@
+
+const express = require('express');
+
+const VendorsService = require('../services/vendors');
+const VendorsDBApi = require('../db/api/vendors');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('vendors'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Vendors:
+ *        type: object
+ *        properties:
+ 
+ *          vendor_name:
+ *            type: string
+ *            default: vendor_name
+ *          vendor_code:
+ *            type: string
+ *            default: vendor_code
+ *          contact_name:
+ *            type: string
+ *            default: contact_name
+ *          email:
+ *            type: string
+ *            default: email
+ *          phone:
+ *            type: string
+ *            default: phone
+ *          address:
+ *            type: string
+ *            default: address
+ *          payment_terms:
+ *            type: string
+ *            default: payment_terms
+ 
+ 
+ 
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Vendors
+ *   description: The Vendors managing API
+ */
+
+/**
+*  @swagger
+*  /api/vendors:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Vendors]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Vendors"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Vendors"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await VendorsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Vendors]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Vendors"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Vendors"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await VendorsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/vendors/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendors]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Vendors"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendors"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await VendorsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/vendors/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendors]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendors"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await VendorsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/vendors/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendors]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendors"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await VendorsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/vendors:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendors]
+  *      summary: Get all vendors
+  *      description: Get all vendors
+  *      responses:
+  *        200:
+  *          description: Vendors list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Vendors"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await VendorsDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','vendor_name','vendor_code','contact_name','email','phone','address','payment_terms',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/vendors/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Vendors]
+ *      summary: Count all vendors
+ *      description: Count all vendors
+ *      responses:
+ *        200:
+ *          description: Vendors count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Vendors"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await VendorsDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/vendors/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Vendors]
+ *      summary: Find all vendors that match search criteria
+ *      description: Find all vendors that match search criteria
+ *      responses:
+ *        200:
+ *          description: Vendors list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Vendors"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await VendorsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/vendors/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Vendors]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Vendors"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await VendorsDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/routes/warehouses.js b/backend/src/routes/warehouses.js
new file mode 100644
index 0000000..7f8a73d
--- /dev/null
+++ b/backend/src/routes/warehouses.js
@@ -0,0 +1,446 @@
+
+const express = require('express');
+
+const WarehousesService = require('../services/warehouses');
+const WarehousesDBApi = require('../db/api/warehouses');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const config = require('../config');
+
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+
+const {
+    checkCrudPermissions,
+} = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('warehouses'));
+
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Warehouses:
+ *        type: object
+ *        properties:
+ 
+ *          warehouse_name:
+ *            type: string
+ *            default: warehouse_name
+ *          warehouse_code:
+ *            type: string
+ *            default: warehouse_code
+ *          address:
+ *            type: string
+ *            default: address
+ 
+ 
+ 
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Warehouses
+ *   description: The Warehouses managing API
+ */
+
+/**
+*  @swagger
+*  /api/warehouses:
+*    post:
+*      security:
+*        - bearerAuth: []
+*      tags: [Warehouses]
+*      summary: Add new item
+*      description: Add new item
+*      requestBody:
+*        required: true
+*        content:
+*          application/json:
+*            schema:
+*              properties:
+*                data:
+*                  description: Data of the updated item
+*                  type: object
+*                  $ref: "#/components/schemas/Warehouses"
+*      responses:
+*        200:
+*          description: The item was successfully added
+*          content:
+*            application/json:
+*              schema:
+*                $ref: "#/components/schemas/Warehouses"
+*        401:
+*          $ref: "#/components/responses/UnauthorizedError"
+*        405:
+*          description: Invalid input data
+*        500:
+*          description: Some server error
+*/
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await WarehousesService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Warehouses]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Warehouses"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Warehouses"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post('/bulk-import', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await WarehousesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/warehouses/{id}:
+  *    put:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Warehouses]
+  *      summary: Update the data of the selected item
+  *      description: Update the data of the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to update
+  *          required: true
+  *          schema:
+  *            type: string
+  *      requestBody:
+  *        description: Set new item data
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                id:
+  *                  description: ID of the updated item
+  *                  type: string
+  *                data:
+  *                  description: Data of the updated item
+  *                  type: object
+  *                  $ref: "#/components/schemas/Warehouses"
+  *              required:
+  *                - id
+  *      responses:
+  *        200:
+  *          description: The item data was successfully updated
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Warehouses"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.put('/:id', wrapAsync(async (req, res) => {
+  await WarehousesService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  * @swagger
+  *  /api/warehouses/{id}:
+  *    delete:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Warehouses]
+  *      summary: Delete the selected item
+  *      description: Delete the selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: Item ID to delete
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: The item was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Warehouses"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await WarehousesService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+/**
+  *  @swagger
+  *  /api/warehouses/deleteByIds:
+  *    post:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Warehouses]
+  *      summary: Delete the selected item list
+  *      description: Delete the selected item list
+  *      requestBody:
+  *        required: true
+  *        content:
+  *          application/json:
+  *            schema:
+  *              properties:
+  *                ids:
+  *                  description: IDs of the updated items
+  *                  type: array
+  *      responses:
+  *        200:
+  *          description: The items was successfully deleted
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Warehouses"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Items not found
+  *        500:
+  *          description: Some server error
+  */
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await WarehousesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+/**
+  *  @swagger
+  *  /api/warehouses:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Warehouses]
+  *      summary: Get all warehouses
+  *      description: Get all warehouses
+  *      responses:
+  *        200:
+  *          description: Warehouses list successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                type: array
+  *                items:
+  *                  $ref: "#/components/schemas/Warehouses"
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Data not found
+  *        500:
+  *          description: Some server error
+*/
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+  const currentUser = req.currentUser;
+  const payload = await WarehousesDBApi.findAll(
+    req.query,  globalAccess,  { currentUser }
+  );
+  if (filetype && filetype === 'csv') {
+    const fields = ['id','warehouse_name','warehouse_code','address',
+        
+        
+      
+        ];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv)
+
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+
+}));
+
+/**
+ *  @swagger
+ *  /api/warehouses/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Warehouses]
+ *      summary: Count all warehouses
+ *      description: Count all warehouses
+ *      responses:
+ *        200:
+ *          description: Warehouses count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Warehouses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/count', wrapAsync(async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  
+    const currentUser = req.currentUser;
+    const payload = await WarehousesDBApi.findAll(
+        req.query,
+         globalAccess, 
+        { countOnly: true, currentUser }
+    );
+
+    res.status(200).send(payload);
+}));
+
+/**
+ *  @swagger
+ *  /api/warehouses/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Warehouses]
+ *      summary: Find all warehouses that match search criteria
+ *      description: Find all warehouses that match search criteria
+ *      responses:
+ *        200:
+ *          description: Warehouses list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Warehouses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  
+  const globalAccess = req.currentUser.app_role.globalAccess;
+    
+  const organizationId =  req.currentUser.organization?.id
+   
+  
+  const payload = await WarehousesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+     globalAccess,  organizationId,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+  * @swagger
+  *  /api/warehouses/{id}:
+  *    get:
+  *      security:
+  *        - bearerAuth: []
+  *      tags: [Warehouses]
+  *      summary: Get selected item
+  *      description: Get selected item
+  *      parameters:
+  *        - in: path
+  *          name: id
+  *          description: ID of item to get
+  *          required: true
+  *          schema:
+  *            type: string
+  *      responses:
+  *        200:
+  *          description: Selected item successfully received
+  *          content:
+  *            application/json:
+  *              schema:
+  *                $ref: "#/components/schemas/Warehouses"
+  *        400:
+  *          description: Invalid ID supplied
+  *        401:
+  *          $ref: "#/components/responses/UnauthorizedError"
+  *        404:
+  *          description: Item not found
+  *        500:
+  *          description: Some server error
+  */
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await WarehousesDBApi.findBy(
+    { id: req.params.id },
+  );
+  
+  
+
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
diff --git a/backend/src/services/activity_logs.js b/backend/src/services/activity_logs.js
new file mode 100644
index 0000000..5cd80ff
--- /dev/null
+++ b/backend/src/services/activity_logs.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Activity_logsDBApi = require('../db/api/activity_logs');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Activity_logsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Activity_logsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Activity_logsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let activity_logs = await Activity_logsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!activity_logs) {
+        throw new ValidationError(
+          'activity_logsNotFound',
+        );
+      }
+
+      const updatedActivity_logs = await Activity_logsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedActivity_logs;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Activity_logsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Activity_logsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/approval_steps.js b/backend/src/services/approval_steps.js
new file mode 100644
index 0000000..62c72aa
--- /dev/null
+++ b/backend/src/services/approval_steps.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Approval_stepsDBApi = require('../db/api/approval_steps');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Approval_stepsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Approval_stepsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Approval_stepsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let approval_steps = await Approval_stepsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!approval_steps) {
+        throw new ValidationError(
+          'approval_stepsNotFound',
+        );
+      }
+
+      const updatedApproval_steps = await Approval_stepsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedApproval_steps;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Approval_stepsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Approval_stepsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/approval_workflows.js b/backend/src/services/approval_workflows.js
new file mode 100644
index 0000000..8f42e11
--- /dev/null
+++ b/backend/src/services/approval_workflows.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Approval_workflowsDBApi = require('../db/api/approval_workflows');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Approval_workflowsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Approval_workflowsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Approval_workflowsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let approval_workflows = await Approval_workflowsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!approval_workflows) {
+        throw new ValidationError(
+          'approval_workflowsNotFound',
+        );
+      }
+
+      const updatedApproval_workflows = await Approval_workflowsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedApproval_workflows;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Approval_workflowsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Approval_workflowsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/approvals.js b/backend/src/services/approvals.js
new file mode 100644
index 0000000..f9cf222
--- /dev/null
+++ b/backend/src/services/approvals.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const ApprovalsDBApi = require('../db/api/approvals');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class ApprovalsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ApprovalsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await ApprovalsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let approvals = await ApprovalsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!approvals) {
+        throw new ValidationError(
+          'approvalsNotFound',
+        );
+      }
+
+      const updatedApprovals = await ApprovalsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedApprovals;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ApprovalsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ApprovalsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/auth.js b/backend/src/services/auth.js
new file mode 100644
index 0000000..bcc3411
--- /dev/null
+++ b/backend/src/services/auth.js
@@ -0,0 +1,314 @@
+const UsersDBApi = require('../db/api/users');
+const ValidationError = require('./notifications/errors/validation');
+const ForbiddenError = require('./notifications/errors/forbidden');
+const bcrypt = require('bcrypt');
+const EmailAddressVerificationEmail = require('./email/list/addressVerification');
+const InvitationEmail = require("./email/list/invitation");
+const PasswordResetEmail = require('./email/list/passwordReset');
+const EmailSender = require('./email');
+const config = require('../config');
+const helpers = require('../helpers');
+
+class Auth {
+  static async signup(email, password, organizationId, options = {}, host) {
+    const user = await UsersDBApi.findBy({email});
+
+    const hashedPassword = await bcrypt.hash(
+      password,
+      config.bcrypt.saltRounds,
+    );
+
+    if (user) {
+      if (user.authenticationUid) {
+        throw new ValidationError(
+          'auth.emailAlreadyInUse',
+        );
+      }
+
+      if (user.disabled) {
+        throw new ValidationError(
+          'auth.userDisabled',
+        );
+      }
+
+      await UsersDBApi.updatePassword(
+        user.id,
+        hashedPassword,
+        options,
+      );
+
+      if (EmailSender.isConfigured) {
+        await this.sendEmailAddressVerificationEmail(
+          user.email,
+          host,
+        );
+      }
+
+      const data = {
+        user: {
+          id: user.id,
+          email: user.email
+        }
+      };
+
+      return helpers.jwtSign(data);
+    }
+
+    const newUser = await UsersDBApi.createFromAuth(
+      {
+        firstName: email.split('@')[0],
+        password: hashedPassword,
+        email: email,
+        
+        organizationId: organizationId,
+        
+      },
+      options,
+    );
+
+    if (EmailSender.isConfigured) {
+      await this.sendEmailAddressVerificationEmail(
+        newUser.email,
+        host,
+      );
+    }
+
+    const data = {
+      user: {
+        id: newUser.id,
+        email: newUser.email
+      }
+    };
+
+    return helpers.jwtSign(data);
+  }
+
+  static async signin(email, password, options = {}) {
+    const user = await UsersDBApi.findBy({email});
+
+    if (!user) {
+      throw new ValidationError(
+        'auth.userNotFound',
+      );
+    }
+
+    if (user.disabled) {
+      throw new ValidationError(
+        'auth.userDisabled',
+      );
+    }
+
+    if (!user.password) {
+      throw new ValidationError(
+        'auth.wrongPassword',
+      );
+    }
+
+    if (!EmailSender.isConfigured) {
+      user.emailVerified = true;
+    }
+
+    if (!user.emailVerified) {
+      throw new ValidationError(
+        'auth.userNotVerified',
+      );
+    }
+
+    const passwordsMatch = await bcrypt.compare(
+      password,
+      user.password,
+    );
+
+    if (!passwordsMatch) {
+      throw new ValidationError(
+        'auth.wrongPassword',
+      );
+    }
+
+    const data = {
+      user: {
+        id: user.id,
+        email: user.email
+      }
+    };
+
+    return helpers.jwtSign(data);
+  }
+
+  static async sendEmailAddressVerificationEmail(
+    email,
+    host,
+  ) {
+
+
+    let link;
+    try {
+      const token = await UsersDBApi.generateEmailVerificationToken(
+        email,
+      );
+      link = `${host}/verify-email?token=${token}`;
+    } catch (error) {
+      console.error(error);
+      throw new ValidationError(
+        'auth.emailAddressVerificationEmail.error',
+      );
+    }
+
+    const emailAddressVerificationEmail = new EmailAddressVerificationEmail(
+      email,
+      link,
+    );
+
+    return new EmailSender(
+      emailAddressVerificationEmail,
+    ).send();
+  }
+
+  static async sendPasswordResetEmail(email, type = 'register', host) {
+
+
+    let link;
+
+    try {
+      const token = await UsersDBApi.generatePasswordResetToken(
+        email,
+      );
+      link = `${host}/password-reset?token=${token}`;
+    } catch (error) {
+      console.error(error);
+      throw new ValidationError(
+        'auth.passwordReset.error',
+      );
+    }
+
+    let passwordResetEmail;
+    if (type === 'register') {
+      passwordResetEmail = new PasswordResetEmail(
+        email,
+        link,
+      );
+    }
+    if (type === 'invitation') {
+      passwordResetEmail = new InvitationEmail(
+        email,
+        link,
+      );
+    }
+
+    return new EmailSender(passwordResetEmail).send();
+  }
+
+  static async verifyEmail(token, options = {}) {
+    const user = await UsersDBApi.findByEmailVerificationToken(
+      token,
+      options,
+    );
+
+    if (!user) {
+      throw new ValidationError(
+        'auth.emailAddressVerificationEmail.invalidToken',
+      );
+    }
+
+    return UsersDBApi.markEmailVerified(
+      user.id,
+      options,
+    );
+  }
+
+  static async passwordUpdate(currentPassword, newPassword, options) {
+    const currentUser = options.currentUser || null;
+    if (!currentUser) {
+      throw new ForbiddenError();
+    }
+
+    const currentPasswordMatch = await bcrypt.compare(
+      currentPassword,
+      currentUser.password,
+    );
+
+    if (!currentPasswordMatch) {
+      throw new ValidationError(
+        'auth.wrongPassword'
+      )
+    }
+
+    const newPasswordMatch = await bcrypt.compare(
+      newPassword,
+      currentUser.password,
+    );
+
+    if (newPasswordMatch) {
+      throw new ValidationError(
+        'auth.passwordUpdate.samePassword'
+      )
+    }
+
+    const hashedPassword = await bcrypt.hash(
+      newPassword,
+      config.bcrypt.saltRounds,
+    );
+
+    return UsersDBApi.updatePassword(
+      currentUser.id,
+      hashedPassword,
+      options,
+    );
+  }
+
+  static async passwordReset(
+    token,
+    password,
+    options = {},
+  ) {
+    const user = await UsersDBApi.findByPasswordResetToken(
+      token,
+      options,
+    );
+
+    if (!user) {
+      throw new ValidationError(
+        'auth.passwordReset.invalidToken',
+      );
+    }
+
+    const hashedPassword = await bcrypt.hash(
+      password,
+      config.bcrypt.saltRounds,
+    );
+
+    return UsersDBApi.updatePassword(
+      user.id,
+      hashedPassword,
+      options,
+    );
+  }
+
+  static async updateProfile(data, currentUser) {
+    let transaction = await db.sequelize.transaction();
+
+    try {
+      await UsersDBApi.findBy(
+        {id: currentUser.id},
+        {transaction},
+      );
+
+      await UsersDBApi.update(
+        currentUser.id,
+        data,
+        {
+          currentUser,
+          transaction
+        },
+      );
+
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+}
+
+module.exports = Auth;
diff --git a/backend/src/services/companies.js b/backend/src/services/companies.js
new file mode 100644
index 0000000..67af406
--- /dev/null
+++ b/backend/src/services/companies.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const CompaniesDBApi = require('../db/api/companies');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class CompaniesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await CompaniesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await CompaniesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let companies = await CompaniesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!companies) {
+        throw new ValidationError(
+          'companiesNotFound',
+        );
+      }
+
+      const updatedCompanies = await CompaniesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedCompanies;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await CompaniesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await CompaniesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/departments.js b/backend/src/services/departments.js
new file mode 100644
index 0000000..56a2ff2
--- /dev/null
+++ b/backend/src/services/departments.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const DepartmentsDBApi = require('../db/api/departments');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class DepartmentsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await DepartmentsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await DepartmentsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let departments = await DepartmentsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!departments) {
+        throw new ValidationError(
+          'departmentsNotFound',
+        );
+      }
+
+      const updatedDepartments = await DepartmentsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedDepartments;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await DepartmentsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await DepartmentsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/document_links.js b/backend/src/services/document_links.js
new file mode 100644
index 0000000..5c882ea
--- /dev/null
+++ b/backend/src/services/document_links.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Document_linksDBApi = require('../db/api/document_links');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Document_linksService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Document_linksDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Document_linksDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let document_links = await Document_linksDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!document_links) {
+        throw new ValidationError(
+          'document_linksNotFound',
+        );
+      }
+
+      const updatedDocument_links = await Document_linksDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedDocument_links;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Document_linksDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Document_linksDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/document_types.js b/backend/src/services/document_types.js
new file mode 100644
index 0000000..262d00b
--- /dev/null
+++ b/backend/src/services/document_types.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Document_typesDBApi = require('../db/api/document_types');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Document_typesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Document_typesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Document_typesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let document_types = await Document_typesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!document_types) {
+        throw new ValidationError(
+          'document_typesNotFound',
+        );
+      }
+
+      const updatedDocument_types = await Document_typesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedDocument_types;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Document_typesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Document_typesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/documents.js b/backend/src/services/documents.js
new file mode 100644
index 0000000..cf72c9f
--- /dev/null
+++ b/backend/src/services/documents.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const DocumentsDBApi = require('../db/api/documents');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class DocumentsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await DocumentsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await DocumentsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let documents = await DocumentsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!documents) {
+        throw new ValidationError(
+          'documentsNotFound',
+        );
+      }
+
+      const updatedDocuments = await DocumentsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedDocuments;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await DocumentsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await DocumentsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/email/htmlTemplates/addressVerification/emailAddressVerification.html b/backend/src/services/email/htmlTemplates/addressVerification/emailAddressVerification.html
new file mode 100644
index 0000000..32bfa2c
--- /dev/null
+++ b/backend/src/services/email/htmlTemplates/addressVerification/emailAddressVerification.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .email-container {
+            max-width: 600px;
+            margin: auto;
+            background-color: #ffffff;
+            border: 1px solid #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .email-header {
+            background-color: #3498db;
+            color: #fff;
+            padding: 16px;
+            text-align: center;
+        }
+        .email-body {
+            padding: 16px;
+        }
+        .email-footer {
+            padding: 16px;
+            background-color: #f7fafc;
+            text-align: center;
+            color: #4a5568;
+            font-size: 14px;
+        }
+        .link-primary {
+            color: #3498db;
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
+<div class="email-container">
+    <div class="email-header">
+        Verify your email for {appTitle}!
+    </div>
+    <div class="email-body">
+        <p>Hello,</p>
+        <p>Follow this link to verify your email address.</p>
+        <p>If you didn't ask to verify this address, you can ignore this email.</p>
+        <p><a href="{signupUrl}" class="link-primary">{signupUrl}</a></p>
+    </div>
+    <div class="email-footer">
+        Thanks,<br/>
+        The {appTitle} Team
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/backend/src/services/email/htmlTemplates/invitation/invitationTemplate.html b/backend/src/services/email/htmlTemplates/invitation/invitationTemplate.html
new file mode 100644
index 0000000..064c88d
--- /dev/null
+++ b/backend/src/services/email/htmlTemplates/invitation/invitationTemplate.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .email-container {
+            max-width: 600px;
+            margin: auto;
+            background-color: #ffffff;
+            border: 1px solid #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .email-header {
+            background-color: #3498db;
+            color: #fff;
+            padding: 16px;
+            text-align: center;
+        }
+        .email-body {
+            padding: 16px;
+        }
+        .email-footer {
+            padding: 16px;
+            background-color: #f7fafc;
+            text-align: center;
+            color: #4a5568;
+            font-size: 14px;
+        }
+        .btn-primary {
+            background-color: #3498db;
+            color: #fff!important;
+            padding: 8px 16px;
+            border-radius: 4px;
+            text-decoration: none;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+<div class="email-container">
+    <div class="email-header">
+        Welcome to {appTitle}!
+    </div>
+    <div class="email-body">
+        <p>Hello,</p>
+        <p>You've been invited to join {appTitle}. Please click the button below to set up your account.</p>
+        <a href="{signupUrl}" class="btn-primary">Set up account</a>
+    </div>
+    <div class="email-footer">
+        Thanks,<br/>
+        The {appTitle} Team
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/backend/src/services/email/htmlTemplates/passwordReset/passwordResetEmail.html b/backend/src/services/email/htmlTemplates/passwordReset/passwordResetEmail.html
new file mode 100644
index 0000000..94f0586
--- /dev/null
+++ b/backend/src/services/email/htmlTemplates/passwordReset/passwordResetEmail.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .email-container {
+            max-width: 600px;
+            margin: auto;
+            background-color: #ffffff;
+            border: 1px solid #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .email-header {
+            background-color: #3498db;
+            color: #fff;
+            padding: 16px;
+            text-align: center;
+        }
+        .email-body {
+            padding: 16px;
+        }
+        .email-footer {
+            padding: 16px;
+            background-color: #f7fafc;
+            text-align: center;
+            color: #4a5568;
+            font-size: 14px;
+        }
+        .link-primary {
+            color: #3498db;
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
+<div class="email-container">
+    <div class="email-header">
+        Reset your password for {appTitle}
+    </div>
+    <div class="email-body">
+        <p>Hello,</p>
+        <p>Follow this link to reset your {appTitle} password for your {accountName} account.</p>
+        <p><a href="{resetUrl}" class="link-primary">{resetUrl}</a></p>
+        <p>If you didn't ask to reset your password, you can ignore this email.</p>
+    </div>
+    <div class="email-footer">
+        Thanks,<br/>
+        The {appTitle} Team
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/backend/src/services/email/index.js b/backend/src/services/email/index.js
new file mode 100644
index 0000000..bc97a3d
--- /dev/null
+++ b/backend/src/services/email/index.js
@@ -0,0 +1,44 @@
+const config = require('../../config');
+const assert = require('assert');
+const nodemailer = require('nodemailer');
+
+module.exports = class EmailSender {
+  constructor(email) {
+    this.email = email;
+  }
+
+  async send() {
+    assert(this.email, 'email is required');
+    assert(this.email.to, 'email.to is required');
+    assert(this.email.subject, 'email.subject is required');
+    assert(this.email.html, 'email.html is required');
+
+    const htmlContent = await this.email.html();
+
+    const transporter = nodemailer.createTransport(this.transportConfig);
+
+    const mailOptions = {
+      from: this.from,
+      to: this.email.to,
+      subject: this.email.subject,
+      html: htmlContent,
+      headers: {
+        'X-SES-CONFIGURATION-SET': 'flatlogic-app',
+      },
+    };
+
+    return transporter.sendMail(mailOptions);
+  }
+
+  static get isConfigured() {
+    return !!config.email?.auth?.pass && !!config.email?.auth?.user;
+  }
+
+  get transportConfig() {
+    return config.email;
+  }
+
+  get from() {
+    return config.email.from;
+  }
+};
diff --git a/backend/src/services/email/list/addressVerification.js b/backend/src/services/email/list/addressVerification.js
new file mode 100644
index 0000000..695e199
--- /dev/null
+++ b/backend/src/services/email/list/addressVerification.js
@@ -0,0 +1,38 @@
+const { getNotification } = require('../../notifications/helpers');
+const fs = require('fs').promises;
+const path = require('path');
+
+module.exports = class EmailAddressVerificationEmail {
+  constructor(to, link) {
+    this.to = to;
+    this.link = link;
+  }
+
+  get subject() {
+    return getNotification(
+        'emails.emailAddressVerification.subject',
+        getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(__dirname, '../../email/htmlTemplates/addressVerification/emailAddressVerification.html');
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const signupUrl = this.link;
+
+      let html = template.replace(/{appTitle}/g, appTitle)
+          .replace(/{signupUrl}/g, signupUrl)
+          .replace(/{to}/g, this.to);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+
+};
diff --git a/backend/src/services/email/list/invitation.js b/backend/src/services/email/list/invitation.js
new file mode 100644
index 0000000..928c537
--- /dev/null
+++ b/backend/src/services/email/list/invitation.js
@@ -0,0 +1,37 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { getNotification } = require('../../notifications/helpers');
+
+module.exports = class InvitationEmail {
+  constructor(to, host) {
+    this.to = to;
+    this.host = host;
+  }
+
+  get subject() {
+    return getNotification(
+        'emails.invitation.subject',
+        getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(__dirname, '../../email/htmlTemplates/invitation/invitationTemplate.html');
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const signupUrl = `${this.host}&invitation=true`;
+
+      let html = template.replace(/{appTitle}/g, appTitle)
+          .replace(/{signupUrl}/g, signupUrl)
+          .replace(/{to}/g, this.to);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+};
\ No newline at end of file
diff --git a/backend/src/services/email/list/passwordReset.js b/backend/src/services/email/list/passwordReset.js
new file mode 100644
index 0000000..c1fd105
--- /dev/null
+++ b/backend/src/services/email/list/passwordReset.js
@@ -0,0 +1,38 @@
+const { getNotification } = require('../../notifications/helpers');
+const path = require("path");
+const {promises: fs} = require("fs");
+
+module.exports = class PasswordResetEmail {
+  constructor(to, link) {
+    this.to = to;
+    this.link = link;
+  }
+
+  get subject() {
+    return getNotification(
+      'emails.passwordReset.subject',
+      getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(__dirname, '../../email/htmlTemplates/passwordReset/passwordResetEmail.html');
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const resetUrl = this.link;
+      const accountName = this.to;
+
+      let html = template.replace(/{appTitle}/g, appTitle)
+          .replace(/{resetUrl}/g, resetUrl)
+          .replace(/{accountName}/g, accountName);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+};
diff --git a/backend/src/services/file.js b/backend/src/services/file.js
new file mode 100644
index 0000000..597be30
--- /dev/null
+++ b/backend/src/services/file.js
@@ -0,0 +1,213 @@
+const formidable = require('formidable');
+const fs = require('fs');
+const config = require('../config');
+const path = require('path');
+const { format } = require("util");
+
+const ensureDirectoryExistence = (filePath) => {
+  const dirname = path.dirname(filePath);
+
+  if (fs.existsSync(dirname)) {
+    return true;
+  }
+
+  ensureDirectoryExistence(dirname);
+  fs.mkdirSync(dirname);
+}
+
+const uploadLocal = (
+  folder,
+  validations = {
+    entity: null,
+    maxFileSize: null,
+    folderIncludesAuthenticationUid: false,
+  },
+) => {
+  return (req, res) => {
+    if (!req.currentUser) {
+      res.sendStatus(403);
+      return;
+    }
+
+    if (
+      validations.entity
+    ) {
+      res.sendStatus(403);
+      return;
+    }
+
+    if (validations.folderIncludesAuthenticationUid) {
+      folder = folder.replace(
+        ':userId',
+        req.currentUser.authenticationUid,
+      );
+      if (
+        !req.currentUser.authenticationUid ||
+        !folder.includes(req.currentUser.authenticationUid)
+      ) {
+        res.sendStatus(403);
+        return;
+      }
+    }
+
+    const form = new formidable.IncomingForm();
+    form.uploadDir = config.uploadDir;
+
+    if (validations && validations.maxFileSize) {
+      form.maxFileSize = validations.maxFileSize;
+    }
+
+    form.parse(req, function (err, fields, files) {
+      const filename = String(fields.filename);
+      const fileTempUrl = files.file.path;
+
+      if (!filename) {
+        fs.unlinkSync(fileTempUrl);
+        res.sendStatus(500);
+        return;
+      }
+
+      const privateUrl = path.join(
+        form.uploadDir,
+        folder,
+        filename,
+      );
+      ensureDirectoryExistence(privateUrl);
+      fs.renameSync(fileTempUrl, privateUrl);
+      res.sendStatus(200);
+    });
+
+    form.on('error', function (err) {
+      res.status(500).send(err);
+    });
+  }
+}
+
+const downloadLocal = async (req, res) => {
+    const privateUrl = req.query.privateUrl;
+    if (!privateUrl) {
+      return res.sendStatus(404);
+    }
+    res.download(path.join(config.uploadDir, privateUrl));
+}
+
+const initGCloud = () => {
+  const processFile = require("../middlewares/upload");
+  const { Storage } = require("@google-cloud/storage");
+
+  const crypto = require('crypto')
+  const hash = config.gcloud.hash
+
+  const privateKey = process.env.GC_PRIVATE_KEY.replace(/\\\n/g, "\n");
+
+  const storage = new Storage({
+      projectId: process.env.GC_PROJECT_ID,
+      credentials: {
+          client_email: process.env.GC_CLIENT_EMAIL,
+          private_key: privateKey
+      }
+  });
+
+  const bucket = storage.bucket(config.gcloud.bucket);
+  return {hash, bucket, processFile};
+}
+
+const uploadGCloud = async (folder, req, res) => {
+  try {
+    const {hash, bucket, processFile} = initGCloud();
+    await processFile(req, res);
+    let buffer = await req.file.buffer;
+    let filename = await req.body.filename;
+
+    if (!req.file) {
+      return res.status(400).send({ message: "Please upload a file!" });
+    }
+
+    let path = `${hash}/${folder}/${filename}`;
+    let blob = bucket.file(path);
+
+    console.log(path);
+
+    const blobStream = blob.createWriteStream({
+      resumable: false,
+    });
+
+    blobStream.on("error", (err) => {
+      console.log('Upload error');
+      console.log(err.message);
+      res.status(500).send({ message: err.message });
+    });
+
+    console.log(`https://storage.googleapis.com/${bucket.name}/${blob.name}`);
+
+    blobStream.on("finish", async (data) => {
+      const publicUrl = format(
+        `https://storage.googleapis.com/${bucket.name}/${blob.name}`
+      );
+
+      res.status(200).send({
+        message: "Uploaded the file successfully: " + path,
+        url: publicUrl,
+      });
+    });
+
+    blobStream.end(buffer)
+  } catch (err) {
+    console.log(err);
+
+    res.status(500).send({
+      message: `Could not upload the file. ${err}`
+    });
+  }
+}
+
+const downloadGCloud = async (req, res) => {
+  try {
+    const {hash, bucket, processFile} = initGCloud();
+
+    const privateUrl = await req.query.privateUrl;
+    const filePath = `${hash}/${privateUrl}`;
+    const file = bucket.file(filePath)
+    const fileExists = await file.exists();
+
+    if (fileExists[0]) {
+      const stream = file.createReadStream();
+      stream.pipe(res);
+    }
+    else {
+      res.status(404).send({
+        message: "Could not download the file. " + err,
+      });      
+    }
+  } catch (err) {
+    res.status(404).send({
+      message: "Could not download the file. " + err,
+    });
+  }
+}
+
+const deleteGCloud = async (privateUrl) => {
+  try {
+    const {hash, bucket, processFile} = initGCloud();
+    const filePath = `${hash}/${privateUrl}`;
+
+    const file = bucket.file(filePath)
+    const fileExists = await file.exists();
+
+    if (fileExists[0]) {
+      file.delete();
+    }
+  } catch (err) {
+    console.log(`Cannot find the file ${privateUrl}`);
+  }
+}
+
+module.exports = {
+  initGCloud,
+  uploadLocal,
+  downloadLocal,
+  deleteGCloud,
+  uploadGCloud,
+  downloadGCloud
+}
+
diff --git a/backend/src/services/goods_receipt_lines.js b/backend/src/services/goods_receipt_lines.js
new file mode 100644
index 0000000..1c5c2a8
--- /dev/null
+++ b/backend/src/services/goods_receipt_lines.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Goods_receipt_linesDBApi = require('../db/api/goods_receipt_lines');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Goods_receipt_linesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Goods_receipt_linesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Goods_receipt_linesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let goods_receipt_lines = await Goods_receipt_linesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!goods_receipt_lines) {
+        throw new ValidationError(
+          'goods_receipt_linesNotFound',
+        );
+      }
+
+      const updatedGoods_receipt_lines = await Goods_receipt_linesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedGoods_receipt_lines;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Goods_receipt_linesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Goods_receipt_linesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/goods_receipts.js b/backend/src/services/goods_receipts.js
new file mode 100644
index 0000000..de98f54
--- /dev/null
+++ b/backend/src/services/goods_receipts.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Goods_receiptsDBApi = require('../db/api/goods_receipts');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Goods_receiptsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Goods_receiptsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Goods_receiptsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let goods_receipts = await Goods_receiptsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!goods_receipts) {
+        throw new ValidationError(
+          'goods_receiptsNotFound',
+        );
+      }
+
+      const updatedGoods_receipts = await Goods_receiptsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedGoods_receipts;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Goods_receiptsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Goods_receiptsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/invoice_lines.js b/backend/src/services/invoice_lines.js
new file mode 100644
index 0000000..d6321b7
--- /dev/null
+++ b/backend/src/services/invoice_lines.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Invoice_linesDBApi = require('../db/api/invoice_lines');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Invoice_linesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Invoice_linesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Invoice_linesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let invoice_lines = await Invoice_linesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!invoice_lines) {
+        throw new ValidationError(
+          'invoice_linesNotFound',
+        );
+      }
+
+      const updatedInvoice_lines = await Invoice_linesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedInvoice_lines;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Invoice_linesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Invoice_linesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/notifications/errors/forbidden.js b/backend/src/services/notifications/errors/forbidden.js
new file mode 100644
index 0000000..33e5dc2
--- /dev/null
+++ b/backend/src/services/notifications/errors/forbidden.js
@@ -0,0 +1,17 @@
+const { getNotification, isNotification } = require('../helpers');
+
+module.exports = class ForbiddenError extends Error {
+  constructor(messageCode) {
+    let message;
+
+    if (messageCode && isNotification(messageCode)) {
+      message = getNotification(messageCode);
+    }
+
+    message =
+      message || getNotification('errors.forbidden.message');
+
+    super(message);
+    this.code = 403;
+  }
+};
diff --git a/backend/src/services/notifications/errors/validation.js b/backend/src/services/notifications/errors/validation.js
new file mode 100644
index 0000000..cf3130c
--- /dev/null
+++ b/backend/src/services/notifications/errors/validation.js
@@ -0,0 +1,18 @@
+const { getNotification, isNotification } = require('../helpers');
+
+module.exports = class ValidationError extends Error {
+  constructor(messageCode) {
+    let message;
+
+    if (messageCode && isNotification(messageCode)) {
+      message = getNotification(messageCode);
+    }
+
+    message =
+      message ||
+      getNotification('errors.validation.message');
+
+    super(message);
+    this.code = 400;
+  }
+};
diff --git a/backend/src/services/notifications/helpers.js b/backend/src/services/notifications/helpers.js
new file mode 100644
index 0000000..b2f31fd
--- /dev/null
+++ b/backend/src/services/notifications/helpers.js
@@ -0,0 +1,35 @@
+const _get = require('lodash/get');
+const errors = require('./list');
+
+function format(message, args) {
+  if (!message) {
+    return null;
+  }
+
+  return message.replace(/{(\d+)}/g, function (
+    match,
+    number,
+  ) {
+    return typeof args[number] != 'undefined'
+      ? args[number]
+      : match;
+  });
+}
+
+const isNotification = (key) => {
+  const message = _get(errors, key);
+  return !!message;
+};
+
+const getNotification = (key, ...args) => {
+  const message = _get(errors, key);
+
+  if (!message) {
+    return key;
+  }
+
+  return format(message, args);
+};
+
+exports.getNotification = getNotification;
+exports.isNotification = isNotification;
diff --git a/backend/src/services/notifications/list.js b/backend/src/services/notifications/list.js
new file mode 100644
index 0000000..cb86c4a
--- /dev/null
+++ b/backend/src/services/notifications/list.js
@@ -0,0 +1,104 @@
+const errors = {
+  app: {
+    title: 'Modern ERP Redesign',
+  },
+
+  auth: {
+    userDisabled: 'Your account is disabled',
+    forbidden: 'Forbidden',
+    unauthorized: 'Unauthorized',
+    userNotFound: `Sorry, we don't recognize your credentials`,
+    wrongPassword: `Sorry, we don't recognize your credentials`,
+    weakPassword: 'This password is too weak',
+    emailAlreadyInUse: 'Email is already in use',
+    invalidEmail: 'Please provide a valid email',
+    passwordReset: {
+      invalidToken:
+        'Password reset link is invalid or has expired',
+      error: `Email not recognized`,
+    },
+    passwordUpdate: {
+      samePassword: `You can't use the same password. Please create new password`
+    },
+    userNotVerified: `Sorry, your email has not been verified yet`,
+    emailAddressVerificationEmail: {
+      invalidToken:
+        'Email verification link is invalid or has expired',
+      error: `Email not recognized`,
+    },
+  },
+
+  iam: {
+    errors: {
+      userAlreadyExists:
+        'User with this email already exists',
+      userNotFound: 'User not found',
+      disablingHimself: `You can't disable yourself`,
+      revokingOwnPermission: `You can't revoke your own owner permission`,
+      deletingHimself: `You can't delete yourself`,
+      emailRequired: 'Email is required',
+    },
+  },
+
+  importer: {
+    errors: {
+      invalidFileEmpty: 'The file is empty',
+      invalidFileExcel:
+        'Only excel (.xlsx) files are allowed',
+      invalidFileUpload:
+        'Invalid file. Make sure you are using the last version of the template.',
+      importHashRequired: 'Import hash is required',
+      importHashExistent: 'Data has already been imported',
+      userEmailMissing: 'Some items in the CSV do not have an email',
+    },
+  },
+
+  errors: {
+    forbidden: {
+      message: 'Forbidden',
+    },
+    validation: {
+      message: 'An error occurred',
+    },
+    searchQueryRequired: {
+        message: 'Search query is required',
+    },
+  },
+
+  emails: {
+    invitation: {
+      subject: `You've been invited to {0}`,
+      body: `    
+        <p>Hello,</p>
+        <p>You've been invited to {0} set password for your {1} account.</p>
+        <p><a href='{2}'>{2}</a></p>
+        <p>Thanks,</p>
+        <p>Your {0} team</p>
+      `,
+    },
+    emailAddressVerification: {
+      subject: `Verify your email for {0}`,
+      body: `
+        <p>Hello,</p>
+        <p>Follow this link to verify your email address.</p>
+        <p><a href='{0}'>{0}</a></p>
+        <p>If you didn't ask to verify this address, you can ignore this email.</p>
+        <p>Thanks,</p>
+        <p>Your {1} team</p>
+      `,
+    },
+    passwordReset: {
+      subject: `Reset your password for {0}`,
+      body: `
+        <p>Hello,</p>
+        <p>Follow this link to reset your {0} password for your {1} account.</p>
+        <p><a href='{2}'>{2}</a></p>
+        <p>If you didn't ask to reset your password, you can ignore this email.</p>
+        <p>Thanks,</p>
+        <p>Your {0} team</p>
+      `,
+    },
+  },
+};
+
+module.exports = errors;
diff --git a/backend/src/services/openai.js b/backend/src/services/openai.js
new file mode 100644
index 0000000..3793398
--- /dev/null
+++ b/backend/src/services/openai.js
@@ -0,0 +1,80 @@
+const axios = require('axios');
+const config = require('../config');
+const { LocalAIApi } = require('../ai/LocalAIApi');
+
+const loadRoleService = () => {
+  try {
+    return require('./roles');
+  } catch (error) {
+    console.error('Role service is missing. Advanced roles are required for this operation.', error);
+    const err = new Error('Role service is missing. Advanced roles are required for this operation.');
+    err.originalError = error;
+    throw err;
+  }
+};
+
+module.exports = class OpenAiService {
+  static async getWidget(payload, userId, roleId) {
+    const RoleService = loadRoleService();
+    const response = await axios.post(
+      `${config.flHost}/${config.project_uuid}/project_customization_widgets.json`,
+      payload,
+    );
+
+    if (response.status >= 200 && response.status < 300) {
+      const { widget_id } = await response.data;
+      await RoleService.addRoleInfo(roleId, userId, 'widgets', widget_id);
+      return widget_id;
+    } else {
+      console.error('=======error=======', response.data);
+      return { value: null, error: response.data };
+    }
+  }
+
+  static async askGpt(prompt) {
+    if (!prompt) {
+      return {
+        success: false,
+        error: 'Prompt is required'
+      };
+    }
+
+    const response = await LocalAIApi.createResponse(
+      {
+        input: [{ role: 'user', content: prompt }],
+      },
+      {
+        poll_interval: 5,
+        poll_timeout: 300,
+      },
+    );
+
+    if (response.success) {
+      let text = LocalAIApi.extractText(response);
+      if (!text) {
+        try {
+          const decoded = LocalAIApi.decodeJsonFromResponse(response);
+          text = JSON.stringify(decoded);
+        } catch (error) {
+          console.error('AI JSON decode failed:', error);
+          return {
+            success: false,
+            error: 'AI response parsing failed',
+            details: error.message || String(error),
+          };
+        }
+      }
+      return {
+        success: true,
+        data: text,
+      };
+    }
+
+    console.error('AI proxy error:', response);
+    return {
+      success: false,
+      error: response.error || response.message || 'AI proxy error',
+      response,
+    };
+  }
+};
diff --git a/backend/src/services/organizations.js b/backend/src/services/organizations.js
new file mode 100644
index 0000000..5dafbb9
--- /dev/null
+++ b/backend/src/services/organizations.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const OrganizationsDBApi = require('../db/api/organizations');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class OrganizationsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await OrganizationsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await OrganizationsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let organizations = await OrganizationsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!organizations) {
+        throw new ValidationError(
+          'organizationsNotFound',
+        );
+      }
+
+      const updatedOrganizations = await OrganizationsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedOrganizations;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await OrganizationsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await OrganizationsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/payments.js b/backend/src/services/payments.js
new file mode 100644
index 0000000..ef655fe
--- /dev/null
+++ b/backend/src/services/payments.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const PaymentsDBApi = require('../db/api/payments');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class PaymentsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await PaymentsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await PaymentsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let payments = await PaymentsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!payments) {
+        throw new ValidationError(
+          'paymentsNotFound',
+        );
+      }
+
+      const updatedPayments = await PaymentsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPayments;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await PaymentsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await PaymentsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/permissions.js b/backend/src/services/permissions.js
new file mode 100644
index 0000000..e505d0c
--- /dev/null
+++ b/backend/src/services/permissions.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const PermissionsDBApi = require('../db/api/permissions');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class PermissionsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await PermissionsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await PermissionsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let permissions = await PermissionsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!permissions) {
+        throw new ValidationError(
+          'permissionsNotFound',
+        );
+      }
+
+      const updatedPermissions = await PermissionsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPermissions;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await PermissionsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await PermissionsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/product_categories.js b/backend/src/services/product_categories.js
new file mode 100644
index 0000000..8fe1612
--- /dev/null
+++ b/backend/src/services/product_categories.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Product_categoriesDBApi = require('../db/api/product_categories');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Product_categoriesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Product_categoriesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Product_categoriesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let product_categories = await Product_categoriesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!product_categories) {
+        throw new ValidationError(
+          'product_categoriesNotFound',
+        );
+      }
+
+      const updatedProduct_categories = await Product_categoriesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedProduct_categories;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Product_categoriesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Product_categoriesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/products.js b/backend/src/services/products.js
new file mode 100644
index 0000000..458d58f
--- /dev/null
+++ b/backend/src/services/products.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const ProductsDBApi = require('../db/api/products');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class ProductsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ProductsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await ProductsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let products = await ProductsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!products) {
+        throw new ValidationError(
+          'productsNotFound',
+        );
+      }
+
+      const updatedProducts = await ProductsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedProducts;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ProductsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ProductsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/purchase_order_lines.js b/backend/src/services/purchase_order_lines.js
new file mode 100644
index 0000000..337e86f
--- /dev/null
+++ b/backend/src/services/purchase_order_lines.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Purchase_order_linesDBApi = require('../db/api/purchase_order_lines');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Purchase_order_linesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Purchase_order_linesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Purchase_order_linesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let purchase_order_lines = await Purchase_order_linesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!purchase_order_lines) {
+        throw new ValidationError(
+          'purchase_order_linesNotFound',
+        );
+      }
+
+      const updatedPurchase_order_lines = await Purchase_order_linesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPurchase_order_lines;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_order_linesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_order_linesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/purchase_orders.js b/backend/src/services/purchase_orders.js
new file mode 100644
index 0000000..eb6d2b4
--- /dev/null
+++ b/backend/src/services/purchase_orders.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Purchase_ordersDBApi = require('../db/api/purchase_orders');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Purchase_ordersService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Purchase_ordersDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Purchase_ordersDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let purchase_orders = await Purchase_ordersDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!purchase_orders) {
+        throw new ValidationError(
+          'purchase_ordersNotFound',
+        );
+      }
+
+      const updatedPurchase_orders = await Purchase_ordersDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPurchase_orders;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_ordersDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_ordersDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/purchase_requisition_lines.js b/backend/src/services/purchase_requisition_lines.js
new file mode 100644
index 0000000..3ba976c
--- /dev/null
+++ b/backend/src/services/purchase_requisition_lines.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Purchase_requisition_linesDBApi = require('../db/api/purchase_requisition_lines');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Purchase_requisition_linesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Purchase_requisition_linesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Purchase_requisition_linesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let purchase_requisition_lines = await Purchase_requisition_linesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!purchase_requisition_lines) {
+        throw new ValidationError(
+          'purchase_requisition_linesNotFound',
+        );
+      }
+
+      const updatedPurchase_requisition_lines = await Purchase_requisition_linesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPurchase_requisition_lines;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_requisition_linesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_requisition_linesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/purchase_requisitions.js b/backend/src/services/purchase_requisitions.js
new file mode 100644
index 0000000..ff11657
--- /dev/null
+++ b/backend/src/services/purchase_requisitions.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Purchase_requisitionsDBApi = require('../db/api/purchase_requisitions');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Purchase_requisitionsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Purchase_requisitionsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Purchase_requisitionsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let purchase_requisitions = await Purchase_requisitionsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!purchase_requisitions) {
+        throw new ValidationError(
+          'purchase_requisitionsNotFound',
+        );
+      }
+
+      const updatedPurchase_requisitions = await Purchase_requisitionsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedPurchase_requisitions;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_requisitionsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Purchase_requisitionsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/role_permission_mappings.js b/backend/src/services/role_permission_mappings.js
new file mode 100644
index 0000000..5bace74
--- /dev/null
+++ b/backend/src/services/role_permission_mappings.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Role_permission_mappingsDBApi = require('../db/api/role_permission_mappings');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Role_permission_mappingsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Role_permission_mappingsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Role_permission_mappingsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let role_permission_mappings = await Role_permission_mappingsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!role_permission_mappings) {
+        throw new ValidationError(
+          'role_permission_mappingsNotFound',
+        );
+      }
+
+      const updatedRole_permission_mappings = await Role_permission_mappingsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedRole_permission_mappings;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Role_permission_mappingsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Role_permission_mappingsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/roles.js b/backend/src/services/roles.js
new file mode 100644
index 0000000..ec6186b
--- /dev/null
+++ b/backend/src/services/roles.js
@@ -0,0 +1,399 @@
+const db = require('../db/models');
+const RolesDBApi = require('../db/api/roles');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+function buildWidgetResult(widget, queryResult, queryString) {
+    if (queryResult[0] && queryResult[0].length) {
+        const key = Object.keys(queryResult[0][0])[0];
+        const value = widget.widget_type === 'scalar' ? queryResult[0][0][key] : queryResult[0];
+        const widgetData = JSON.parse(widget.data);
+        return { ...widget, ...widgetData, value, query: queryString };
+    } else {
+        return { ...widget, value: [], query: queryString };
+    }
+}
+
+async function executeQuery(queryString, currentUser) {
+    try {
+        return await db.sequelize.query(queryString, {
+            replacements: { organizationId: currentUser.organizationId },
+        });
+    } catch (e) {
+        console.log(e);
+        return [];
+    }
+}
+
+function insertWhereConditions(queryString, whereConditions) {
+    if (!whereConditions) return queryString;
+
+    const whereIndex = queryString.toLowerCase().indexOf('where');
+    const groupByIndex = queryString.toLowerCase().indexOf('group by');
+    const insertIndex = whereIndex === -1
+        ? (groupByIndex !== -1 ? groupByIndex : queryString.length)
+        : whereIndex + 5;
+
+    const prefix = queryString.substring(0, insertIndex);
+    const suffix = queryString.substring(insertIndex);
+    const conditionString = whereIndex === -1 ? ` WHERE ${whereConditions} ` : ` ${whereConditions} AND `;
+
+    return `${prefix}${conditionString}${suffix}`;
+}
+
+function constructWhereConditions(mainTable, currentUser, replacements) {
+    const { organizationId, app_role: { globalAccess } } = currentUser;
+    const tablesWithoutOrgId = ['permissions', 'roles'];
+    let whereConditions = '';
+
+    if (!globalAccess && !tablesWithoutOrgId.includes(mainTable)) {
+        whereConditions += `"${mainTable}"."organizationId" = :organizationId`;
+        replacements.organizationId = organizationId;
+    }
+
+    whereConditions += whereConditions ? ' AND ' : '';
+    whereConditions += `"${mainTable}"."deletedAt" IS NULL`;
+
+    return whereConditions;
+}
+
+function extractTableName(queryString) {
+    const tableNameRegex = /FROM\s+("?)([^"\s]+)\1\s*/i;
+    const match = tableNameRegex.exec(queryString);
+    return match ? match[2] : null;
+}
+
+function buildQueryString(widget, currentUser) {
+    let queryString = widget?.query || '';
+    const tableName = extractTableName(queryString);
+    const mainTable = JSON.parse(widget?.data)?.main_table || tableName;
+    const replacements = {};
+    const whereConditions = constructWhereConditions(mainTable, currentUser, replacements);
+    queryString = insertWhereConditions(queryString, whereConditions);
+    console.log(queryString, 'queryString');
+    return queryString;
+}
+
+async function constructWidgetsResults(widgets, currentUser) {
+    const widgetsResults = [];
+    for (const widget of widgets) {
+        if (!widget) continue;
+        const queryString = buildQueryString(widget, currentUser);
+        const queryResult = await executeQuery(queryString, currentUser);
+        widgetsResults.push(buildWidgetResult(widget, queryResult, queryString));
+    }
+    return widgetsResults;
+}
+
+async function fetchWidgetsData(widgets) {
+    const widgetPromises = (widgets || []).map(widgetId =>
+        axios.get(`${config.flHost}/${config.project_uuid}/project_customization_widgets/${widgetId}.json`)
+    );
+    const widgetResults = widgetPromises ? await Promise.allSettled(widgetPromises) : [];
+    return widgetResults
+        .filter(result => result.status === 'fulfilled')
+        .map(result => result.value.data);
+}
+
+async function processWidgets(widgets, currentUser) {
+    const widgetData = await fetchWidgetsData(widgets);
+    return constructWidgetsResults(widgetData, currentUser);
+}
+
+function parseCustomization(role) {
+    try {
+        return JSON.parse(role.role_customization || '{}');
+    } catch (e) {
+        console.log(e);
+        return {};
+    }
+}
+
+async function findRole(roleId, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+        const role = roleId
+            ? await RolesDBApi.findBy({ id: roleId }, { transaction })
+            : await RolesDBApi.findBy({ name: 'User' }, { transaction });
+        await transaction.commit();
+        return role;
+    } catch (error) {
+        await transaction.rollback();
+        throw error;
+    }
+}
+
+
+module.exports = class RolesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await RolesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await RolesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let roles = await RolesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!roles) {
+        throw new ValidationError(
+          'rolesNotFound',
+        );
+      }
+
+      const updatedRoles = await RolesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedRoles;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await RolesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await RolesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+  static async addRoleInfo(roleId, userId, key, widgetId, currentUser) {
+      const regexExpForUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi;
+      const widgetIdIsUUID = regexExpForUuid.test(widgetId);
+
+      const transaction = await db.sequelize.transaction();
+      let role;
+      if (roleId) {
+          role = await RolesDBApi.findBy({ id: roleId }, { transaction });
+      } else {
+          role = await RolesDBApi.findBy({ name: 'User' }, { transaction });
+      }
+
+      if (!role) {
+          throw new ValidationError('rolesNotFound');
+      }
+
+      try {
+          let customization = {};
+          try {
+              customization = JSON.parse(role.role_customization || '{}');
+          } catch (e) {
+              console.log(e);
+          }
+
+          if (widgetIdIsUUID && Array.isArray(customization[key])) {
+              const el = customization[key].find((e) => e === widgetId);
+              !el ? customization[key].unshift(widgetId) : null;
+          }
+
+          if (widgetIdIsUUID && !customization[key]) {
+              customization[key] = [widgetId];
+          }
+
+          const newRole = await RolesDBApi.update(
+              role.id,
+              {
+                  role_customization: JSON.stringify(customization),
+                  name: role.name,
+                  permissions: role.permissions,
+                  globalAccess: role.globalAccess,
+              },
+              {
+                  currentUser,
+                  transaction,
+              },
+          );
+
+          await transaction.commit();
+
+          return newRole;
+      } catch (error) {
+          await transaction.rollback();
+          throw error;
+      }
+  }
+
+  static async removeRoleInfoById(infoId, roleId, key, currentUser) {
+      const transaction = await db.sequelize.transaction();
+
+      let role;
+      if (roleId) {
+          role = await RolesDBApi.findBy({ id: roleId }, { transaction });
+      } else {
+          role = await RolesDBApi.findBy({ name: 'User' }, { transaction });
+      }
+      if (!role) {
+          await transaction.rollback();
+          throw new ValidationError('rolesNotFound');
+      }
+
+      let customization = {};
+      try {
+          customization = JSON.parse(role.role_customization || '{}');
+      } catch (e) {
+          console.log(e);
+      }
+
+      customization[key] = customization[key].filter(
+          (item) => item !== infoId,
+      );
+
+      const response = await axios.delete(`${config.flHost}/${config.project_uuid}/project_customization_widgets/${infoId}.json`);
+      const { status } = await response;
+      try {
+          const result = await RolesDBApi.update(
+              role.id,
+              {
+                  role_customization: JSON.stringify(customization),
+                  name: role.name,
+                  permissions: role.permissions,
+                  globalAccess: role.globalAccess,
+              },
+              {
+                  currentUser,
+                  transaction,
+              },
+          );
+
+          await transaction.commit();
+          return result;
+      } catch (error) {
+          await transaction.rollback();
+          throw error;
+      }
+  }
+
+  static async getRoleInfoByKey(key, roleId, currentUser) {
+      const transaction = await db.sequelize.transaction();
+
+      const organizationId = currentUser.organizationId;
+      let globalAccess = currentUser.app_role?.globalAccess;
+      let queryString = '';
+
+      
+
+        try {
+            const role = await findRole(roleId, currentUser);
+            const customization = parseCustomization(role);
+
+            let result;
+            if (key === 'widgets') {
+                result = await processWidgets(customization[key], currentUser);
+            } else {
+                result = customization[key];
+            }
+
+            await transaction.commit();
+            return result;
+        } catch (error) {
+            console.error(error);
+            await transaction.rollback();
+        } finally {
+            if (transaction.finished !== 'commit') {
+                await transaction.rollback();
+            }
+        }
+
+      
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/search.js b/backend/src/services/search.js
new file mode 100644
index 0000000..745c43b
--- /dev/null
+++ b/backend/src/services/search.js
@@ -0,0 +1,708 @@
+const db = require('../db/models');
+const ValidationError = require('./notifications/errors/validation');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+/**
+ * @param {string} permission
+ * @param {object} currentUser
+ */
+async function checkPermissions(permission, currentUser) {
+
+  if (!currentUser) {
+    throw new ValidationError('auth.unauthorized');
+  }
+
+  const userPermission = currentUser.custom_permissions.find(
+    (cp) => cp.name === permission,
+  );
+
+  if (userPermission) {
+    return true;
+  }
+
+  try {
+    if (!currentUser.app_role) {
+      throw new ValidationError('auth.forbidden');
+    }
+
+    const permissions = await currentUser.app_role.getPermissions();
+
+    return !!permissions.find((p) => p.name === permission);
+  } catch (e) {
+    throw e;
+  }
+}
+
+module.exports = class SearchService {
+  static async search(searchQuery, currentUser , organizationId, globalAccess) {
+    try {
+      if (!searchQuery) {
+        throw new ValidationError('iam.errors.searchQueryRequired');
+      }
+      const tableColumns = {
+        
+          
+          
+
+          
+            "users": [
+              
+                "firstName",
+              
+                "lastName",
+              
+                "phoneNumber",
+              
+                "email",
+              
+            ],
+          
+        
+          
+          
+          
+          
+
+          
+            "organizations": [
+              
+                "name",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "companies": [
+              
+                "company_name",
+              
+                "legal_name",
+              
+                "tax_number",
+              
+                "website",
+              
+                "phone",
+              
+                "email",
+              
+                "address_line1",
+              
+                "address_line2",
+              
+                "city",
+              
+                "state",
+              
+                "postal_code",
+              
+                "country",
+              
+            ],
+          
+        
+          
+          
+
+          
+        
+          
+          
+
+          
+        
+          
+          
+
+          
+            "vendors": [
+              
+                "vendor_name",
+              
+                "vendor_code",
+              
+                "contact_name",
+              
+                "email",
+              
+                "phone",
+              
+                "address",
+              
+                "payment_terms",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "warehouses": [
+              
+                "warehouse_name",
+              
+                "warehouse_code",
+              
+                "address",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "product_categories": [
+              
+                "category_name",
+              
+                "category_code",
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "products": [
+              
+                "product_name",
+              
+                "sku",
+              
+                "barcode",
+              
+                "uom",
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "purchase_requisitions": [
+              
+                "requisition_number",
+              
+                "reason",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "purchase_requisition_lines": [
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "purchase_orders": [
+              
+                "po_number",
+              
+                "notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "purchase_order_lines": [
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "goods_receipts": [
+              
+                "grn_number",
+              
+                "remarks",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "goods_receipt_lines": [
+              
+                "quality_notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "vendor_invoices": [
+              
+                "invoice_number",
+              
+                "notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "invoice_lines": [
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "payments": [
+              
+                "payment_reference",
+              
+                "notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "departments": [
+              
+                "department_name",
+              
+                "department_code",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "document_types": [
+              
+                "type_name",
+              
+                "type_code",
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "documents": [
+              
+                "document_number",
+              
+                "title",
+              
+                "summary",
+              
+                "tags",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "document_links": [
+              
+                "source_reference",
+              
+                "notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "approval_workflows": [
+              
+                "workflow_name",
+              
+                "description",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "approval_steps": [
+              
+                "step_name",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "approvals": [
+              
+                "entity_reference",
+              
+                "decision_notes",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "activity_logs": [
+              
+                "entity_reference",
+              
+                "message",
+              
+                "ip_address",
+              
+            ],
+          
+        
+          
+          
+
+          
+            "ui_announcements": [
+              
+                "headline",
+              
+                "content",
+              
+            ],
+          
+        
+      };
+      const columnsInt = {
+        
+          
+          
+          
+        
+          
+          
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+            "products": [
+              
+                "standard_cost",
+              
+                "purchase_price",
+              
+                "sales_price",
+              
+            ],
+          
+        
+          
+          
+          
+            "purchase_requisitions": [
+              
+                "estimated_total",
+              
+            ],
+          
+        
+          
+          
+          
+            "purchase_requisition_lines": [
+              
+                "quantity",
+              
+                "unit_price_estimate",
+              
+                "line_total_estimate",
+              
+            ],
+          
+        
+          
+          
+          
+            "purchase_orders": [
+              
+                "subtotal",
+              
+                "tax_total",
+              
+                "discount_total",
+              
+                "grand_total",
+              
+            ],
+          
+        
+          
+          
+          
+            "purchase_order_lines": [
+              
+                "quantity",
+              
+                "unit_price",
+              
+                "tax_rate",
+              
+                "discount_rate",
+              
+                "line_total",
+              
+            ],
+          
+        
+          
+          
+          
+        
+          
+          
+          
+            "goods_receipt_lines": [
+              
+                "quantity_received",
+              
+                "quantity_accepted",
+              
+                "quantity_rejected",
+              
+            ],
+          
+        
+          
+          
+          
+            "vendor_invoices": [
+              
+                "subtotal",
+              
+                "tax_total",
+              
+                "grand_total",
+              
+            ],
+          
+        
+          
+          
+          
+            "invoice_lines": [
+              
+                "quantity",
+              
+                "unit_price",
+              
+                "tax_rate",
+              
+                "line_total",
+              
+            ],
+          
+        
+          
+          
+          
+            "payments": [
+              
+                "amount",
+              
+            ],
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+            "approval_steps": [
+              
+                "step_order",
+              
+                "min_amount",
+              
+                "max_amount",
+              
+            ],
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+          
+          
+          
+        
+      };
+
+      let allFoundRecords = [];
+
+      for (const tableName in tableColumns) {
+        if (tableColumns.hasOwnProperty(tableName)) {
+          const attributesToSearch = tableColumns[tableName];
+          const attributesIntToSearch = columnsInt[tableName] || [];
+          const whereCondition = {
+            [Op.or]: [
+              ...attributesToSearch.map(attribute => ({
+                [attribute]: {
+                  [Op.iLike] : `%${searchQuery}%`,
+                },
+              })),
+              ...attributesIntToSearch.map(attribute => (
+                Sequelize.where(
+                  Sequelize.cast(Sequelize.col(`${tableName}.${attribute}`), 'varchar'),
+                  { [Op.iLike]: `%${searchQuery}%` }
+                )
+              )),
+            ],
+          };
+
+           
+          if (!globalAccess && tableName !== 'organizations' && organizationId) {
+            whereCondition.organizationId = organizationId;
+          }
+          
+
+          const hasPermission = await checkPermissions(`READ_${tableName.toUpperCase()}`, currentUser);
+          if (!hasPermission) {
+            continue;
+          }
+
+          const foundRecords = await db[tableName].findAll({
+            where: whereCondition,
+            attributes: [...tableColumns[tableName], 'id', ...attributesIntToSearch],
+          });
+      
+          const modifiedRecords = foundRecords.map((record) => {
+            const matchAttribute = [];
+ 
+            for (const attribute of attributesToSearch) {
+              if (record[attribute]?.toLowerCase()?.includes(searchQuery.toLowerCase())) {
+                matchAttribute.push(attribute);
+              }
+            }
+
+            for (const attribute of attributesIntToSearch) {
+              const castedValue = String(record[attribute]);
+              if (castedValue && castedValue.toLowerCase().includes(searchQuery.toLowerCase())) {
+                matchAttribute.push(attribute);
+              }
+            }
+      
+            return {
+              ...record.get(),
+              matchAttribute,
+              tableName,
+            };
+          });
+
+          allFoundRecords = allFoundRecords.concat(modifiedRecords);
+        }
+      }
+
+      return allFoundRecords;
+    } catch (error) {
+      throw error;
+    }
+  }
+}
\ No newline at end of file
diff --git a/backend/src/services/ui_announcements.js b/backend/src/services/ui_announcements.js
new file mode 100644
index 0000000..87189f2
--- /dev/null
+++ b/backend/src/services/ui_announcements.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Ui_announcementsDBApi = require('../db/api/ui_announcements');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Ui_announcementsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Ui_announcementsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Ui_announcementsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let ui_announcements = await Ui_announcementsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!ui_announcements) {
+        throw new ValidationError(
+          'ui_announcementsNotFound',
+        );
+      }
+
+      const updatedUi_announcements = await Ui_announcementsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedUi_announcements;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Ui_announcementsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Ui_announcementsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/user_role_assignments.js b/backend/src/services/user_role_assignments.js
new file mode 100644
index 0000000..28e7fac
--- /dev/null
+++ b/backend/src/services/user_role_assignments.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const User_role_assignmentsDBApi = require('../db/api/user_role_assignments');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class User_role_assignmentsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await User_role_assignmentsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await User_role_assignmentsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let user_role_assignments = await User_role_assignmentsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!user_role_assignments) {
+        throw new ValidationError(
+          'user_role_assignmentsNotFound',
+        );
+      }
+
+      const updatedUser_role_assignments = await User_role_assignmentsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedUser_role_assignments;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await User_role_assignmentsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await User_role_assignmentsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/users.js b/backend/src/services/users.js
new file mode 100644
index 0000000..41f8220
--- /dev/null
+++ b/backend/src/services/users.js
@@ -0,0 +1,179 @@
+const db = require('../db/models');
+const UsersDBApi = require('../db/api/users');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+const InvitationEmail = require('./email/list/invitation');
+const EmailSender = require('./email');
+const AuthService = require('./auth');
+
+module.exports = class UsersService {
+  static async create(data, currentUser, sendInvitationEmails = true, host) {
+    let transaction = await db.sequelize.transaction();
+    
+    const globalAccess = currentUser.app_role.globalAccess;
+    
+    let email = data.email;
+    let emailsToInvite = [];
+    try {
+      if (email) {
+        let user = await UsersDBApi.findBy({email}, {transaction});
+        if (user) {
+          throw new ValidationError(
+            'iam.errors.userAlreadyExists',
+          );
+        } else {
+          await UsersDBApi.create(
+            {data},
+            
+            globalAccess,
+            
+            {
+              currentUser,
+              transaction,
+            },
+          );
+          emailsToInvite.push(email);
+        }
+      } else {
+        throw new ValidationError('iam.errors.emailRequired')
+      }
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+    if (emailsToInvite && emailsToInvite.length) {
+      if (!sendInvitationEmails) return;
+
+      AuthService.sendPasswordResetEmail(email, 'invitation', host);
+    }
+  }
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+    let emailsToInvite = [];
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', () => {
+              console.log('results csv', results);
+              resolve();
+          })
+          .on('error', (error) => reject(error));
+      });
+
+      const hasAllEmails = results.every((result) => result.email);
+
+      if (!hasAllEmails) {
+        throw new ValidationError('importer.errors.userEmailMissing');
+      }
+
+      await UsersDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      emailsToInvite = results.map((result) => result.email);
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+
+    if (emailsToInvite && emailsToInvite.length && !sendInvitationEmails) {
+
+      emailsToInvite.forEach((email) => {
+        AuthService.sendPasswordResetEmail(email, 'invitation', host);
+      });
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    
+    const globalAccess = currentUser.app_role.globalAccess;
+    
+    try {
+      let users = await UsersDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!users) {
+        throw new ValidationError(
+          'iam.errors.userNotFound',
+        );
+      }
+
+      const updatedUser = await UsersDBApi.update(
+        id,
+        data,
+
+        globalAccess,
+
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedUser;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      if (currentUser.id === id) {
+        throw new ValidationError(
+          'iam.errors.deletingHimself',
+        );
+      }
+
+      if (currentUser.app_role?.name !== config.roles.admin  && currentUser.app_role?.name !== config.roles.super_admin ) {
+        throw new ValidationError(
+          'errors.forbidden.message',
+        );
+      }
+
+      await UsersDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};
+
+
diff --git a/backend/src/services/vendor_invoices.js b/backend/src/services/vendor_invoices.js
new file mode 100644
index 0000000..27f2c6d
--- /dev/null
+++ b/backend/src/services/vendor_invoices.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const Vendor_invoicesDBApi = require('../db/api/vendor_invoices');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class Vendor_invoicesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await Vendor_invoicesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await Vendor_invoicesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let vendor_invoices = await Vendor_invoicesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!vendor_invoices) {
+        throw new ValidationError(
+          'vendor_invoicesNotFound',
+        );
+      }
+
+      const updatedVendor_invoices = await Vendor_invoicesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedVendor_invoices;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Vendor_invoicesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await Vendor_invoicesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/vendors.js b/backend/src/services/vendors.js
new file mode 100644
index 0000000..ab32e16
--- /dev/null
+++ b/backend/src/services/vendors.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const VendorsDBApi = require('../db/api/vendors');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class VendorsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await VendorsDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await VendorsDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let vendors = await VendorsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!vendors) {
+        throw new ValidationError(
+          'vendorsNotFound',
+        );
+      }
+
+      const updatedVendors = await VendorsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedVendors;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await VendorsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await VendorsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/src/services/warehouses.js b/backend/src/services/warehouses.js
new file mode 100644
index 0000000..c30e2c4
--- /dev/null
+++ b/backend/src/services/warehouses.js
@@ -0,0 +1,138 @@
+const db = require('../db/models');
+const WarehousesDBApi = require('../db/api/warehouses');
+const processFile = require("../middlewares/upload");
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+
+
+
+
+module.exports = class WarehousesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await WarehousesDBApi.create(
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, "utf-8")); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      })
+
+      await WarehousesDBApi.bulkImport(results, {
+          transaction,
+          ignoreDuplicates: true,
+          validate: true,
+          currentUser: req.currentUser
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let warehouses = await WarehousesDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!warehouses) {
+        throw new ValidationError(
+          'warehousesNotFound',
+        );
+      }
+
+      const updatedWarehouses = await WarehousesDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedWarehouses;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await WarehousesDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await WarehousesDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  
+};
+
+
diff --git a/backend/watcher.js b/backend/watcher.js
new file mode 100644
index 0000000..9e5e5bc
--- /dev/null
+++ b/backend/watcher.js
@@ -0,0 +1,49 @@
+const chokidar = require('chokidar');
+const { exec } = require('child_process');
+const nodemon = require('nodemon');
+
+const nodeEnv = process.env.NODE_ENV || 'dev_stage';
+const childEnv = { ...process.env, NODE_ENV: nodeEnv };
+
+const migrationsWatcher = chokidar.watch('./src/db/migrations', {
+    persistent: true,
+    ignoreInitial: true
+});
+migrationsWatcher.on('add', (filePath) => {
+    console.log(`[DEBUG] New migration file: ${filePath}`);
+    exec('npm run db:migrate', { env: childEnv }, (error, stdout, stderr) => {
+        console.log(stdout);
+        if (error) {
+            console.error(stderr);
+        }
+    });
+});
+
+const seedersWatcher = chokidar.watch('./src/db/seeders', {
+    persistent: true,
+    ignoreInitial: true
+});
+seedersWatcher.on('add', (filePath) => {
+    console.log(`[DEBUG] New seed file: ${filePath}`);
+    exec('npm run db:seed', { env: childEnv }, (error, stdout, stderr) => {
+        console.log(stdout);
+        if (error) {
+            console.error(stderr);
+        }
+    });
+});
+
+nodemon({
+    script: './src/index.js',
+    env: childEnv,
+    ignore: ['./src/db/migrations', './src/db/seeders'],
+    delay: '500'
+});
+
+nodemon.on('start', () => {
+    console.log('Nodemon started');
+});
+
+nodemon.on('restart', (files) => {
+    console.log('Nodemon restarted due changes in:', files);
+});
diff --git a/backend/yarn.lock b/backend/yarn.lock
new file mode 100644
index 0000000..222a4f9
--- /dev/null
+++ b/backend/yarn.lock
@@ -0,0 +1,4470 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@apidevtools/json-schema-ref-parser@^9.0.6":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.2.tgz#8ff5386b365d4c9faa7c8b566ff16a46a577d9b8"
+  integrity sha512-r1w81DpR+KyRWd3f+rk6TNqMgedmAxZP5v5KWlXQWlgMUUtyEJch0DKEci1SorPMiSeM8XPl7MZ3miJ60JIpQg==
+  dependencies:
+    "@jsdevtools/ono" "^7.1.3"
+    "@types/json-schema" "^7.0.6"
+    call-me-maybe "^1.0.1"
+    js-yaml "^4.1.0"
+
+"@apidevtools/openapi-schemas@^2.0.4":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@apidevtools/openapi-schemas/-/openapi-schemas-2.1.0.tgz#9fa08017fb59d80538812f03fc7cac5992caaa17"
+  integrity sha512-Zc1AlqrJlX3SlpupFGpiLi2EbteyP7fXmUOGup6/DnkRgjP9bgMM/ag+n91rsv0U1Gpz0H3VILA/o3bW7Ua6BQ==
+
+"@apidevtools/swagger-methods@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@apidevtools/swagger-methods/-/swagger-methods-3.0.2.tgz#b789a362e055b0340d04712eafe7027ddc1ac267"
+  integrity sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg==
+
+"@apidevtools/swagger-parser@10.0.3":
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/@apidevtools/swagger-parser/-/swagger-parser-10.0.3.tgz#32057ae99487872c4dd96b314a1ab4b95d89eaf5"
+  integrity sha512-sNiLY51vZOmSPFZA5TF35KZ2HbgYklQnTSDnkghamzLb3EkNtcQnrBQEj5AOCxHpTtXpqMCRM1CrmV2rG6nw4g==
+  dependencies:
+    "@apidevtools/json-schema-ref-parser" "^9.0.6"
+    "@apidevtools/openapi-schemas" "^2.0.4"
+    "@apidevtools/swagger-methods" "^3.0.2"
+    "@jsdevtools/ono" "^7.1.3"
+    call-me-maybe "^1.0.1"
+    z-schema "^5.0.1"
+
+"@azure/abort-controller@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.1.0.tgz#788ee78457a55af8a1ad342acb182383d2119249"
+  integrity sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==
+  dependencies:
+    tslib "^2.2.0"
+
+"@azure/abort-controller@^2.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-2.1.2.tgz#42fe0ccab23841d9905812c58f1082d27784566d"
+  integrity sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==
+  dependencies:
+    tslib "^2.6.2"
+
+"@azure/core-auth@^1.3.0", "@azure/core-auth@^1.4.0", "@azure/core-auth@^1.5.0":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-auth/-/core-auth-1.7.2.tgz#558b7cb7dd12b00beec07ae5df5907d74df1ebd9"
+  integrity sha512-Igm/S3fDYmnMq1uKS38Ae1/m37B3zigdlZw+kocwEhh5GjyKjPrXKO2J6rzpC1wAxrNil/jX9BJRqBshyjnF3g==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    "@azure/core-util" "^1.1.0"
+    tslib "^2.6.2"
+
+"@azure/core-client@^1.3.0", "@azure/core-client@^1.5.0", "@azure/core-client@^1.9.2":
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-client/-/core-client-1.9.2.tgz#6fc69cee2816883ab6c5cdd653ee4f2ff9774f74"
+  integrity sha512-kRdry/rav3fUKHl/aDLd/pDLcB+4pOFwPPTVEExuMyaI5r+JBbMWqRbCY1pn5BniDaU3lRxO9eaQ1AmSMehl/w==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    "@azure/core-auth" "^1.4.0"
+    "@azure/core-rest-pipeline" "^1.9.1"
+    "@azure/core-tracing" "^1.0.0"
+    "@azure/core-util" "^1.6.1"
+    "@azure/logger" "^1.0.0"
+    tslib "^2.6.2"
+
+"@azure/core-http-compat@^2.0.1":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-http-compat/-/core-http-compat-2.1.2.tgz#d1585ada24ba750dc161d816169b33b35f762f0d"
+  integrity sha512-5MnV1yqzZwgNLLjlizsU3QqOeQChkIXw781Fwh1xdAqJR5AA32IUaq6xv1BICJvfbHoa+JYcaij2HFkhLbNTJQ==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    "@azure/core-client" "^1.3.0"
+    "@azure/core-rest-pipeline" "^1.3.0"
+
+"@azure/core-lro@^2.2.0":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-lro/-/core-lro-2.7.2.tgz#787105027a20e45c77651a98b01a4d3b01b75a08"
+  integrity sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    "@azure/core-util" "^1.2.0"
+    "@azure/logger" "^1.0.0"
+    tslib "^2.6.2"
+
+"@azure/core-paging@^1.1.1":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-paging/-/core-paging-1.6.2.tgz#40d3860dc2df7f291d66350b2cfd9171526433e7"
+  integrity sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==
+  dependencies:
+    tslib "^2.6.2"
+
+"@azure/core-rest-pipeline@^1.1.0", "@azure/core-rest-pipeline@^1.3.0", "@azure/core-rest-pipeline@^1.8.1", "@azure/core-rest-pipeline@^1.9.1":
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.2.tgz#3f71b09e45a65926cc598478b4f1bcd0fe67bf4b"
+  integrity sha512-Hnhm/PG9/SQ07JJyLDv3l9Qr8V3xgAe1hFoBYzt6LaalMxfL/ZqFaZf/bz5VN3pMcleCPwl8ivlS2Fjxq/iC8Q==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    "@azure/core-auth" "^1.4.0"
+    "@azure/core-tracing" "^1.0.1"
+    "@azure/core-util" "^1.9.0"
+    "@azure/logger" "^1.0.0"
+    http-proxy-agent "^7.0.0"
+    https-proxy-agent "^7.0.0"
+    tslib "^2.6.2"
+
+"@azure/core-tracing@^1.0.0", "@azure/core-tracing@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-tracing/-/core-tracing-1.1.2.tgz#065dab4e093fb61899988a1cdbc827d9ad90b4ee"
+  integrity sha512-dawW9ifvWAWmUm9/h+/UQ2jrdvjCJ7VJEuCJ6XVNudzcOwm53BFZH4Q845vjfgoUAM8ZxokvVNxNxAITc502YA==
+  dependencies:
+    tslib "^2.6.2"
+
+"@azure/core-util@^1.0.0", "@azure/core-util@^1.1.0", "@azure/core-util@^1.2.0", "@azure/core-util@^1.3.0", "@azure/core-util@^1.6.1", "@azure/core-util@^1.9.0":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.9.1.tgz#05ea9505c5cdf29c55ccf99a648c66ddd678590b"
+  integrity sha512-OLsq0etbHO1MA7j6FouXFghuHrAFGk+5C1imcpQ2e+0oZhYF07WLA+NW2Vqs70R7d+zOAWiWM3tbE1sXcDN66g==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    tslib "^2.6.2"
+
+"@azure/identity@^4.2.1":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@azure/identity/-/identity-4.4.0.tgz#f2743e63d346000a70b0eed5a3b397dedd3984a7"
+  integrity sha512-oG6oFNMxUuoivYg/ElyZWVSZfw42JQyHbrp+lR7VJ1BYWsGzt34NwyDw3miPp1QI7Qm5+4KAd76wGsbHQmkpkg==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    "@azure/core-auth" "^1.5.0"
+    "@azure/core-client" "^1.9.2"
+    "@azure/core-rest-pipeline" "^1.1.0"
+    "@azure/core-tracing" "^1.0.0"
+    "@azure/core-util" "^1.3.0"
+    "@azure/logger" "^1.0.0"
+    "@azure/msal-browser" "^3.14.0"
+    "@azure/msal-node" "^2.9.2"
+    events "^3.0.0"
+    jws "^4.0.0"
+    open "^8.0.0"
+    stoppable "^1.1.0"
+    tslib "^2.2.0"
+
+"@azure/keyvault-keys@^4.4.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@azure/keyvault-keys/-/keyvault-keys-4.8.0.tgz#1513b3a187bb3a9a372b5980c593962fb793b2ad"
+  integrity sha512-jkuYxgkw0aaRfk40OQhFqDIupqblIOIlYESWB6DKCVDxQet1pyv86Tfk9M+5uFM0+mCs6+MUHU+Hxh3joiUn4Q==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    "@azure/core-auth" "^1.3.0"
+    "@azure/core-client" "^1.5.0"
+    "@azure/core-http-compat" "^2.0.1"
+    "@azure/core-lro" "^2.2.0"
+    "@azure/core-paging" "^1.1.1"
+    "@azure/core-rest-pipeline" "^1.8.1"
+    "@azure/core-tracing" "^1.0.0"
+    "@azure/core-util" "^1.0.0"
+    "@azure/logger" "^1.0.0"
+    tslib "^2.2.0"
+
+"@azure/logger@^1.0.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@azure/logger/-/logger-1.1.3.tgz#09a8fd4850b9112865756e92d5e8b728ee457345"
+  integrity sha512-J8/cIKNQB1Fc9fuYqBVnrppiUtW+5WWJPCj/tAokC5LdSTwkWWttN+jsRgw9BLYD7JDBx7PceiqOBxJJ1tQz3Q==
+  dependencies:
+    tslib "^2.6.2"
+
+"@azure/msal-browser@^3.14.0":
+  version "3.19.1"
+  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.19.1.tgz#c5e5a7996f95cadc11920bffa2bf6321e3a24555"
+  integrity sha512-pqYP2gK0GCEa4OxtOqlS+EdFQqhXV6ZuESgSTYWq2ABXyxBVVdd5KNuqgR5SU0OwI2V1YWdFVvLDe1487dyQ0g==
+  dependencies:
+    "@azure/msal-common" "14.13.1"
+
+"@azure/msal-common@14.13.1":
+  version "14.13.1"
+  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-14.13.1.tgz#e296cf8cc556082af9c35d803496424e8a95d8b7"
+  integrity sha512-iUp3BYrsRZ4X3EiaZ2fDjNFjmtYMv9rEQd6c1op6ULn0HWk4ACvDmosL6NaBgWOhl1BAblIbd9vmB5/ilF8d4A==
+
+"@azure/msal-node@^2.9.2":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@azure/msal-node/-/msal-node-2.11.1.tgz#7fea67a1c6904301eb8853fae7df86c34306a9cc"
+  integrity sha512-8ECtug4RL+zsgh20VL8KYHjrRO3MJOeAKEPRXT2lwtiu5U3BdyIdBb50+QZthEkIi60K6pc/pdOx/k5Jp4sLng==
+  dependencies:
+    "@azure/msal-common" "14.13.1"
+    jsonwebtoken "^9.0.0"
+    uuid "^8.3.0"
+
+"@google-cloud/paginator@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@google-cloud/paginator/-/paginator-3.0.7.tgz#fb6f8e24ec841f99defaebf62c75c2e744dd419b"
+  integrity sha512-jJNutk0arIQhmpUUQJPJErsojqo834KcyB6X7a1mxuic8i1tKXxde8E69IZxNZawRIlZdIK2QY4WALvlK5MzYQ==
+  dependencies:
+    arrify "^2.0.0"
+    extend "^3.0.2"
+
+"@google-cloud/projectify@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@google-cloud/projectify/-/projectify-2.1.1.tgz#ae6af4fee02d78d044ae434699a630f8df0084ef"
+  integrity sha512-+rssMZHnlh0twl122gXY4/aCrk0G1acBqkHFfYddtsqpYXGxA29nj9V5V9SfC+GyOG00l650f6lG9KL+EpFEWQ==
+
+"@google-cloud/promisify@^2.0.0":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@google-cloud/promisify/-/promisify-2.0.4.tgz#9d8705ecb2baa41b6b2673f3a8e9b7b7e1abc52a"
+  integrity sha512-j8yRSSqswWi1QqUGKVEKOG03Q7qOoZP6/h2zN2YO+F5h2+DHU0bSrHCK9Y7lo2DI9fBd8qGAw795sf+3Jva4yA==
+
+"@google-cloud/storage@^5.18.2":
+  version "5.20.5"
+  resolved "https://registry.yarnpkg.com/@google-cloud/storage/-/storage-5.20.5.tgz#1de71fc88d37934a886bc815722c134b162d335d"
+  integrity sha512-lOs/dCyveVF8TkVFnFSF7IGd0CJrTm91qiK6JLu+Z8qiT+7Ag0RyVhxZIWkhiACqwABo7kSHDm8FdH8p2wxSSw==
+  dependencies:
+    "@google-cloud/paginator" "^3.0.7"
+    "@google-cloud/projectify" "^2.0.0"
+    "@google-cloud/promisify" "^2.0.0"
+    abort-controller "^3.0.0"
+    arrify "^2.0.0"
+    async-retry "^1.3.3"
+    compressible "^2.0.12"
+    configstore "^5.0.0"
+    duplexify "^4.0.0"
+    ent "^2.2.0"
+    extend "^3.0.2"
+    gaxios "^4.0.0"
+    google-auth-library "^7.14.1"
+    hash-stream-validation "^0.2.2"
+    mime "^3.0.0"
+    mime-types "^2.0.8"
+    p-limit "^3.0.1"
+    pumpify "^2.0.0"
+    retry-request "^4.2.2"
+    stream-events "^1.0.4"
+    teeny-request "^7.1.3"
+    uuid "^8.0.0"
+    xdg-basedir "^4.0.0"
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@js-joda/core@^5.6.1":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-5.6.3.tgz#41ae1c07de1ebe0f6dde1abcbc9700a09b9c6056"
+  integrity sha512-T1rRxzdqkEXcou0ZprN1q9yDRlvzCPLqmlNt5IIsGBzoEVgLCCYrKEwc84+TvsXuAc95VAZwtWD2zVsKPY4bcA==
+
+"@jsdevtools/ono@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
+  integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
+
+"@mapbox/node-pre-gyp@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa"
+  integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==
+  dependencies:
+    detect-libc "^2.0.0"
+    https-proxy-agent "^5.0.0"
+    make-dir "^3.1.0"
+    node-fetch "^2.6.7"
+    nopt "^5.0.0"
+    npmlog "^5.0.1"
+    rimraf "^3.0.2"
+    semver "^7.3.5"
+    tar "^6.1.11"
+
+"@one-ini/wasm@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@one-ini/wasm/-/wasm-0.1.1.tgz#6013659736c9dbfccc96e8a9c2b3de317df39323"
+  integrity sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@sindresorhus/is@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
+  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+
+"@szmarczak/http-timer@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
+  integrity sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==
+  dependencies:
+    defer-to-connect "^1.0.1"
+
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
+"@types/debug@^4.1.8":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
+  integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/json-schema@^7.0.6":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/ms@*":
+  version "0.7.34"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
+  integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
+
+"@types/node@*", "@types/node@>=18":
+  version "20.14.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.11.tgz#09b300423343460455043ddd4d0ded6ac579b74b"
+  integrity sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@types/readable-stream@^4.0.0":
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-4.0.15.tgz#e6ec26fe5b02f578c60baf1fa9452e90957d2bfb"
+  integrity sha512-oAZ3kw+kJFkEqyh7xORZOku1YAKvsFTogRY8kVl4vHpEKiDkfnSA/My8haRE7fvmix5Zyy+1pwzOi7yycGLBJw==
+  dependencies:
+    "@types/node" "*"
+    safe-buffer "~5.1.1"
+
+"@types/validator@^13.7.17":
+  version "13.12.0"
+  resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.12.0.tgz#1fe4c3ae9de5cf5193ce64717c99ef2fa7d8756f"
+  integrity sha512-nH45Lk7oPIJ1RVOF6JgFI6Dy0QpHEzq4QecZhvguxYPDwT8c93prCMqAtiIttm39voZ+DDR+qkNnMpJmMBRqag==
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+abbrev@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
+  integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==
+
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
+accepts@^1.3.7, accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+agent-base@^7.0.2, agent-base@^7.1.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
+  dependencies:
+    debug "^4.3.4"
+
+ansi-align@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
+
+ansi-colors@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
+ansi-regex@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
+  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
+
+ansi-regex@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
+  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+ansi-styles@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+anymatch@~3.1.1, anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+append-field@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/append-field/-/append-field-1.0.0.tgz#1e3440e915f0b1203d23748e78edd7b9b5b43e56"
+  integrity sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==
+
+"aproba@^1.0.3 || ^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
+  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
+
+are-we-there-yet@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
+  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^3.6.0"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+array.prototype.map@^1.0.1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.7.tgz#82fa4d6027272d1fca28a63bbda424d0185d78a7"
+  integrity sha512-XpcFfLoBEAhezrrNw1V+yLXkE7M6uR7xJEsxbG6c/V9v043qurwVJB9r9UTnoSioFDoz1i1VOydpWGmJpfVZbg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-array-method-boxes-properly "^1.0.0"
+    es-object-atoms "^1.0.0"
+    is-string "^1.0.7"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+arrify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
+async-retry@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.3.3.tgz#0e7f36c04d8478e7a58bdbed80cedf977785f280"
+  integrity sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==
+  dependencies:
+    retry "0.13.1"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axios@^1.6.7:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.3.0, base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+base64url@3.x.x:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
+  integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
+
+bcrypt@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/bcrypt/-/bcrypt-5.1.1.tgz#0f732c6dcb4e12e5b70a25e326a72965879ba6e2"
+  integrity sha512-AGBHOG5hPYZ5Xl9KXzU5iKq9516yEmvCKDg3ecP5kX2aB6UqTeXZxk2ELnDgDm6BQSMlLt9rDB4LoSMx0rYwww==
+  dependencies:
+    "@mapbox/node-pre-gyp" "^1.0.11"
+    node-addon-api "^5.0.0"
+
+bignumber.js@^9.0.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bl@^6.0.11:
+  version "6.0.14"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-6.0.14.tgz#b9ae9862118a3d2ebec999c5318466012314f96c"
+  integrity sha512-TJfbvGdL7KFGxTsEbsED7avqpFdY56q9IW0/aiytyheJzxST/+Io6cx/4Qx0K2/u0BPRDs65mjaQzYvMZeNocQ==
+  dependencies:
+    "@types/readable-stream" "^4.0.0"
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^4.2.0"
+
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+body-parser@1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
+  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.1"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+boxen@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
+  integrity sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^5.3.1"
+    chalk "^3.0.0"
+    cli-boxes "^2.2.0"
+    string-width "^4.1.0"
+    term-size "^2.1.0"
+    type-fest "^0.8.1"
+    widest-line "^3.1.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browser-stdout@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
+  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
+
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+buffer-writer@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-writer/-/buffer-writer-2.0.0.tgz#ce7eb81a38f7829db09c873f2fbb792c0c98ec04"
+  integrity sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw==
+
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
+busboy@^0.2.11:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.2.14.tgz#6c2a622efcf47c57bbbe1e2a9c37ad36c7925453"
+  integrity sha512-InWFDomvlkEj+xWLBfU3AvnbVYqeTWmQopiW0tWWEy5yehYm2YkGEc59sUmw/4ty5Zj/b0WHGs1LgecuBSBGrg==
+  dependencies:
+    dicer "0.2.5"
+    readable-stream "1.1.x"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+cacheable-request@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
+  integrity sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==
+  dependencies:
+    clone-response "^1.0.2"
+    get-stream "^5.1.0"
+    http-cache-semantics "^4.0.0"
+    keyv "^3.0.0"
+    lowercase-keys "^2.0.0"
+    normalize-url "^4.1.0"
+    responselike "^1.0.2"
+
+call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+call-me-maybe@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.2.tgz#03f964f19522ba643b1b0693acb9152fe2074baa"
+  integrity sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==
+
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
+  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+chokidar@^3.2.2:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+cli-boxes@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+cli-color@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-2.0.4.tgz#d658080290968816b322248b7306fad2346fb2c8"
+  integrity sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==
+  dependencies:
+    d "^1.0.1"
+    es5-ext "^0.10.64"
+    es6-iterator "^2.0.3"
+    memoizee "^0.4.15"
+    timers-ext "^0.1.7"
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+clone-response@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.3.tgz#af2032aa47816399cf5f0a1d0db902f517abb8c3"
+  integrity sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==
+  dependencies:
+    mimic-response "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-support@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
+  integrity sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q==
+
+commander@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
+compressible@^2.0.12:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+concat-stream@^1.5.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+config-chain@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
+  integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
+configstore@^5.0.0, configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+  dependencies:
+    dot-prop "^5.2.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cors@2.8.5:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
+cross-env@7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+crypto-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+csv-parser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-3.0.0.tgz#b88a6256d79e090a97a1b56451f9327b01d710e7"
+  integrity sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==
+  dependencies:
+    minimist "^1.2.0"
+
+d@1, d@^1.0.1, d@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.2.tgz#2aefd554b81981e7dccf72d6842ae725cb17e5de"
+  integrity sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==
+  dependencies:
+    es5-ext "^0.10.64"
+    type "^2.7.2"
+
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@4, debug@^4.1.1, debug@^4.3.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
+  integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
+  dependencies:
+    ms "2.1.2"
+
+debug@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
+decompress-response@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  integrity sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==
+  dependencies:
+    mimic-response "^1.0.0"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
+defer-to-connect@^1.0.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
+  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
+
+denque@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf"
+  integrity sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-libc@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
+dicer@0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.2.5.tgz#5996c086bb33218c812c090bddc09cd12facb70f"
+  integrity sha512-FDvbtnq7dzlPz0wyYlOExifDEZcu8h+rErEXgfxqmLfRfC/kJidEFh4+effJRO3P0xmfqyPbSMG0LveNRfTKVg==
+  dependencies:
+    readable-stream "1.1.x"
+    streamsearch "0.1.2"
+
+diff@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+doctrine@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
+dottie@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/dottie/-/dottie-2.0.6.tgz#34564ebfc6ec5e5772272d466424ad5b696484d4"
+  integrity sha512-iGCHkfUc5kFekGiqhe8B/mdaurD+lakO9txNnTvKtA6PISrw86LgqHvRzWYPyoE2Ph5aMIrCw9/uko6XHTKCwA==
+
+duplexer3@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
+  integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
+
+duplexify@^4.0.0, duplexify@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.3.tgz#a07e1c0d0a2c001158563d32592ba58bddb0236f"
+  integrity sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==
+  dependencies:
+    end-of-stream "^1.4.1"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+    stream-shift "^1.0.2"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ecdsa-sig-formatter@1.0.11, ecdsa-sig-formatter@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+editorconfig@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-1.0.4.tgz#040c9a8e9a6c5288388b87c2db07028aa89f53a3"
+  integrity sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==
+  dependencies:
+    "@one-ini/wasm" "0.1.1"
+    commander "^10.0.0"
+    minimatch "9.0.1"
+    semver "^7.5.3"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+ent@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.1.tgz#68dc99a002f115792c26239baedaaea9e70c0ca2"
+  integrity sha512-QHuXVeZx9d+tIQAz/XztU0ZwZf2Agg9CcXcgE1rurqvdBeDBrpSwjl8/6XUqMg7tw2Y7uAdKb2sRv+bSEFqQ5A==
+  dependencies:
+    punycode "^1.4.1"
+
+es-abstract@^1.17.0-next.1, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-get-iterator@^1.0.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
+    is-string "^1.0.7"
+    isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.62, es5-ext@^0.10.64, es5-ext@~0.10.14, es5-ext@~0.10.2:
+  version "0.10.64"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.64.tgz#12e4ffb48f1ba2ea777f1fcdd1918ef73ea21714"
+  integrity sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    esniff "^2.0.1"
+    next-tick "^1.1.0"
+
+es6-iterator@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3.1.1, es6-symbol@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.4.tgz#f4e7d28013770b4208ecbf3e0bf14d3bcb557b8c"
+  integrity sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==
+  dependencies:
+    d "^1.0.2"
+    ext "^1.7.0"
+
+es6-weak-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
+  integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.46"
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.1"
+
+escalade@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+escape-string-regexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+esniff@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/esniff/-/esniff-2.0.1.tgz#a4d4b43a5c71c7ec51c51098c1d8a29081f9b308"
+  integrity sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==
+  dependencies:
+    d "^1.0.1"
+    es5-ext "^0.10.62"
+    event-emitter "^0.3.5"
+    type "^2.7.2"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+event-emitter@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
+events@^3.0.0, events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+express@4.18.2:
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
+  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.1"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.5.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.2.0"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.11.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+  integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
+  dependencies:
+    type "^2.7.2"
+
+extend@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+fast-text-encoding@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.6.tgz#0aa25f7f638222e3396d72bf936afcf1d42d6867"
+  integrity sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+find-up@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+flat@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.1.tgz#a392059cc382881ff98642f5da4dde0a959f309b"
+  integrity sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==
+  dependencies:
+    is-buffer "~2.0.3"
+
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+foreground-child@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.2.1.tgz#767004ccf3a5b30df39bed90718bab43fe0a59f7"
+  integrity sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+formidable@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
+  integrity sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@0.5.2, fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+fs-extra@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gauge@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
+  integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
+  dependencies:
+    aproba "^1.0.3 || ^2.0.0"
+    color-support "^1.1.2"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.1"
+    object-assign "^4.1.1"
+    signal-exit "^3.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+    wide-align "^1.1.2"
+
+gaxios@^4.0.0:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-4.3.3.tgz#d44bdefe52d34b6435cc41214fdb160b64abfc22"
+  integrity sha512-gSaYYIO1Y3wUtdfHmjDUZ8LWaxJQpiavzbF5Kq53akSzvmVg0RfyOcFDbO1KJ/KCGRFz2qG+lS81F0nkr7cRJA==
+  dependencies:
+    abort-controller "^3.0.0"
+    extend "^3.0.2"
+    https-proxy-agent "^5.0.0"
+    is-stream "^2.0.0"
+    node-fetch "^2.6.7"
+
+gcp-metadata@^4.2.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-4.3.1.tgz#fb205fe6a90fef2fd9c85e6ba06e5559ee1eefa9"
+  integrity sha512-x850LS5N7V1F3UcV7PoupzGsyD6iVwTVvsh3tbXfkctZnBnjW5yu5z1/3k3SehF7TyoTIe78rJs02GMMy+LF+A==
+  dependencies:
+    gaxios "^4.0.0"
+    json-bigint "^1.0.0"
+
+generate-function@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.3.1.tgz#f069617690c10c868e73b8465746764f97c3479f"
+  integrity sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==
+  dependencies:
+    is-property "^1.0.2"
+
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-stream@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
+glob-parent@~5.1.0, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^10.3.3:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-dirs@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
+  integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
+  dependencies:
+    ini "1.3.7"
+
+globalthis@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+google-auth-library@^7.14.1:
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-7.14.1.tgz#e3483034162f24cc71b95c8a55a210008826213c"
+  integrity sha512-5Rk7iLNDFhFeBYc3s8l1CqzbEBcdhwR193RlD4vSNFajIcINKI8W8P0JLmBpwymHqqWbX34pJDQu39cSy/6RsA==
+  dependencies:
+    arrify "^2.0.0"
+    base64-js "^1.3.0"
+    ecdsa-sig-formatter "^1.0.11"
+    fast-text-encoding "^1.0.0"
+    gaxios "^4.0.0"
+    gcp-metadata "^4.2.0"
+    gtoken "^5.0.4"
+    jws "^4.0.0"
+    lru-cache "^6.0.0"
+
+google-p12-pem@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/google-p12-pem/-/google-p12-pem-3.1.4.tgz#123f7b40da204de4ed1fbf2fd5be12c047fc8b3b"
+  integrity sha512-HHuHmkLgwjdmVRngf5+gSmpkyaRI6QmOg77J8tkNBHhNEI62sGHyw4/+UkgyZEI7h84NbWprXDJ+sa3xOYFvTg==
+  dependencies:
+    node-forge "^1.3.1"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+got@^9.6.0:
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
+  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
+  dependencies:
+    "@sindresorhus/is" "^0.14.0"
+    "@szmarczak/http-timer" "^1.1.2"
+    cacheable-request "^6.0.0"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^4.1.0"
+    lowercase-keys "^1.0.1"
+    mimic-response "^1.0.1"
+    p-cancelable "^1.0.0"
+    to-readable-stream "^1.0.0"
+    url-parse-lax "^3.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+growl@1.10.5:
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
+  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
+
+gtoken@^5.0.4:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-5.3.2.tgz#deb7dc876abe002178e0515e383382ea9446d58f"
+  integrity sha512-gkvEKREW7dXWF8NV8pVrKfW7WqReAmjjkMBh6lNCCGOM4ucS0r0YyXXl0r/9Yj8wcW/32ISkfc8h5mPTDbtifQ==
+  dependencies:
+    gaxios "^4.0.0"
+    google-p12-pem "^3.1.3"
+    jws "^4.0.0"
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.0, has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+has-unicode@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
+
+has-yarn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
+  integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
+
+hash-stream-validation@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/hash-stream-validation/-/hash-stream-validation-0.2.4.tgz#ee68b41bf822f7f44db1142ec28ba9ee7ccb7512"
+  integrity sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==
+
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+helmet@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/helmet/-/helmet-4.1.1.tgz#751f0e273d809ace9c172073e0003bed27d27a4a"
+  integrity sha512-Avg4XxSBrehD94mkRwEljnO+6RZx7AGfk8Wa6K1nxaU+hbXlFOhlOIMgPfFqOYQB/dBCsTpootTGuiOG+CHiQA==
+
+http-cache-semantics@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
+  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
+http-proxy-agent@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
+  dependencies:
+    agent-base "^7.1.0"
+    debug "^4.3.4"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^7.0.0:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflection@^1.13.4:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.13.4.tgz#65aa696c4e2da6225b148d7a154c449366633a32"
+  integrity sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+internal-slot@^1.0.4, internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-arguments@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-buffer@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-core-module@^2.13.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.0.tgz#71c72ec5442ace7e76b306e9d48db361f22699ea"
+  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-installed-globally@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
+  dependencies:
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"
+
+is-map@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-npm@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
+  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-inside@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
+is-promise@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
+
+is-property@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+  integrity sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-set@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
+is-typedarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+is-yarn-global@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
+  integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+iterate-iterator@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.2.tgz#551b804c9eaa15b847ea6a7cdc2f5bf1ec150f91"
+  integrity sha512-t91HubM4ZDQ70M9wqp+pcNpu8OyJ9UAtXntT/Bcsvp5tZMnz9vRa+IunKXeI8AnfZMTv0jNuVEmGeLSMjVvfPw==
+
+iterate-value@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
+  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
+  dependencies:
+    es-get-iterator "^1.0.2"
+    iterate-iterator "^1.0.1"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+js-beautify@^1.14.5:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.15.1.tgz#4695afb508c324e1084ee0b952a102023fc65b64"
+  integrity sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==
+  dependencies:
+    config-chain "^1.1.13"
+    editorconfig "^1.0.4"
+    glob "^10.3.3"
+    js-cookie "^3.0.5"
+    nopt "^7.2.0"
+
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
+js-md4@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/js-md4/-/js-md4-0.3.2.tgz#cd3b3dc045b0c404556c81ddb5756c23e59d7cf5"
+  integrity sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==
+
+js-yaml@3.14.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-bigint/-/json-bigint-1.0.0.tgz#ae547823ac0cad8398667f8cd9ef4730f5b01ff1"
+  integrity sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==
+  dependencies:
+    bignumber.js "^9.0.0"
+
+json-buffer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
+  integrity sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==
+
+json2csv@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/json2csv/-/json2csv-5.0.7.tgz#f3a583c25abd9804be873e495d1e65ad8d1b54ae"
+  integrity sha512-YRZbUnyaJZLZUJSRi2G/MqahCyRv9n/ds+4oIetjDF3jWQA7AG7iSeKTiZiCNqtMZM7HDyt0e/W6lEnoGEmMGA==
+  dependencies:
+    commander "^6.1.0"
+    jsonparse "^1.3.1"
+    lodash.get "^4.4.2"
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonparse@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
+
+jsonwebtoken@8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
+  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^5.6.0"
+
+jsonwebtoken@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz#65ff91f4abef1784697d40952bb1998c504caaf3"
+  integrity sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^7.5.4"
+
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jwa@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-2.0.0.tgz#a7e9c3f29dae94027ebcaf49975c9345593410fc"
+  integrity sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
+jws@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-4.0.0.tgz#2d4e8cf6a318ffaa12615e9dec7e86e6c97310f4"
+  integrity sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==
+  dependencies:
+    jwa "^2.0.0"
+    safe-buffer "^5.0.1"
+
+keyv@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
+  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
+  dependencies:
+    json-buffer "3.0.0"
+
+latest-version@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
+  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+  dependencies:
+    package-json "^6.3.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
+
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
+
+lodash.mergewith@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
+
+lodash@4.17.21, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-symbols@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
+  dependencies:
+    chalk "^4.0.0"
+
+long@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
+  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
+
+lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
+lowercase-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
+  integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+lru-cache@^7.14.1:
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
+  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+
+lru-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
+  integrity sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==
+  dependencies:
+    es5-ext "~0.10.2"
+
+make-dir@^3.0.0, make-dir@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+memoizee@^0.4.15:
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.17.tgz#942a5f8acee281fa6fb9c620bddc57e3b7382949"
+  integrity sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==
+  dependencies:
+    d "^1.0.2"
+    es5-ext "^0.10.64"
+    es6-weak-map "^2.0.3"
+    event-emitter "^0.3.5"
+    is-promise "^2.2.2"
+    lru-queue "^0.1.0"
+    next-tick "^1.1.0"
+    timers-ext "^0.1.7"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+
+merge-descriptors@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+methods@^1.1.2, methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+"mime-db@>= 1.43.0 < 2":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
+  integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
+
+mime-types@^2.0.8, mime-types@^2.1.12, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime@1.6.0, mime@^1.3.4:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
+mimic-response@^1.0.0, mimic-response@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
+  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
+
+minimatch@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^3.0.4, minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+minipass@^3.0.0:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
+  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
+  dependencies:
+    yallist "^4.0.0"
+
+minipass@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
+  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
+mkdirp@^0.5.4:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
+mocha@8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.1.3.tgz#5e93f873e35dfdd69617ea75f9c68c2ca61c2ac5"
+  integrity sha512-ZbaYib4hT4PpF4bdSO2DohooKXIn4lDeiYqB+vTmCdr6l2woW0b6H3pf5x4sM5nwQMru9RvjjHYWVGltR50ZBw==
+  dependencies:
+    ansi-colors "4.1.1"
+    browser-stdout "1.3.1"
+    chokidar "3.4.2"
+    debug "4.1.1"
+    diff "4.0.2"
+    escape-string-regexp "4.0.0"
+    find-up "5.0.0"
+    glob "7.1.6"
+    growl "1.10.5"
+    he "1.2.0"
+    js-yaml "3.14.0"
+    log-symbols "4.0.0"
+    minimatch "3.0.4"
+    ms "2.1.2"
+    object.assign "4.1.0"
+    promise.allsettled "1.0.2"
+    serialize-javascript "4.0.0"
+    strip-json-comments "3.0.1"
+    supports-color "7.1.0"
+    which "2.0.2"
+    wide-align "1.1.3"
+    workerpool "6.0.0"
+    yargs "13.3.2"
+    yargs-parser "13.1.2"
+    yargs-unparser "1.6.1"
+
+moment-timezone@^0.5.43:
+  version "0.5.45"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.45.tgz#cb685acd56bac10e69d93c536366eb65aa6bcf5c"
+  integrity sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==
+  dependencies:
+    moment "^2.29.4"
+
+moment@2.30.1, moment@^2.29.4:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multer@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/multer/-/multer-1.4.4.tgz#e2bc6cac0df57a8832b858d7418ccaa8ebaf7d8c"
+  integrity sha512-2wY2+xD4udX612aMqMcB8Ws2Voq6NIUPEtD1be6m411T4uDH/VtL9i//xvcyFlTVfRdaBsk7hV5tgrGQqhuBiw==
+  dependencies:
+    append-field "^1.0.0"
+    busboy "^0.2.11"
+    concat-stream "^1.5.2"
+    mkdirp "^0.5.4"
+    object-assign "^4.1.1"
+    on-finished "^2.3.0"
+    type-is "^1.6.4"
+    xtend "^4.0.0"
+
+mysql2@2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/mysql2/-/mysql2-2.2.5.tgz#72624ffb4816f80f96b9c97fedd8c00935f9f340"
+  integrity sha512-XRqPNxcZTpmFdXbJqb+/CtYVLCx14x1RTeNMD4954L331APu75IC74GDqnZMEt1kwaXy6TySo55rF2F3YJS78g==
+  dependencies:
+    denque "^1.4.1"
+    generate-function "^2.3.1"
+    iconv-lite "^0.6.2"
+    long "^4.0.0"
+    lru-cache "^6.0.0"
+    named-placeholders "^1.1.2"
+    seq-queue "^0.0.5"
+    sqlstring "^2.3.2"
+
+named-placeholders@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/named-placeholders/-/named-placeholders-1.1.3.tgz#df595799a36654da55dda6152ba7a137ad1d9351"
+  integrity sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==
+  dependencies:
+    lru-cache "^7.14.1"
+
+native-duplexpair@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/native-duplexpair/-/native-duplexpair-1.0.0.tgz#7899078e64bf3c8a3d732601b3d40ff05db58fa0"
+  integrity sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+next-tick@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
+node-addon-api@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.1.0.tgz#49da1ca055e109a23d537e9de43c09cca21eb762"
+  integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==
+
+node-fetch@^2.6.1, node-fetch@^2.6.7:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-forge@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
+
+node-mocks-http@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/node-mocks-http/-/node-mocks-http-1.9.0.tgz#6000c570fc4b809603782309be81c73a71d85b71"
+  integrity sha512-ILf7Ws8xyX9Rl2fLZ7xhZBovrRwgaP84M13esndP6V17M/8j25TpwNzb7Im8U9XCo6fRhdwqiQajWXpsas/E6w==
+  dependencies:
+    accepts "^1.3.7"
+    depd "^1.1.0"
+    fresh "^0.5.2"
+    merge-descriptors "^1.0.1"
+    methods "^1.1.2"
+    mime "^1.3.4"
+    parseurl "^1.3.3"
+    range-parser "^1.2.0"
+    type-is "^1.6.18"
+
+nodemailer@6.9.9:
+  version "6.9.9"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.9.tgz#4549bfbf710cc6addec5064dd0f19874d24248d9"
+  integrity sha512-dexTll8zqQoVJEZPwQAKzxxtFn0qTnjdQTchoU6Re9BUUGBJiOy3YMn/0ShTW6J5M0dfQ1NeDeRTTl4oIWgQMA==
+
+nodemon@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.5.tgz#df67fe1fd1312ddb0c1e393ae2cf55aacdcec2f3"
+  integrity sha512-6/jqtZvJdk092pVnD2AIH19KQ9GQZAKOZVy/yT1ueL6aoV+Ix7a1lVZStXzvEh0fP4zE41DDWlkVoHjR6WlozA==
+  dependencies:
+    chokidar "^3.2.2"
+    debug "^3.2.6"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.7"
+    semver "^5.7.1"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.3"
+    update-notifier "^4.1.0"
+
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
+nopt@^7.2.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7"
+  integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
+  dependencies:
+    abbrev "^2.0.0"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-url@^4.1.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
+
+npmlog@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
+  integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
+  dependencies:
+    are-we-there-yet "^2.0.0"
+    console-control-strings "^1.1.0"
+    gauge "^3.0.0"
+    set-blocking "^2.0.0"
+
+oauth@0.10.x:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.10.0.tgz#3551c4c9b95c53ea437e1e21e46b649482339c58"
+  integrity sha512-1orQ9MT1vHFGQxhuy7E/0gECD3fd2fCC+PIX+/jgmU/gI3EpRocXtmtvxCO5x3WZ443FLTLFWNDjl5MPJf9u+Q==
+
+oauth@0.9.x:
+  version "0.9.15"
+  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
+  integrity sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==
+
+object-assign@^4, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+object-keys@^1.0.11, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+on-finished@2.4.1, on-finished@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+open@^8.0.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+p-cancelable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
+  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
+
+p-limit@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.1, p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+package-json-from-dist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
+  integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
+
+package-json@^6.3.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.5.0.tgz#6feedaca35e75725876d0b0e64974697fed145b0"
+  integrity sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==
+  dependencies:
+    got "^9.6.0"
+    registry-auth-token "^4.0.0"
+    registry-url "^5.0.0"
+    semver "^6.2.0"
+
+packet-reader@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/packet-reader/-/packet-reader-1.0.0.tgz#9238e5480dedabacfe1fe3f2771063f164157d74"
+  integrity sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==
+
+parseurl@^1.3.3, parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+passport-google-oauth2@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/passport-google-oauth2/-/passport-google-oauth2-0.2.0.tgz#fc9ea59e7091f02e24fd16d6be9257ea982ebbc3"
+  integrity sha512-62EdPtbfVdc55nIXi0p1WOa/fFMM8v/M8uQGnbcXA4OexZWCnfsEi3wo2buag+Is5oqpuHzOtI64JpHk0Xi5RQ==
+  dependencies:
+    passport-oauth2 "^1.1.2"
+
+passport-jwt@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/passport-jwt/-/passport-jwt-4.0.1.tgz#c443795eff322c38d173faa0a3c481479646ec3d"
+  integrity sha512-UCKMDYhNuGOBE9/9Ycuoyh7vP6jpeTp/+sfMJl7nLff/t6dps+iaeE0hhNkKN8/HZHcJ7lCdOyDxHdDoxoSvdQ==
+  dependencies:
+    jsonwebtoken "^9.0.0"
+    passport-strategy "^1.0.0"
+
+passport-microsoft@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/passport-microsoft/-/passport-microsoft-0.1.0.tgz#dc72c1a38b294d74f4dc55fe93f52e25cb9aa5b4"
+  integrity sha512-0giBDgE1fnR5X84zJZkQ11hnKVrzEgViwRO6RGsormK9zTxFQmN/UHMTDbIpvhk989VqALewB6Pk1R5vNr3GHw==
+  dependencies:
+    passport-oauth2 "1.2.0"
+    pkginfo "0.2.x"
+
+passport-oauth2@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/passport-oauth2/-/passport-oauth2-1.2.0.tgz#49613a3eca85c7a1e65bf1019e2b6b80a10c8ac2"
+  integrity sha512-6128N+n/MOrJdXxdC2q/PVKXtqgihGFIeup+9bsPybAvMPOUKqdGhh9ZIzZF8rFKJOlxUP9fgP3H0JQe18n0rg==
+  dependencies:
+    oauth "0.9.x"
+    passport-strategy "1.x.x"
+    uid2 "0.0.x"
+
+passport-oauth2@^1.1.2:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/passport-oauth2/-/passport-oauth2-1.8.0.tgz#55725771d160f09bbb191828d5e3d559eee079c8"
+  integrity sha512-cjsQbOrXIDE4P8nNb3FQRCCmJJ/utnFKEz2NX209f7KOHPoX18gF7gBzBbLLsj2/je4KrgiwLLGjf0lm9rtTBA==
+  dependencies:
+    base64url "3.x.x"
+    oauth "0.10.x"
+    passport-strategy "1.x.x"
+    uid2 "0.0.x"
+    utils-merge "1.x.x"
+
+passport-strategy@1.x.x, passport-strategy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/passport-strategy/-/passport-strategy-1.0.0.tgz#b5539aa8fc225a3d1ad179476ddf236b440f52e4"
+  integrity sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==
+
+passport@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/passport/-/passport-0.7.0.tgz#3688415a59a48cf8068417a8a8092d4492ca3a05"
+  integrity sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==
+  dependencies:
+    passport-strategy "1.x.x"
+    pause "0.0.1"
+    utils-merge "^1.0.1"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+
+pause@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/pause/-/pause-0.0.1.tgz#1d408b3fdb76923b9543d96fb4c9dfd535d9cb5d"
+  integrity sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg==
+
+pg-connection-string@^2.4.0, pg-connection-string@^2.6.1:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/pg-connection-string/-/pg-connection-string-2.6.4.tgz#f543862adfa49fa4e14bc8a8892d2a84d754246d"
+  integrity sha512-v+Z7W/0EO707aNMaAEfiGnGL9sxxumwLl2fJvCQtMn9Fxsg+lPpPkdcyBSv/KFgpGdYkMfn+EI1Or2EHjpgLCA==
+
+pg-hstore@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/pg-hstore/-/pg-hstore-2.3.4.tgz#4425e3e2a3e15d2a334c35581186c27cf2e9b8dd"
+  integrity sha512-N3SGs/Rf+xA1M2/n0JBiXFDVMzdekwLZLAO0g7mpDY9ouX+fDI7jS6kTq3JujmYbtNSJ53TJ0q4G98KVZSM4EA==
+  dependencies:
+    underscore "^1.13.1"
+
+pg-int8@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/pg-int8/-/pg-int8-1.0.1.tgz#943bd463bf5b71b4170115f80f8efc9a0c0eb78c"
+  integrity sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==
+
+pg-pool@^3.2.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/pg-pool/-/pg-pool-3.6.2.tgz#3a592370b8ae3f02a7c8130d245bc02fa2c5f3f2"
+  integrity sha512-Htjbg8BlwXqSBQ9V8Vjtc+vzf/6fVUuak/3/XXKA9oxZprwW3IMDQTGHP+KDmVL7rtd+R1QjbnCFPuTHm3G4hg==
+
+pg-protocol@^1.3.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/pg-protocol/-/pg-protocol-1.6.1.tgz#21333e6d83b01faaebfe7a33a7ad6bfd9ed38cb3"
+  integrity sha512-jPIlvgoD63hrEuihvIg+tJhoGjUsLPn6poJY9N5CnlPd91c2T18T/9zBtLxZSb1EhYxBRoZJtzScCaWlYLtktg==
+
+pg-types@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
+  integrity sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==
+  dependencies:
+    pg-int8 "1.0.1"
+    postgres-array "~2.0.0"
+    postgres-bytea "~1.0.0"
+    postgres-date "~1.0.4"
+    postgres-interval "^1.1.0"
+
+pg@8.4.1:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/pg/-/pg-8.4.1.tgz#06cfb6208ae787a869b2f0022da11b90d13d933e"
+  integrity sha512-NRsH0aGMXmX1z8Dd0iaPCxWUw4ffu+lIAmGm+sTCwuDDWkpEgRCAHZYDwqaNhC5hG5DRMOjSUFasMWhvcmLN1A==
+  dependencies:
+    buffer-writer "2.0.0"
+    packet-reader "1.0.0"
+    pg-connection-string "^2.4.0"
+    pg-pool "^3.2.1"
+    pg-protocol "^1.3.0"
+    pg-types "^2.1.0"
+    pgpass "1.x"
+
+pgpass@1.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/pgpass/-/pgpass-1.0.5.tgz#9b873e4a564bb10fa7a7dbd55312728d422a223d"
+  integrity sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==
+  dependencies:
+    split2 "^4.1.0"
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pkginfo@0.2.x:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.2.3.tgz#7239c42a5ef6c30b8f328439d9b9ff71042490f8"
+  integrity sha512-7W7wTrE/NsY8xv/DTGjwNIyNah81EQH0MWcTzrHL6pOpMocOGZc0Mbdz9aXxSrp+U0mSmkU8jrNCDCfUs3sOBg==
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postgres-array@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
+  integrity sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==
+
+postgres-bytea@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postgres-bytea/-/postgres-bytea-1.0.0.tgz#027b533c0aa890e26d172d47cf9ccecc521acd35"
+  integrity sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==
+
+postgres-date@~1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/postgres-date/-/postgres-date-1.0.7.tgz#51bc086006005e5061c591cee727f2531bf641a8"
+  integrity sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==
+
+postgres-interval@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postgres-interval/-/postgres-interval-1.2.0.tgz#b460c82cb1587507788819a06aa0fffdb3544695"
+  integrity sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==
+  dependencies:
+    xtend "^4.0.0"
+
+prepend-http@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
+  integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
+promise.allsettled@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
+  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
+  dependencies:
+    array.prototype.map "^1.0.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    iterate-value "^1.0.0"
+
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+pstree.remy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-2.0.1.tgz#abfc7b5a621307c728b551decbbefb51f0e4aa1e"
+  integrity sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw==
+  dependencies:
+    duplexify "^4.1.1"
+    inherits "^2.0.3"
+    pump "^3.0.0"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
+
+pupa@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
+qs@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+range-parser@^1.2.0, range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+rc@1.2.8, rc@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@1.1.x:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^2.2.2:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.1.1, readable-stream@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^4.2.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
+
+registry-auth-token@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.2.tgz#f02d49c3668884612ca031419491a13539e21fac"
+  integrity sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==
+  dependencies:
+    rc "1.2.8"
+
+registry-url@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-5.1.0.tgz#e98334b50d5434b81136b44ec638d9c2009c5009"
+  integrity sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==
+  dependencies:
+    rc "^1.2.8"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+resolve@^1.22.1:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+responselike@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  integrity sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==
+  dependencies:
+    lowercase-keys "^1.0.0"
+
+retry-as-promised@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/retry-as-promised/-/retry-as-promised-7.0.4.tgz#9df73adaeea08cb2948b9d34990549dc13d800a2"
+  integrity sha512-XgmCoxKWkDofwH8WddD0w85ZfqYz+ZHlr5yo+3YUCfycWawU56T5ckWXsScsj5B8tqUcIG67DxXByo3VUgiAdA==
+
+retry-request@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/retry-request/-/retry-request-4.2.2.tgz#b7d82210b6d2651ed249ba3497f07ea602f1a903"
+  integrity sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg==
+  dependencies:
+    debug "^4.1.1"
+    extend "^3.0.2"
+
+retry@0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
+safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
+semver@^5.6.0, semver@^5.7.1:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.3.5, semver@^7.5.3, semver@^7.5.4:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+seq-queue@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/seq-queue/-/seq-queue-0.0.5.tgz#d56812e1c017a6e4e7c3e3a37a1da6d78dd3c93e"
+  integrity sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==
+
+sequelize-cli@6.6.2:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/sequelize-cli/-/sequelize-cli-6.6.2.tgz#8d838b25c988cf136914cdc3843e19d88c3dcb67"
+  integrity sha512-V8Oh+XMz2+uquLZltZES6MVAD+yEnmMfwfn+gpXcDiwE3jyQygLt4xoI0zG8gKt6cRcs84hsKnXAKDQjG/JAgg==
+  dependencies:
+    cli-color "^2.0.3"
+    fs-extra "^9.1.0"
+    js-beautify "^1.14.5"
+    lodash "^4.17.21"
+    resolve "^1.22.1"
+    umzug "^2.3.0"
+    yargs "^16.2.0"
+
+sequelize-json-schema@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/sequelize-json-schema/-/sequelize-json-schema-2.1.1.tgz#a82d3813925e81485d76ce291f4ff5c8cb2ae492"
+  integrity sha512-yCGaHnmQQeL6MQ/fOxhkR5C2aOGZyTD6OrgjP4yw1rbuujuIUVdzWN3AsC6r6AvlGZ3EUBBbCJHKl8OIFFES4Q==
+
+sequelize-pool@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/sequelize-pool/-/sequelize-pool-7.1.0.tgz#210b391af4002762f823188fd6ecfc7413020768"
+  integrity sha512-G9c0qlIWQSK29pR/5U2JF5dDQeqqHRragoyahj/Nx4KOOQ3CPPfzxnfqFPCSB7x5UgjOgnZ61nSxz+fjDpRlJg==
+
+sequelize@6.35.2:
+  version "6.35.2"
+  resolved "https://registry.yarnpkg.com/sequelize/-/sequelize-6.35.2.tgz#9276d24055a9a07bd6812c89ab402659f5853e70"
+  integrity sha512-EdzLaw2kK4/aOnWQ7ed/qh3B6/g+1DvmeXr66RwbcqSm/+QRS9X0LDI5INBibsy4eNJHWIRPo3+QK0zL+IPBHg==
+  dependencies:
+    "@types/debug" "^4.1.8"
+    "@types/validator" "^13.7.17"
+    debug "^4.3.4"
+    dottie "^2.0.6"
+    inflection "^1.13.4"
+    lodash "^4.17.21"
+    moment "^2.29.4"
+    moment-timezone "^0.5.43"
+    pg-connection-string "^2.6.1"
+    retry-as-promised "^7.0.4"
+    semver "^7.5.4"
+    sequelize-pool "^7.1.0"
+    toposort-class "^1.0.1"
+    uuid "^8.3.2"
+    validator "^13.9.0"
+    wkx "^0.5.0"
+
+serialize-javascript@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.18.0"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+split2@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
+  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
+
+sprintf-js@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
+  integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+sqlite@4.0.15:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/sqlite/-/sqlite-4.0.15.tgz#071e0577afb327fbd74a75354ea15964378392e3"
+  integrity sha512-irPPTrbVoDvwzRGpe0v8vxpNwMl+q0tXQzffQTcCUnaJzQFO0hfLLvFwGDKxd6vYBuvEr3uvPkObVoGOvVsmzA==
+
+sqlstring@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/sqlstring/-/sqlstring-2.3.3.tgz#2ddc21f03bce2c387ed60680e739922c65751d0c"
+  integrity sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
+stoppable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stoppable/-/stoppable-1.1.0.tgz#32da568e83ea488b08e4d7ea2c3bcc9d75015d5b"
+  integrity sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==
+
+stream-events@^1.0.4, stream-events@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.5.tgz#bbc898ec4df33a4902d892333d47da9bf1c406d5"
+  integrity sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==
+  dependencies:
+    stubs "^3.0.0"
+
+stream-shift@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.3.tgz#85b8fab4d71010fc3ba8772e8046cc49b8a3864b"
+  integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
+
+streamsearch@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-0.1.2.tgz#808b9d0e56fc273d809ba57338e929919a1a9f1a"
+  integrity sha512-jos8u++JKm0ARcSUTAZXOVC0mSox7Bhn6sBgty73P1f3JGf7yG2clTbBNHUdde/kdvP2FESam+vM6l8jBrNxHA==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@^1.1.1, string_decoder@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-json-comments@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
+  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
+stubs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
+  integrity sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==
+
+supports-color@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+swagger-jsdoc@^6.2.8:
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz#6d33d9fb07ff4a7c1564379c52c08989ec7d0256"
+  integrity sha512-VPvil1+JRpmJ55CgAtn8DIcpBs0bL5L3q5bVQvF4tAW/k/9JYSj7dCpaYCAv5rufe0vcCbBRQXGvzpkWjvLklQ==
+  dependencies:
+    commander "6.2.0"
+    doctrine "3.0.0"
+    glob "7.1.6"
+    lodash.mergewith "^4.6.2"
+    swagger-parser "^10.0.3"
+    yaml "2.0.0-1"
+
+swagger-parser@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/swagger-parser/-/swagger-parser-10.0.3.tgz#04cb01c18c3ac192b41161c77f81e79309135d03"
+  integrity sha512-nF7oMeL4KypldrQhac8RyHerJeGPD1p2xDh900GPvc+Nk7nWP6jX2FcC7WmkinMoAmoO774+AFXcWsW8gMWEIg==
+  dependencies:
+    "@apidevtools/swagger-parser" "10.0.3"
+
+swagger-ui-dist@>=5.0.0:
+  version "5.17.14"
+  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-5.17.14.tgz#e2c222e5bf9e15ccf80ec4bc08b4aaac09792fd6"
+  integrity sha512-CVbSfaLpstV65OnSjbXfVd6Sta3q3F7Cj/yYuvHMp1P90LztOLs6PfUnKEVAeiIVQt9u2SaPwv0LiH/OyMjHRw==
+
+swagger-ui-express@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/swagger-ui-express/-/swagger-ui-express-5.0.1.tgz#fb8c1b781d2793a6bd2f8a205a3f4bd6fa020dd8"
+  integrity sha512-SrNU3RiBGTLLmFU8GIJdOdanJTl4TOmT27tt3bWWHppqYmAZ6IDuEuBvMU6nZq0zLEe6b/1rACXCgLZqO6ZfrA==
+  dependencies:
+    swagger-ui-dist ">=5.0.0"
+
+tar@^6.1.11:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^5.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
+tedious@^18.2.4:
+  version "18.2.4"
+  resolved "https://registry.yarnpkg.com/tedious/-/tedious-18.2.4.tgz#c33986f2561b4fde92bb9df70f44ae1a14f71b46"
+  integrity sha512-+6Nzn/aURTQ+8OxLAJ8fKK5Fbb84HRTI3bHiAC3ZzBKrBg9BHtcHxjmlIni5Zn46hzKiZ5WrDMSwDH8oIYjV8w==
+  dependencies:
+    "@azure/identity" "^4.2.1"
+    "@azure/keyvault-keys" "^4.4.0"
+    "@js-joda/core" "^5.6.1"
+    "@types/node" ">=18"
+    bl "^6.0.11"
+    iconv-lite "^0.6.3"
+    js-md4 "^0.3.2"
+    native-duplexpair "^1.0.0"
+    sprintf-js "^1.1.3"
+
+teeny-request@^7.1.3:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-7.2.0.tgz#41347ece068f08d741e7b86df38a4498208b2633"
+  integrity sha512-SyY0pek1zWsi0LRVAALem+avzMLc33MKW/JLLakdP4s9+D7+jHcy5x6P+h94g2QNZsAqQNfX5lsbd3WSeJXrrw==
+  dependencies:
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.0"
+    node-fetch "^2.6.1"
+    stream-events "^1.0.5"
+    uuid "^8.0.0"
+
+term-size@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
+timers-ext@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.8.tgz#b4e442f10b7624a29dd2aa42c295e257150cf16c"
+  integrity sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==
+  dependencies:
+    es5-ext "^0.10.64"
+    next-tick "^1.1.0"
+
+to-readable-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
+  integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+toposort-class@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toposort-class/-/toposort-class-1.0.1.tgz#7ffd1f78c8be28c3ba45cd4e1a3f5ee193bd9988"
+  integrity sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==
+
+touch@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
+  integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
+tslib@^2.2.0, tslib@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-is@^1.6.18, type-is@^1.6.4, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+type@^2.7.2:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.3.tgz#436981652129285cc3ba94f392886c2637ea0486"
+  integrity sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==
+
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
+uid2@0.0.x:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.4.tgz#033f3b1d5d32505f5ce5f888b9f3b667123c0a44"
+  integrity sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==
+
+umzug@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/umzug/-/umzug-2.3.0.tgz#0ef42b62df54e216b05dcaf627830a6a8b84a184"
+  integrity sha512-Z274K+e8goZK8QJxmbRPhl89HPO1K+ORFtm6rySPhFKfKc5GHhqdzD0SGhSWHkzoXasqJuItdhorSvY7/Cgflw==
+  dependencies:
+    bluebird "^3.7.2"
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+undefsafe@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+underscore@^1.13.1:
+  version "1.13.6"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.6.tgz#04786a1f589dc6c09f761fc5f45b89e935136441"
+  integrity sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+unique-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+update-notifier@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
+  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
+  dependencies:
+    boxen "^4.2.0"
+    chalk "^3.0.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.1"
+    is-npm "^4.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.0.0"
+    pupa "^2.0.1"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  integrity sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==
+  dependencies:
+    prepend-http "^2.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+utils-merge@1.0.1, utils-merge@1.x.x, utils-merge@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+uuid@^8.0.0, uuid@^8.3.0, uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+validator@^13.7.0, validator@^13.9.0:
+  version "13.12.0"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-13.12.0.tgz#7d78e76ba85504da3fee4fd1922b385914d4b35f"
+  integrity sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==
+
+vary@^1, vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-module@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
+  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
+which@2.0.2, which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wide-align@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+wide-align@^1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
+  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
+  dependencies:
+    string-width "^1.0.2 || 2 || 3 || 4"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+wkx@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/wkx/-/wkx-0.5.0.tgz#c6c37019acf40e517cc6b94657a25a3d4aa33e8c"
+  integrity sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==
+  dependencies:
+    "@types/node" "*"
+
+workerpool@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.0.tgz#85aad67fa1a2c8ef9386a1b43539900f61d03d58"
+  integrity sha512-fU2OcNA/GVAJLLyKUoHkAgIhKb0JoCpSjLC/G2vYKxUjVmQwGbRVeoPJ1a8U4pnVofz4AQV5Y/NEw8oKqxEBtA==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@2.0.0-1:
+  version "2.0.0-1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.0.0-1.tgz#8c3029b3ee2028306d5bcf396980623115ff8d18"
+  integrity sha512-W7h5dEhywMKenDJh2iX/LABkbFnBxasD27oyXWDS/feDsxiw0dD5ncXdYXgkvAsXIY2MpW/ZKkr9IU30DBdMNQ==
+
+yargs-parser@13.1.2, yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^15.0.1:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
+  integrity sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs-unparser@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.1.tgz#bd4b0ee05b4c94d058929c32cb09e3fce71d3c5f"
+  integrity sha512-qZV14lK9MWsGCmcr7u5oXGH0dbGqZAIxTDrWXZDo5zUr6b6iUmelNKO6x6R1dQT24AH3LgRxJpr8meWy2unolA==
+  dependencies:
+    camelcase "^5.3.1"
+    decamelize "^1.2.0"
+    flat "^4.1.0"
+    is-plain-obj "^1.1.0"
+    yargs "^14.2.3"
+
+yargs@13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
+
+yargs@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
+  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.1"
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+z-schema@^5.0.1:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-5.0.6.tgz#46d6a687b15e4a4369e18d6cb1c7b8618fc256c5"
+  integrity sha512-+XR1GhnWklYdfr8YaZv/iu+vY+ux7V5DS5zH1DQf6bO5ufrt/5cgNhVO5qyhsjFXvsqQb/f08DWE9b6uPscyAg==
+  dependencies:
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
+    validator "^13.7.0"
+  optionalDependencies:
+    commander "^10.0.0"
diff --git a/docker/.gitignore b/docker/.gitignore
new file mode 100644
index 0000000..adbb97d
--- /dev/null
+++ b/docker/.gitignore
@@ -0,0 +1 @@
+data/
\ No newline at end of file
diff --git a/docker/README.md b/docker/README.md
new file mode 100644
index 0000000..69d1021
--- /dev/null
+++ b/docker/README.md
@@ -0,0 +1,46 @@
+## Description:
+
+  The project contains the **docker folder** and the `Dockerfile`.
+
+  The `Dockerfile` is used to Deploy the project to Google Cloud.
+  
+  The **docker folder** contains a couple of helper scripts:
+  
+- `docker-compose.yml` (all our services: web, backend, db are described here)
+- `start-backend.sh` (starts backend, but only after the database)
+- `wait-for-it.sh` (imported from https://github.com/vishnubob/wait-for-it)
+
+    > To avoid breaking the application, we recommend you don't edit the following files: everything that includes the **docker folder** and `Dokerfile`.
+
+
+  ## Run services:
+
+  1. Install docker compose (https://docs.docker.com/compose/install/)
+
+  2. Move to `docker` folder. All next steps should be done from this folder.
+  
+     ``` cd docker ```
+  
+  3. Make executables from `wait-for-it.sh` and `start-backend.sh`:
+  
+     ``` chmod +x start-backend.sh && chmod +x wait-for-it.sh ```
+  
+  4. Download dependend projects for services.
+  
+  5. Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile.
+  
+  6. Make sure you have needed ports (see them in `ports`) available on your local machine.
+  
+  7. Start services:
+  
+     7.1. With an empty database `rm -rf data && docker-compose up`
+  
+     7.2. With a stored (from previus runs) database data `docker-compose up`
+  
+  8. Check http://localhost:3000
+  
+  9. Stop services:
+  
+     9.1. Just press `Ctr+C`
+
+
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
new file mode 100644
index 0000000..a28d422
--- /dev/null
+++ b/docker/docker-compose.yml
@@ -0,0 +1,58 @@
+
+
+version: "3.9"
+services:
+  web:
+    image: frontend
+    build: ../frontend
+    stdin_open: true # docker run -i
+    tty: true        # docker run -t
+    ports:
+      - "3000:3000"
+    logging:
+      driver: json-file
+      options:
+        max-size: "10m"
+        max-file: "3"
+  db:
+    logging:
+      driver: json-file
+      options:
+        max-size: "10m"
+        max-file: "3"
+    image: postgres
+    volumes:
+      - ./data/db:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_HOST_AUTH_METHOD=trust
+      - POSTGRES_DB=db_modern_erp_redesign
+    ports:
+      - "5432:5432"
+    logging:
+      driver: json-file
+      options:
+        max-size: "10m"
+        max-file: "3"
+
+  backend:
+    image: backend
+    volumes:
+    - ./wait-for-it.sh:/usr/src/app/wait-for-it.sh
+    - ./start-backend.sh:/usr/src/app/start-backend.sh
+    build: ../backend
+    environment:
+     - DB_HOST=db
+    ports:
+     - "8080:8080"
+     logging:
+       driver: json-file
+       options:
+         max-size: "10m"
+         max-file: "3"
+    depends_on:
+     - "db"
+    
+
+    
+    command: ["bash", "./wait-for-it.sh", "db:5432", "--timeout=0", "--strict", "--", "bash", "./start-backend.sh"]
+    
diff --git a/docker/start-backend.sh b/docker/start-backend.sh
new file mode 100644
index 0000000..fb353bf
--- /dev/null
+++ b/docker/start-backend.sh
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+yarn start
diff --git a/docker/wait-for-it.sh b/docker/wait-for-it.sh
new file mode 100644
index 0000000..d990e0d
--- /dev/null
+++ b/docker/wait-for-it.sh
@@ -0,0 +1,182 @@
+#!/usr/bin/env bash
+# Use this script to test if a given TCP host/port are available
+
+WAITFORIT_cmdname=${0##*/}
+
+echoerr() { if [[ $WAITFORIT_QUIET -ne 1 ]]; then echo "$@" 1>&2; fi }
+
+usage()
+{
+    cat << USAGE >&2
+Usage:
+    $WAITFORIT_cmdname host:port [-s] [-t timeout] [-- command args]
+    -h HOST | --host=HOST       Host or IP under test
+    -p PORT | --port=PORT       TCP port under test
+                                Alternatively, you specify the host and port as host:port
+    -s | --strict               Only execute subcommand if the test succeeds
+    -q | --quiet                Don't output any status messages
+    -t TIMEOUT | --timeout=TIMEOUT
+                                Timeout in seconds, zero for no timeout
+    -- COMMAND ARGS             Execute command with args after the test finishes
+USAGE
+    exit 1
+}
+
+wait_for()
+{
+    if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then
+        echoerr "$WAITFORIT_cmdname: waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT"
+    else
+        echoerr "$WAITFORIT_cmdname: waiting for $WAITFORIT_HOST:$WAITFORIT_PORT without a timeout"
+    fi
+    WAITFORIT_start_ts=$(date +%s)
+    while :
+    do
+        if [[ $WAITFORIT_ISBUSY -eq 1 ]]; then
+            nc -z $WAITFORIT_HOST $WAITFORIT_PORT
+            WAITFORIT_result=$?
+        else
+            (echo -n > /dev/tcp/$WAITFORIT_HOST/$WAITFORIT_PORT) >/dev/null 2>&1
+            WAITFORIT_result=$?
+        fi
+        if [[ $WAITFORIT_result -eq 0 ]]; then
+            WAITFORIT_end_ts=$(date +%s)
+            echoerr "$WAITFORIT_cmdname: $WAITFORIT_HOST:$WAITFORIT_PORT is available after $((WAITFORIT_end_ts - WAITFORIT_start_ts)) seconds"
+            break
+        fi
+        sleep 1
+    done
+    return $WAITFORIT_result
+}
+
+wait_for_wrapper()
+{
+    # In order to support SIGINT during timeout: http://unix.stackexchange.com/a/57692
+    if [[ $WAITFORIT_QUIET -eq 1 ]]; then
+        timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --quiet --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT &
+    else
+        timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT &
+    fi
+    WAITFORIT_PID=$!
+    trap "kill -INT -$WAITFORIT_PID" INT
+    wait $WAITFORIT_PID
+    WAITFORIT_RESULT=$?
+    if [[ $WAITFORIT_RESULT -ne 0 ]]; then
+        echoerr "$WAITFORIT_cmdname: timeout occurred after waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT"
+    fi
+    return $WAITFORIT_RESULT
+}
+
+# process arguments
+while [[ $# -gt 0 ]]
+do
+    case "$1" in
+        *:* )
+        WAITFORIT_hostport=(${1//:/ })
+        WAITFORIT_HOST=${WAITFORIT_hostport[0]}
+        WAITFORIT_PORT=${WAITFORIT_hostport[1]}
+        shift 1
+        ;;
+        --child)
+        WAITFORIT_CHILD=1
+        shift 1
+        ;;
+        -q | --quiet)
+        WAITFORIT_QUIET=1
+        shift 1
+        ;;
+        -s | --strict)
+        WAITFORIT_STRICT=1
+        shift 1
+        ;;
+        -h)
+        WAITFORIT_HOST="$2"
+        if [[ $WAITFORIT_HOST == "" ]]; then break; fi
+        shift 2
+        ;;
+        --host=*)
+        WAITFORIT_HOST="${1#*=}"
+        shift 1
+        ;;
+        -p)
+        WAITFORIT_PORT="$2"
+        if [[ $WAITFORIT_PORT == "" ]]; then break; fi
+        shift 2
+        ;;
+        --port=*)
+        WAITFORIT_PORT="${1#*=}"
+        shift 1
+        ;;
+        -t)
+        WAITFORIT_TIMEOUT="$2"
+        if [[ $WAITFORIT_TIMEOUT == "" ]]; then break; fi
+        shift 2
+        ;;
+        --timeout=*)
+        WAITFORIT_TIMEOUT="${1#*=}"
+        shift 1
+        ;;
+        --)
+        shift
+        WAITFORIT_CLI=("$@")
+        break
+        ;;
+        --help)
+        usage
+        ;;
+        *)
+        echoerr "Unknown argument: $1"
+        usage
+        ;;
+    esac
+done
+
+if [[ "$WAITFORIT_HOST" == "" || "$WAITFORIT_PORT" == "" ]]; then
+    echoerr "Error: you need to provide a host and port to test."
+    usage
+fi
+
+WAITFORIT_TIMEOUT=${WAITFORIT_TIMEOUT:-15}
+WAITFORIT_STRICT=${WAITFORIT_STRICT:-0}
+WAITFORIT_CHILD=${WAITFORIT_CHILD:-0}
+WAITFORIT_QUIET=${WAITFORIT_QUIET:-0}
+
+# Check to see if timeout is from busybox?
+WAITFORIT_TIMEOUT_PATH=$(type -p timeout)
+WAITFORIT_TIMEOUT_PATH=$(realpath $WAITFORIT_TIMEOUT_PATH 2>/dev/null || readlink -f $WAITFORIT_TIMEOUT_PATH)
+
+WAITFORIT_BUSYTIMEFLAG=""
+if [[ $WAITFORIT_TIMEOUT_PATH =~ "busybox" ]]; then
+    WAITFORIT_ISBUSY=1
+    # Check if busybox timeout uses -t flag
+    # (recent Alpine versions don't support -t anymore)
+    if timeout &>/dev/stdout | grep -q -e '-t '; then
+        WAITFORIT_BUSYTIMEFLAG="-t"
+    fi
+else
+    WAITFORIT_ISBUSY=0
+fi
+
+if [[ $WAITFORIT_CHILD -gt 0 ]]; then
+    wait_for
+    WAITFORIT_RESULT=$?
+    exit $WAITFORIT_RESULT
+else
+    if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then
+        wait_for_wrapper
+        WAITFORIT_RESULT=$?
+    else
+        wait_for
+        WAITFORIT_RESULT=$?
+    fi
+fi
+
+if [[ $WAITFORIT_CLI != "" ]]; then
+    if [[ $WAITFORIT_RESULT -ne 0 && $WAITFORIT_STRICT -eq 1 ]]; then
+        echoerr "$WAITFORIT_cmdname: strict mode, refusing to execute subprocess"
+        exit $WAITFORIT_RESULT
+    fi
+    exec "${WAITFORIT_CLI[@]}"
+else
+    exit $WAITFORIT_RESULT
+fi
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
new file mode 100644
index 0000000..f4ef79d
--- /dev/null
+++ b/frontend/.eslintignore
@@ -0,0 +1,3 @@
+# Ignore generated files
+build/*
+next-env.d.ts
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
new file mode 100644
index 0000000..590e61f
--- /dev/null
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,25 @@
+module.exports = {
+  extends: [
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended',
+    'eslint-config-prettier',
+  ],
+  plugins: ['import'],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: ['./tsconfig.json'],
+      },
+    },
+  },
+  rules: {
+    'react/no-children-prop': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off', // Turned off to reduce noise
+    '@typescript-eslint/ban-types': 'off',
+    'react-hooks/exhaustive-deps': 'off', // Turned off to reduce noise
+    'import/named': 'error',
+    'import/no-duplicates': 'error',
+    'import/no-unresolved': 'error',
+  },
+};
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..fdc0491
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,33 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local.js env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+/.idea/
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..cedf9c7
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..56e10d0
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,19 @@
+FROM node:20.15.1-alpine
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN yarn install
+# If you are building your code for production
+# RUN npm ci --only=production
+
+# Bundle app source
+COPY . .
+
+EXPOSE 3000
+CMD [ "yarn", "dev" ]
\ No newline at end of file
diff --git a/frontend/LICENSE-justboil b/frontend/LICENSE-justboil
new file mode 100644
index 0000000..798238d
--- /dev/null
+++ b/frontend/LICENSE-justboil
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-current JustBoil.me (https://justboil.me)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..397b127
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,92 @@
+# Modern ERP Redesign
+
+## This project was generated by Flatlogic Platform.
+## Install
+
+`cd` to project's dir and run `npm install`
+
+### Builds
+
+Build are handled by Next.js CLI &mdash; [Info](https://nextjs.org/docs/api-reference/cli)
+
+### Hot-reloads for development
+
+```
+npm run dev
+```
+
+### Builds and minifies for production
+
+```
+npm run build
+```
+
+### Exports build for static hosts
+
+```
+npm run export
+```
+
+### Lint
+
+```
+npm run lint
+```
+
+### Format with prettier
+
+```
+npm run format
+```
+
+## Support
+For any additional information please refer to [Flatlogic homepage](https://flatlogic.com).
+
+
+## To start the project with Docker:
+### Description:
+
+The project contains the **docker folder** and the `Dockerfile`.
+
+The `Dockerfile` is used to Deploy the project to Google Cloud.
+
+The **docker folder** contains a couple of helper scripts:
+
+- `docker-compose.yml` (all our services: web, backend, db are described here)
+- `start-backend.sh` (starts backend, but only after the database)
+- `wait-for-it.sh` (imported from https://github.com/vishnubob/wait-for-it)
+
+  > To avoid breaking the application, we recommend you don't edit the following files: everything that includes the **docker folder** and `Dokerfile`.
+
+
+
+### Run services:
+
+1. Install docker compose (https://docs.docker.com/compose/install/)
+
+2. Move to `docker` folder. All next steps should be done from this folder.
+
+   ``` cd docker ```
+
+3. Make executables from `wait-for-it.sh` and `start-backend.sh`:
+
+   ``` chmod +x start-backend.sh && chmod +x wait-for-it.sh ```
+
+4. Download dependend projects for services.
+
+5. Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile.
+
+6. Make sure you have needed ports (see them in `ports`) available on your local machine.
+
+7. Start services:
+
+   7.1. With an empty database `rm -rf data && docker-compose up`
+
+   7.2. With a stored (from previus runs) database data `docker-compose up`
+
+8. Check http://localhost:3000
+
+9. Stop services:
+
+   9.1. Just press `Ctr+C`
+
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
new file mode 100644
index 0000000..00a8785
--- /dev/null
+++ b/frontend/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./build/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
new file mode 100644
index 0000000..89767ec
--- /dev/null
+++ b/frontend/next.config.mjs
@@ -0,0 +1,32 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+
+const output = process.env.NODE_ENV === 'production' ? 'export' : 'standalone';
+ const nextConfig = {
+trailingSlash: true,
+  distDir: 'build',
+  output,
+  basePath: "",
+  devIndicators: {
+     position: 'bottom-left',
+  },
+  typescript: {
+     ignoreBuildErrors: true,
+  },
+  eslint: {
+     ignoreDuringBuilds: true,
+  },
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+ 
+}
+
+export default nextConfig
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..55cac68
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,79 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "cross-env PORT=${FRONT_PORT:-3000} next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mdi/js": "^7.4.47",
+    "@mui/material": "^6.3.0",
+    "@mui/x-data-grid": "^6.19.2",
+    "@reduxjs/toolkit": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tinymce/tinymce-react": "^4.3.2",
+    "apexcharts": "^3.45.2",
+    "axios": "^1.8.4",
+    "chart.js": "^4.4.1",
+    "chroma-js": "^2.4.2",
+    "dayjs": "^1.11.10",
+    "file-saver": "^2.0.5",
+    "formik": "^2.4.5",
+    "html2canvas": "^1.4.1",
+    "i18next": "^25.1.2",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "^1.0.0",
+    "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "next": "^15.3.1",
+    "next-i18next": "^15.4.2",
+    "numeral": "^2.0.6",
+    "query-string": "^8.1.0",
+    "react": "^19.0.0",
+    "react-apexcharts": "^1.4.1",
+    "react-big-calendar": "^1.10.3",
+    "react-chartjs-2": "^4.3.1",
+    "react-datepicker": "^4.10.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.1",
+    "react-redux": "^8.0.2",
+    "react-select": "^5.7.0",
+    "react-select-async-paginate": "^0.7.9",
+    "react-switch": "^7.0.0",
+    "react-toastify": "^11.0.2",
+    "swr": "^1.3.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@types/node": "18.7.16",
+    "@types/numeral": "^2.0.2",
+    "@types/react-big-calendar": "^1.8.8",
+    "@types/react-redux": "^7.1.24",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "autoprefixer": "^10.4.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.23.1",
+    "eslint-config-next": "^13.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "postcss": "^8.4.4",
+    "postcss-import": "^14.1.0",
+    "prettier": "^3.2.4",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..36f40f3
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,9 @@
+/* eslint-env node */
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
\ No newline at end of file
diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js
new file mode 100644
index 0000000..ecde36c
--- /dev/null
+++ b/frontend/prettier.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  trailingComma: 'es5',
+  arrowParens: 'always',
+  tabWidth: 2,
+  useTabs: false,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  bracketSpacing: true,
+  bracketSameLine: false,
+}
\ No newline at end of file
diff --git a/frontend/public/data-sources/clients.json b/frontend/public/data-sources/clients.json
new file mode 100644
index 0000000..297ec7b
--- /dev/null
+++ b/frontend/public/data-sources/clients.json
@@ -0,0 +1 @@
+{"data":[{"id":19,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Howell-Hand.svg","login":"percy64","name":"Howell Hand","company":"Kiehn-Green","city":"Emelyside","progress":70,"created":"Mar 3, 2022","created_mm_dd_yyyy":"03-03-2022"},{"id":11,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Hope-Howe.svg","login":"dare.concepcion","name":"Hope Howe","company":"Nolan Inc","city":"Paristown","progress":68,"created":"Dec 1, 2022","created_mm_dd_yyyy":"12-01-2022"},{"id":32,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Nelson-Jerde.svg","login":"geovanni.kessler","name":"Nelson Jerde","company":"Nitzsche LLC","city":"Jailynbury","progress":49,"created":"May 18, 2022","created_mm_dd_yyyy":"05-18-2022"},{"id":22,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Kim-Weimann.svg","login":"macejkovic.dashawn","name":"Kim Weimann","company":"Brown-Lueilwitz","city":"New Emie","progress":38,"created":"May 4, 2022","created_mm_dd_yyyy":"05-04-2022"},{"id":34,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Justice-OReilly.svg","login":"hilpert.leora","name":"Justice O'Reilly","company":"Lakin-Muller","city":"New Kacie","progress":38,"created":"Mar 27, 2022","created_mm_dd_yyyy":"03-27-2022"},{"id":48,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Adrienne-Mayer-III.svg","login":"ferry.sophia","name":"Adrienne Mayer III","company":"Kozey, McLaughlin and Kuhn","city":"Howardbury","progress":39,"created":"Mar 29, 2022","created_mm_dd_yyyy":"03-29-2022"},{"id":20,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Julien-Ebert.svg","login":"gokuneva","name":"Mr. Julien Ebert","company":"Cormier LLC","city":"South Serenaburgh","progress":29,"created":"Jun 25, 2022","created_mm_dd_yyyy":"06-25-2022"},{"id":47,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lenna-Smitham.svg","login":"paolo.walter","name":"Lenna Smitham","company":"King Inc","city":"McCulloughfort","progress":59,"created":"Oct 8, 2022","created_mm_dd_yyyy":"10-08-2022"},{"id":24,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Travis-Davis.svg","login":"lkessler","name":"Travis Davis","company":"Leannon and Sons","city":"West Frankton","progress":52,"created":"Oct 20, 2022","created_mm_dd_yyyy":"10-20-2022"},{"id":49,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Prof.-Esteban-Steuber.svg","login":"shana.lang","name":"Prof. Esteban Steuber","company":"Langosh-Ernser","city":"East Sedrick","progress":34,"created":"May 16, 2022","created_mm_dd_yyyy":"05-16-2022"},{"id":36,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Russell-Goodwin-V.svg","login":"jewel07","name":"Russell Goodwin V","company":"Nolan-Stracke","city":"Williamsonmouth","progress":55,"created":"Apr 22, 2022","created_mm_dd_yyyy":"04-22-2022"},{"id":33,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Cassidy-Wiegand-DVM.svg","login":"burnice.okuneva","name":"Ms. Cassidy Wiegand DVM","company":"Kuhlman-Hahn","city":"New Ruthiehaven","progress":76,"created":"Sep 16, 2022","created_mm_dd_yyyy":"09-16-2022"},{"id":44,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Watson-Brakus-PhD.svg","login":"oconnell.juanita","name":"Mr. Watson Brakus PhD","company":"Osinski, Bins and Kuhn","city":"Lake Gloria","progress":58,"created":"Jun 22, 2022","created_mm_dd_yyyy":"06-22-2022"},{"id":46,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Garrison-Friesen-V.svg","login":"vgutmann","name":"Mr. Garrison Friesen V","company":"VonRueden, Rippin and Pfeffer","city":"Port Cieloport","progress":39,"created":"Oct 19, 2022","created_mm_dd_yyyy":"10-19-2022"},{"id":14,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Sister-Morar.svg","login":"veum.lucio","name":"Ms. Sister Morar","company":"Gusikowski, Altenwerth and Abbott","city":"Lake Macville","progress":34,"created":"Jun 11, 2022","created_mm_dd_yyyy":"06-11-2022"},{"id":40,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Laisha-Reinger.svg","login":"edietrich","name":"Ms. Laisha Reinger","company":"Boehm PLC","city":"West Alexiemouth","progress":73,"created":"Nov 2, 2022","created_mm_dd_yyyy":"11-02-2022"},{"id":5,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Cameron-Lind.svg","login":"mose44","name":"Cameron Lind","company":"Tremblay, Padberg and Pouros","city":"Naderview","progress":59,"created":"Sep 14, 2022","created_mm_dd_yyyy":"09-14-2022"},{"id":43,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Sarai-Little.svg","login":"rau.abelardo","name":"Sarai Little","company":"Deckow LLC","city":"Jeanieborough","progress":49,"created":"Jun 13, 2022","created_mm_dd_yyyy":"06-13-2022"},{"id":2,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Shyann-Kautzer.svg","login":"imurazik","name":"Shyann Kautzer","company":"Osinski, Boehm and Kihn","city":"New Alvera","progress":41,"created":"Feb 15, 2022","created_mm_dd_yyyy":"02-15-2022"},{"id":15,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lorna-Christiansen.svg","login":"annalise97","name":"Lorna Christiansen","company":"Altenwerth-Friesen","city":"Port Elbertland","progress":36,"created":"Mar 9, 2022","created_mm_dd_yyyy":"03-09-2022"}]}
diff --git a/frontend/public/data-sources/history.json b/frontend/public/data-sources/history.json
new file mode 100644
index 0000000..1cc0c82
--- /dev/null
+++ b/frontend/public/data-sources/history.json
@@ -0,0 +1 @@
+{"data":[{"id":1,"amount":375.53,"account":"45721474","name":"Home Loan Account","date":"3 days ago","type":"deposit","business":"Turcotte"},{"id":2,"amount":470.26,"account":"94486537","name":"Savings Account","date":"3 days ago","type":"payment","business":"Murazik - Graham"},{"id":3,"amount":971.34,"account":"63189893","name":"Checking Account","date":"5 days ago","type":"invoice","business":"Fahey - Keebler"},{"id":4,"amount":374.63,"account":"74828780","name":"Auto Loan Account","date":"7 days ago","type":"withdraw","business":"Collier - Hintz"}]}
\ No newline at end of file
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..c8c4e3e
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,27 @@
+
+<svg width="134" height="110" viewBox="0 0 134 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d_311_30216)">
+    <circle cx="56.423" cy="43.0949" r="32.3527" fill="#F8F9FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8296 52.2405C19.4251 51.6706 19.4251 50.7466 18.8296 50.1766L13.6813 45.2494L18.8296 40.3222C19.4251 39.7523 19.4251 38.8283 18.8296 38.2583C18.2341 37.6884 17.2686 37.6884 16.6731 38.2583L10.4466 44.2175C9.85113 44.7874 9.85113 45.7114 10.4466 46.2814L16.6731 52.2405C17.2686 52.8105 18.2341 52.8105 18.8296 52.2405Z" fill="#02004E"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M95.1704 52.2405C94.5749 51.6706 94.5749 50.7466 95.1704 50.1766L100.319 45.2494L95.1704 40.3222C94.5749 39.7523 94.5749 38.8283 95.1704 38.2583C95.7659 37.6884 96.7314 37.6884 97.3269 38.2583L103.553 44.2175C104.149 44.7874 104.149 45.7114 103.553 46.2814L97.3269 52.2405C96.7314 52.8105 95.7659 52.8105 95.1704 52.2405Z" fill="#02004E"/>
+    <path d="M56.9779 79.2582C74.2516 79.2582 88.3475 66.645 89.1339 49.832C89.1722 49.0134 88.4956 48.3477 87.6654 48.3477H83.7825H79.8996C79.0695 48.3477 78.3965 49.0119 78.3965 49.8314V54.7771C78.3965 57.9182 75.8169 60.4646 72.6348 60.4646H41.321C38.0005 60.4646 35.3087 57.8075 35.3087 54.5298V49.8314C35.3087 49.0119 34.6358 48.3477 33.8057 48.3477H30.1106H26.2903C25.4602 48.3477 24.7836 49.0134 24.8219 49.832C25.6083 66.645 39.7042 79.2582 56.9779 79.2582Z" fill="#BEC8FF"/>
+    <path d="M53.8961 12.128V28.1618C53.8961 29.0051 53.2227 29.6932 52.3921 29.6932H40.1097C36.7872 29.6932 34.0938 32.4279 34.0938 35.8014V40.637C34.0938 41.4804 33.4205 42.1641 32.5899 42.1641H28.8299H25.07C24.2394 42.1641 23.5629 41.4785 23.5948 40.6357C24.2463 23.4509 35.8889 11.3309 52.3912 10.6366C53.2211 10.6016 53.8961 11.2846 53.8961 12.128Z" fill="#FFA70B"/>
+    <path d="M59.4555 12.128V28.1618C59.4555 29.0051 60.1233 29.6932 60.9471 29.6932H73.1303C76.3761 29.6932 79.0266 32.352 79.0956 35.6741V40.637C79.0956 41.4804 79.7635 42.1641 80.5873 42.1641H84.4407H88.2942C89.118 42.1641 89.789 41.4785 89.7567 40.6357C89.0979 23.4507 77.3285 11.3306 60.948 10.6365C60.1249 10.6017 59.4555 11.2846 59.4555 12.128Z" fill="#5C7EF1"/>
+    <path d="M39.0547 37.1238C39.0547 35.4655 40.3929 34.1211 42.0437 34.1211H71.9337C73.5845 34.1211 74.9228 35.4655 74.9228 37.1238V52.1375C74.9228 53.7959 73.5845 55.1403 71.9337 55.1403H42.0437C40.3929 55.1403 39.0547 53.7959 39.0547 52.1375V37.1238Z" fill="#02004E"/>
+    <path d="M48.333 49.5859C46.9669 49.5859 45.8594 48.4957 45.8594 47.1508V41.5115C45.8594 40.1666 46.9669 39.0763 48.333 39.0763V39.0763C49.6992 39.0763 50.8067 40.1666 50.8067 41.5115V47.1508C50.8067 48.4957 49.6992 49.5859 48.333 49.5859V49.5859Z" fill="#FFA70B"/>
+    <path d="M51.4297 64.3583C51.4297 62.9952 52.4818 63.1892 53.7797 63.1892H59.2217C60.5196 63.1892 61.3243 62.9952 61.3243 64.3583C61.3243 65.7214 59.2217 68.1254 56.377 68.1254C53.7797 68.1254 51.4297 65.7214 51.4297 64.3583Z" fill="#02004E"/>
+    <path d="M65.0362 49.5859C63.67 49.5859 62.5625 48.4957 62.5625 47.1508V41.5115C62.5625 40.1666 63.67 39.0763 65.0362 39.0763V39.0763C66.4023 39.0763 67.5098 40.1666 67.5098 41.5115V47.1508C67.5098 48.4957 66.4023 49.5859 65.0362 49.5859V49.5859Z" fill="#FFA70B"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_311_30216" x="0" y="0.636719" width="134" height="108.621" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="10" dy="10"/>
+      <feGaussianBlur stdDeviation="10"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0 0 0 0 0 0.305882 0 0 0 0.14 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_311_30216"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_311_30216" result="shape"/>
+    </filter>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/public/locales/de/common.json b/frontend/public/locales/de/common.json
new file mode 100644
index 0000000..7f2d578
--- /dev/null
+++ b/frontend/public/locales/de/common.json
@@ -0,0 +1,55 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Dashboard",
+      "overview": "Übersicht",
+      "loadingWidgets": "Widgets werden geladen...",
+      "loading": "Laden..."
+    },
+    "login": {
+      "pageTitle": "Anmeldung",
+
+      "sampleCredentialsAdmin": "Verwenden Sie {{email}} / {{password}}, um sich als Administrator anzumelden",
+      "sampleCredentialsUser":  "Verwenden Sie {{email}} / {{password}}, um sich als Benutzer anzumelden",
+
+      "form": {
+        "loginLabel":        "Login",
+        "loginHelp":         "Bitte geben Sie Ihren Login ein",
+        "passwordLabel":     "Passwort",
+        "passwordHelp":      "Bitte geben Sie Ihr Passwort ein",
+        "remember":          "Angemeldet bleiben",
+        "forgotPassword":    "Passwort vergessen?",
+        "loginButton":       "Anmelden",
+        "loading":           "Wird geladen...",
+        "noAccountYet":      "Noch kein Konto?",
+        "newAccount":        "Neues Konto"
+      },
+
+      "pexels": {
+        "photoCredit": "Foto von {{photographer}} auf Pexels",
+        "videoCredit": "Video von {{name}} auf Pexels",
+        "videoUnsupported": "Ihr Browser unterstützt das Video-Tag nicht."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. Alle Rechte vorbehalten",
+        "privacy":   "Datenschutzrichtlinie"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Diagramm oder Widget erstellen",
+      "helpText": "Beschreiben Sie Ihr neues Widget oder Diagramm in natürlicher Sprache. Zum Beispiel: \"Anzahl der Admin-Benutzer\" ODER \"rotes Diagramm mit der Anzahl geschlossener Verträge gruppiert nach Monat\"",
+      "settingsTitle": "Einstellungen für Widget Creator",
+      "settingsDescription": "Für welche Rolle zeigen wir Widgets an und erstellen sie?",
+      "doneButton": "Fertig",
+      "loading": "Laden..."
+    },
+    "search": {
+      "placeholder": "Suche",
+      "required": "Pflichtfeld",
+      "minLength": "Mindestlänge: {{count}} Zeichen"
+    }
+  }
+}
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
new file mode 100644
index 0000000..8d45685
--- /dev/null
+++ b/frontend/public/locales/en/common.json
@@ -0,0 +1,52 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Dashboard",
+      "overview": "Overview",
+      "loadingWidgets": "Loading widgets...",
+      "loading": "Loading..."
+    },
+    "login": {
+      "pageTitle": "Login",
+
+      "form": {
+        "loginLabel":        "Login",
+        "loginHelp":         "Please enter your login",
+        "passwordLabel":     "Password",
+        "passwordHelp":      "Please enter your password",
+        "remember":          "Remember",
+        "forgotPassword":    "Forgot password?",
+        "loginButton":       "Login",
+        "loading":           "Loading...",
+        "noAccountYet":      "Don’t have an account yet?",
+        "newAccount":        "New Account"
+      },
+
+      "pexels": {
+        "photoCredit": "Photo by {{photographer}} on Pexels",
+        "videoCredit": "Video by {{name}} on Pexels",
+        "videoUnsupported": "Your browser does not support the video tag."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. All rights reserved",
+        "privacy":   "Privacy Policy"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Create Chart or Widget",
+      "helpText": "Describe your new widget or chart in natural language. For example: \"Number of admin users\" OR \"red chart with number of closed contracts grouped by month\"",
+      "settingsTitle": "Widget Creator Settings",
+      "settingsDescription": "What role are we showing and creating widgets for?",
+      "doneButton": "Done",
+      "loading": "Loading..."
+    },
+    "search": {
+      "placeholder": "Search",
+      "required": "Required",
+      "minLength": "Minimum length: {{count}} characters"
+    }
+  }
+}
diff --git a/frontend/public/locales/es/common.json b/frontend/public/locales/es/common.json
new file mode 100644
index 0000000..f3421b1
--- /dev/null
+++ b/frontend/public/locales/es/common.json
@@ -0,0 +1,55 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Tablero",
+      "overview": "Resumen",
+      "loadingWidgets": "Cargando widgets...",
+      "loading": "Cargando..."
+    },
+    "login": {
+      "pageTitle": "Inicio de sesión",
+
+      "sampleCredentialsAdmin": "Use {{email}} / {{password}} para iniciar sesión como Administrador",
+      "sampleCredentialsUser":  "Use {{email}} / {{password}} para iniciar sesión como Usuario",
+
+      "form": {
+        "loginLabel":        "Usuario",
+        "loginHelp":         "Introduzca su usuario",
+        "passwordLabel":     "Contraseña",
+        "passwordHelp":      "Introduzca su contraseña",
+        "remember":          "Recuérdame",
+        "forgotPassword":    "¿Olvidó su contraseña?",
+        "loginButton":       "Acceder",
+        "loading":           "Cargando...",
+        "noAccountYet":      "¿Aún no tiene una cuenta?",
+        "newAccount":        "Crear cuenta"
+      },
+
+      "pexels": {
+        "photoCredit":      "Foto de {{photographer}} en Pexels",
+        "videoCredit":      "Vídeo de {{name}} en Pexels",
+        "videoUnsupported": "Su navegador no admite la etiqueta de vídeo."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. Todos los derechos reservados",
+        "privacy":   "Política de privacidad"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Crear gráfico o widget",
+      "helpText": "Describe tu nuevo widget o gráfico en lenguaje natural. Por ejemplo: \"Número de usuarios administradores\" O \"gráfico rojo con el número de contratos cerrados agrupados por mes\"",
+      "settingsTitle": "Configuración del creador de widgets",
+      "settingsDescription": "¿Para qué rol estamos mostrando y creando widgets?",
+      "doneButton": "Listo",
+      "loading": "Cargando..."
+    },
+    "search": {
+      "placeholder": "Buscar",
+      "required": "Obligatorio",
+      "minLength": "Longitud mínima: {{count}} caracteres"
+    }
+  }
+}
diff --git a/frontend/public/locales/fr/common.json b/frontend/public/locales/fr/common.json
new file mode 100644
index 0000000..ecf531b
--- /dev/null
+++ b/frontend/public/locales/fr/common.json
@@ -0,0 +1,55 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Tableau de bord",
+      "overview": "Vue d'ensemble",
+      "loadingWidgets": "Chargement des widgets...",
+      "loading": "Chargement..."
+    },
+    "login": {
+      "pageTitle": "Connexion",
+
+      "sampleCredentialsAdmin": "Utilisez {{email}} / {{password}} pour vous connecter en tant qu’administrateur",
+      "sampleCredentialsUser":  "Utilisez {{email}} / {{password}} pour vous connecter en tant qu’utilisateur",
+
+      "form": {
+        "loginLabel":        "Identifiant",
+        "loginHelp":         "Veuillez saisir votre identifiant",
+        "passwordLabel":     "Mot de passe",
+        "passwordHelp":      "Veuillez saisir votre mot de passe",
+        "remember":          "Se souvenir de moi",
+        "forgotPassword":    "Mot de passe oublié ?",
+        "loginButton":       "Se connecter",
+        "loading":           "Chargement…",
+        "noAccountYet":      "Vous n’avez pas encore de compte ?",
+        "newAccount":        "Créer un compte"
+      },
+
+      "pexels": {
+        "photoCredit":      "Photo de {{photographer}} sur Pexels",
+        "videoCredit":      "Vidéo de {{name}} sur Pexels",
+        "videoUnsupported": "Votre navigateur ne prend pas en charge la balise vidéo."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. Tous droits réservés",
+        "privacy":   "Politique de confidentialité"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Créer un graphique ou un widget",
+      "helpText": "Décrivez votre nouveau widget ou graphique en langage naturel. Par exemple : \"Nombre d'utilisateurs administrateurs\" OU \"graphique rouge avec le nombre de contrats clôturés regroupés par mois\"",
+      "settingsTitle": "Paramètres du créateur de widget",
+      "settingsDescription": "Pour quel rôle affichons-nous et créons-nous des widgets ?",
+      "doneButton": "Terminé",
+      "loading": "Chargement..."
+    },
+    "search": {
+      "placeholder": "Rechercher",
+      "required": "Champ requis",
+      "minLength": "Longueur minimale : {{count}} caractères"
+    }
+  }
+}
diff --git a/frontend/src/colors.ts b/frontend/src/colors.ts
new file mode 100644
index 0000000..71e116a
--- /dev/null
+++ b/frontend/src/colors.ts
@@ -0,0 +1,138 @@
+import type { ColorButtonKey } from './interfaces'
+
+export const gradientBgBase = 'bg-gradient-to-tr'
+export const colorBgBase = "bg-violet-50/50"
+export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`
+export const gradientBgViolet = `${gradientBgBase} ${colorBgBase}`
+export const gradientBgDark = `${gradientBgBase} from-dark-700 via-dark-900 to-dark-800`;
+export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`
+
+export const colorsBgLight = {
+  white: 'bg-white text-black',
+  light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
+  contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+  success: 'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  danger: 'bg-red-500 border-red-500 text-white',
+  warning: 'bg-yellow-500 border-yellow-500 text-white',
+  info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+}
+
+export const colorsText = {
+  white: 'text-black dark:text-slate-100',
+  light: 'text-gray-700 dark:text-slate-400',
+  contrast: 'dark:text-white',
+  success: 'text-emerald-500',
+  danger: 'text-red-500',
+  warning: 'text-yellow-500',
+  info: 'text-blue-500',
+};
+
+export const colorsOutline = {
+  white: [colorsText.white, 'border-gray-100'].join(' '),
+  light: [colorsText.light, 'border-gray-100'].join(' '),
+  contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'].join(' '),
+  success: [colorsText.success, 'border-emerald-500'].join(' '),
+  danger: [colorsText.danger, 'border-red-500'].join(' '),
+  warning: [colorsText.warning, 'border-yellow-500'].join(' '),
+  info: [colorsText.info, 'border-blue-500'].join(' '),
+};
+
+export const getButtonColor = (
+  color: ColorButtonKey,
+  isOutlined: boolean,
+  hasHover: boolean,
+  isActive = false
+) => {
+  if (color === 'void') {
+    return ''
+  }
+
+  const colors = {
+    ring: {
+      white: 'ring-gray-200 dark:ring-gray-500',
+      whiteDark: 'ring-gray-200 dark:ring-dark-500',
+      lightDark: 'ring-gray-200 dark:ring-gray-500',
+      contrast: 'ring-gray-300 dark:ring-gray-400',
+      success: 'ring-emerald-300 dark:ring-pavitra-blue',
+      danger: 'ring-red-300 dark:ring-red-700',
+      warning: 'ring-yellow-300 dark:ring-yellow-700',
+      info: "ring-blue-300 dark:ring-pavitra-blue",
+    },
+    active: {
+      white: 'bg-gray-100',
+      whiteDark: 'bg-gray-100 dark:bg-dark-800',
+      lightDark: 'bg-gray-200 dark:bg-slate-700',
+      contrast: 'bg-gray-700 dark:bg-slate-100',
+      success: 'bg-emerald-700 dark:bg-pavitra-blue',
+      danger: 'bg-red-700 dark:bg-red-600',
+      warning: 'bg-yellow-700 dark:bg-yellow-600',
+      info: 'bg-blue-700  dark:bg-pavitra-blue',
+    },
+    bg: {
+      white: 'bg-white text-black',
+      whiteDark: 'bg-white  text-black  dark:bg-dark-900 dark:text-white',
+      lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
+      contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+      success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
+      danger: 'bg-red-600 text-white    dark:bg-red-500 ',
+      warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
+      info: " bg-blue-600  dark:bg-pavitra-blue  text-white ",
+    },
+    bgHover: {
+      white: 'hover:bg-gray-100',
+      whiteDark: 'hover:bg-gray-100  hover:dark:bg-dark-800',
+      lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
+      contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
+      success:
+          'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
+      danger:
+        'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
+      info: "hover:bg-blue-700 hover:border-blue-700   hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80",
+    },
+    borders: {
+      white: 'border-white',
+      whiteDark: 'border-white  dark:border-dark-900',
+      lightDark: 'border-gray-100 dark:border-slate-800',
+      contrast: 'border-gray-800 dark:border-white',
+      success: 'border-emerald-600 dark:border-pavitra-blue',
+      danger: 'border-red-600 dark:border-red-500',
+      warning: 'border-yellow-600 dark:border-yellow-500',
+      info: "border-blue-600  border-blue-600 dark:border-pavitra-blue",
+    },
+    text: {
+      contrast: 'dark:text-slate-100',
+      success: 'text-emerald-600 dark:text-pavitra-blue',
+      danger: 'text-red-600 dark:text-red-500',
+      warning: 'text-yellow-600 dark:text-yellow-500',
+      info: 'text-blue-600  dark:text-pavitra-blue',
+    },
+    outlineHover: {
+      contrast:
+        'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
+      success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+      danger:
+        'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
+      info: "hover:bg-blue-600  hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue",
+    },
+  }
+
+  const isOutlinedProcessed = isOutlined && ['white', 'whiteDark', 'lightDark'].indexOf(color) < 0
+
+  const base = [colors.borders[color], colors.ring[color]]
+
+  if (isActive) {
+    base.push(colors.active[color])
+  } else {
+    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color])
+  }
+
+  if (hasHover) {
+    base.push(isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color])
+  }
+
+  return base.join(' ')
+}
diff --git a/frontend/src/components/Activity_logs/CardActivity_logs.tsx b/frontend/src/components/Activity_logs/CardActivity_logs.tsx
new file mode 100644
index 0000000..0bc332c
--- /dev/null
+++ b/frontend/src/components/Activity_logs/CardActivity_logs.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  activity_logs: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardActivity_logs = ({
+  activity_logs,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ACTIVITY_LOGS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && activity_logs.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/activity_logs/activity_logs-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.entity_reference}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/activity_logs/activity_logs-edit/?id=${item.id}`}
+                  pathView={`/activity_logs/activity_logs-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Actor</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.actor) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EntityType</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.entity_type }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EntityReference</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.entity_reference }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Action</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.action }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EventTime</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.event_time) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Message</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.message }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IPAddress</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.ip_address }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && activity_logs.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardActivity_logs;
diff --git a/frontend/src/components/Activity_logs/ListActivity_logs.tsx b/frontend/src/components/Activity_logs/ListActivity_logs.tsx
new file mode 100644
index 0000000..42a5ab8
--- /dev/null
+++ b/frontend/src/components/Activity_logs/ListActivity_logs.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    activity_logs: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListActivity_logs = ({ activity_logs, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ACTIVITY_LOGS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && activity_logs.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/activity_logs/activity_logs-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Actor</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.actor) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EntityType</p>
+                                <p className={'line-clamp-2'}>{ item.entity_type }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EntityReference</p>
+                                <p className={'line-clamp-2'}>{ item.entity_reference }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Action</p>
+                                <p className={'line-clamp-2'}>{ item.action }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EventTime</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.event_time) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Message</p>
+                                <p className={'line-clamp-2'}>{ item.message }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IPAddress</p>
+                                <p className={'line-clamp-2'}>{ item.ip_address }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/activity_logs/activity_logs-edit/?id=${item.id}`}
+                              pathView={`/activity_logs/activity_logs-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && activity_logs.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListActivity_logs
\ No newline at end of file
diff --git a/frontend/src/components/Activity_logs/TableActivity_logs.tsx b/frontend/src/components/Activity_logs/TableActivity_logs.tsx
new file mode 100644
index 0000000..902a5a2
--- /dev/null
+++ b/frontend/src/components/Activity_logs/TableActivity_logs.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/activity_logs/activity_logsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureActivity_logsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleActivity_logs = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { activity_logs, loading, count, notify: activity_logsNotify, refetch } = useAppSelector((state) => state.activity_logs)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (activity_logsNotify.showNotification) {
+          notify(activity_logsNotify.typeNotification, activity_logsNotify.textNotification);
+      }
+  }, [activity_logsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `activity_logs`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={activity_logs ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleActivity_logs
diff --git a/frontend/src/components/Activity_logs/configureActivity_logsCols.tsx b/frontend/src/components/Activity_logs/configureActivity_logsCols.tsx
new file mode 100644
index 0000000..463bf05
--- /dev/null
+++ b/frontend/src/components/Activity_logs/configureActivity_logsCols.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_ACTIVITY_LOGS')
+    
+    return [
+        
+        {
+            field: 'actor',
+            headerName: 'Actor',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'entity_type',
+            headerName: 'EntityType',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'entity_reference',
+            headerName: 'EntityReference',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'action',
+            headerName: 'Action',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'event_time',
+            headerName: 'EventTime',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.event_time),
+          
+        },
+        
+        {
+            field: 'message',
+            headerName: 'Message',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'ip_address',
+            headerName: 'IPAddress',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/activity_logs/activity_logs-edit/?id=${params?.row?.id}`}
+                      pathView={`/activity_logs/activity_logs-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Approval_steps/CardApproval_steps.tsx b/frontend/src/components/Approval_steps/CardApproval_steps.tsx
new file mode 100644
index 0000000..d9af1aa
--- /dev/null
+++ b/frontend/src/components/Approval_steps/CardApproval_steps.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  approval_steps: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardApproval_steps = ({
+  approval_steps,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVAL_STEPS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && approval_steps.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/approval_steps/approval_steps-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.step_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/approval_steps/approval_steps-edit/?id=${item.id}`}
+                  pathView={`/approval_steps/approval_steps-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ApprovalWorkflow</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.approval_workflowsOneListFormatter(item.approval_workflow) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>StepOrder</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.step_order }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>StepName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.step_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ApproverRole</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.rolesOneListFormatter(item.approver_role) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>MinAmount</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.min_amount }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>MaxAmount</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.max_amount }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsRequired</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_required) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && approval_steps.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardApproval_steps;
diff --git a/frontend/src/components/Approval_steps/ListApproval_steps.tsx b/frontend/src/components/Approval_steps/ListApproval_steps.tsx
new file mode 100644
index 0000000..56878c8
--- /dev/null
+++ b/frontend/src/components/Approval_steps/ListApproval_steps.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    approval_steps: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListApproval_steps = ({ approval_steps, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVAL_STEPS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && approval_steps.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/approval_steps/approval_steps-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ApprovalWorkflow</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.approval_workflowsOneListFormatter(item.approval_workflow) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>StepOrder</p>
+                                <p className={'line-clamp-2'}>{ item.step_order }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>StepName</p>
+                                <p className={'line-clamp-2'}>{ item.step_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ApproverRole</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.rolesOneListFormatter(item.approver_role) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>MinAmount</p>
+                                <p className={'line-clamp-2'}>{ item.min_amount }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>MaxAmount</p>
+                                <p className={'line-clamp-2'}>{ item.max_amount }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsRequired</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_required) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/approval_steps/approval_steps-edit/?id=${item.id}`}
+                              pathView={`/approval_steps/approval_steps-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && approval_steps.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListApproval_steps
\ No newline at end of file
diff --git a/frontend/src/components/Approval_steps/TableApproval_steps.tsx b/frontend/src/components/Approval_steps/TableApproval_steps.tsx
new file mode 100644
index 0000000..09793df
--- /dev/null
+++ b/frontend/src/components/Approval_steps/TableApproval_steps.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/approval_steps/approval_stepsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureApproval_stepsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleApproval_steps = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { approval_steps, loading, count, notify: approval_stepsNotify, refetch } = useAppSelector((state) => state.approval_steps)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (approval_stepsNotify.showNotification) {
+          notify(approval_stepsNotify.typeNotification, approval_stepsNotify.textNotification);
+      }
+  }, [approval_stepsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `approval_steps`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={approval_steps ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleApproval_steps
diff --git a/frontend/src/components/Approval_steps/configureApproval_stepsCols.tsx b/frontend/src/components/Approval_steps/configureApproval_stepsCols.tsx
new file mode 100644
index 0000000..fa68d2e
--- /dev/null
+++ b/frontend/src/components/Approval_steps/configureApproval_stepsCols.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_APPROVAL_STEPS')
+    
+    return [
+        
+        {
+            field: 'approval_workflow',
+            headerName: 'ApprovalWorkflow',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('approval_workflows'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'step_order',
+            headerName: 'StepOrder',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'step_name',
+            headerName: 'StepName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'approver_role',
+            headerName: 'ApproverRole',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('roles'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'min_amount',
+            headerName: 'MinAmount',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'max_amount',
+            headerName: 'MaxAmount',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'is_required',
+            headerName: 'IsRequired',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/approval_steps/approval_steps-edit/?id=${params?.row?.id}`}
+                      pathView={`/approval_steps/approval_steps-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Approval_workflows/CardApproval_workflows.tsx b/frontend/src/components/Approval_workflows/CardApproval_workflows.tsx
new file mode 100644
index 0000000..685b74a
--- /dev/null
+++ b/frontend/src/components/Approval_workflows/CardApproval_workflows.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  approval_workflows: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardApproval_workflows = ({
+  approval_workflows,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVAL_WORKFLOWS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && approval_workflows.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/approval_workflows/approval_workflows-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.workflow_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/approval_workflows/approval_workflows-edit/?id=${item.id}`}
+                  pathView={`/approval_workflows/approval_workflows-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>WorkflowName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.workflow_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>AppliesTo</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.applies_to }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && approval_workflows.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardApproval_workflows;
diff --git a/frontend/src/components/Approval_workflows/ListApproval_workflows.tsx b/frontend/src/components/Approval_workflows/ListApproval_workflows.tsx
new file mode 100644
index 0000000..813291b
--- /dev/null
+++ b/frontend/src/components/Approval_workflows/ListApproval_workflows.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    approval_workflows: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListApproval_workflows = ({ approval_workflows, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVAL_WORKFLOWS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && approval_workflows.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/approval_workflows/approval_workflows-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>WorkflowName</p>
+                                <p className={'line-clamp-2'}>{ item.workflow_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>AppliesTo</p>
+                                <p className={'line-clamp-2'}>{ item.applies_to }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/approval_workflows/approval_workflows-edit/?id=${item.id}`}
+                              pathView={`/approval_workflows/approval_workflows-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && approval_workflows.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListApproval_workflows
\ No newline at end of file
diff --git a/frontend/src/components/Approval_workflows/TableApproval_workflows.tsx b/frontend/src/components/Approval_workflows/TableApproval_workflows.tsx
new file mode 100644
index 0000000..0fdd2fc
--- /dev/null
+++ b/frontend/src/components/Approval_workflows/TableApproval_workflows.tsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/approval_workflows/approval_workflowsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureApproval_workflowsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import ListApproval_workflows from './ListApproval_workflows';
+
+
+const perPage =  10 
+
+const TableSampleApproval_workflows = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { approval_workflows, loading, count, notify: approval_workflowsNotify, refetch } = useAppSelector((state) => state.approval_workflows)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (approval_workflowsNotify.showNotification) {
+          notify(approval_workflowsNotify.typeNotification, approval_workflowsNotify.textNotification);
+      }
+  }, [approval_workflowsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `approval_workflows`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={approval_workflows ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {approval_workflows && Array.isArray(approval_workflows) && !showGrid && (
+            <ListApproval_workflows
+                approval_workflows={approval_workflows}
+                loading={loading}
+                onDelete={handleDeleteModalAction}
+                currentPage={currentPage}
+                numPages={numPages}
+                onPageChange={onPageChange}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleApproval_workflows
diff --git a/frontend/src/components/Approval_workflows/configureApproval_workflowsCols.tsx b/frontend/src/components/Approval_workflows/configureApproval_workflowsCols.tsx
new file mode 100644
index 0000000..c14c23e
--- /dev/null
+++ b/frontend/src/components/Approval_workflows/configureApproval_workflowsCols.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_APPROVAL_WORKFLOWS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'workflow_name',
+            headerName: 'WorkflowName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'applies_to',
+            headerName: 'AppliesTo',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/approval_workflows/approval_workflows-edit/?id=${params?.row?.id}`}
+                      pathView={`/approval_workflows/approval_workflows-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Approvals/CardApprovals.tsx b/frontend/src/components/Approvals/CardApprovals.tsx
new file mode 100644
index 0000000..214b458
--- /dev/null
+++ b/frontend/src/components/Approvals/CardApprovals.tsx
@@ -0,0 +1,219 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  approvals: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardApprovals = ({
+  approvals,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVALS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && approvals.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/approvals/approvals-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.entity_reference}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/approvals/approvals-edit/?id=${item.id}`}
+                  pathView={`/approvals/approvals-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ApprovalWorkflow</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.approval_workflowsOneListFormatter(item.approval_workflow) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ApprovalStep</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.approval_stepsOneListFormatter(item.approval_step) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EntityType</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.entity_type }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EntityReference</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.entity_reference }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>RequestedBy</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.requested_by) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>AssignedTo</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.assigned_to) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>RequestedAt</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.requested_at) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DecidedAt</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.decided_at) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DecisionNotes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.decision_notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && approvals.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardApprovals;
diff --git a/frontend/src/components/Approvals/ListApprovals.tsx b/frontend/src/components/Approvals/ListApprovals.tsx
new file mode 100644
index 0000000..d3c0c16
--- /dev/null
+++ b/frontend/src/components/Approvals/ListApprovals.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    approvals: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListApprovals = ({ approvals, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_APPROVALS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && approvals.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/approvals/approvals-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ApprovalWorkflow</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.approval_workflowsOneListFormatter(item.approval_workflow) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ApprovalStep</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.approval_stepsOneListFormatter(item.approval_step) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EntityType</p>
+                                <p className={'line-clamp-2'}>{ item.entity_type }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EntityReference</p>
+                                <p className={'line-clamp-2'}>{ item.entity_reference }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>RequestedBy</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.requested_by) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>AssignedTo</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.assigned_to) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>RequestedAt</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.requested_at) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DecidedAt</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.decided_at) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DecisionNotes</p>
+                                <p className={'line-clamp-2'}>{ item.decision_notes }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/approvals/approvals-edit/?id=${item.id}`}
+                              pathView={`/approvals/approvals-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && approvals.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListApprovals
\ No newline at end of file
diff --git a/frontend/src/components/Approvals/TableApprovals.tsx b/frontend/src/components/Approvals/TableApprovals.tsx
new file mode 100644
index 0000000..156ffc4
--- /dev/null
+++ b/frontend/src/components/Approvals/TableApprovals.tsx
@@ -0,0 +1,507 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/approvals/approvalsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureApprovalsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
+
+const perPage =  10 
+
+const TableSampleApprovals = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+    const [kanbanColumns, setKanbanColumns] = useState<Array<{id: string, label: string}> | null>(null);
+    const [kanbanFilters, setKanbanFilters] = useState('');
+  
+  const { approvals, loading, count, notify: approvalsNotify, refetch } = useAppSelector((state) => state.approvals)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (approvalsNotify.showNotification) {
+          notify(approvalsNotify.typeNotification, approvalsNotify.textNotification);
+      }
+  }, [approvalsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+    useEffect(() => {
+      
+        
+      
+      setKanbanColumns([
+          
+          { id: "pending", label: "pending" },
+          
+          { id: "approved", label: "approved" },
+          
+          { id: "rejected", label: "rejected" },
+          
+          { id: "cancelled", label: "cancelled" },
+          
+      ]);
+      
+      
+    }, []);
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setKanbanFilters('');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+    setKanbanFilters(generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+      setKanbanFilters('');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `approvals`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={approvals ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+      
+      {!showGrid && kanbanColumns && (
+            <KanbanBoard
+                columnFieldName={'status'}
+                showFieldName={'entity_reference'}
+                entityName={'approvals'}
+                filtersQuery={kanbanFilters}
+                deleteThunk={deleteItem}
+                updateThunk={update}
+                columns={kanbanColumns}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleApprovals
diff --git a/frontend/src/components/Approvals/configureApprovalsCols.tsx b/frontend/src/components/Approvals/configureApprovalsCols.tsx
new file mode 100644
index 0000000..0d61ba9
--- /dev/null
+++ b/frontend/src/components/Approvals/configureApprovalsCols.tsx
@@ -0,0 +1,252 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_APPROVALS')
+    
+    return [
+        
+        {
+            field: 'approval_workflow',
+            headerName: 'ApprovalWorkflow',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('approval_workflows'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'approval_step',
+            headerName: 'ApprovalStep',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('approval_steps'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'entity_type',
+            headerName: 'EntityType',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'entity_reference',
+            headerName: 'EntityReference',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'requested_by',
+            headerName: 'RequestedBy',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'assigned_to',
+            headerName: 'AssignedTo',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'requested_at',
+            headerName: 'RequestedAt',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.requested_at),
+          
+        },
+        
+        {
+            field: 'decided_at',
+            headerName: 'DecidedAt',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.decided_at),
+          
+        },
+        
+        {
+            field: 'decision_notes',
+            headerName: 'DecisionNotes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/approvals/approvals-edit/?id=${params?.row?.id}`}
+                      pathView={`/approvals/approvals-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/AsideMenu.tsx b/frontend/src/components/AsideMenu.tsx
new file mode 100644
index 0000000..442dfac
--- /dev/null
+++ b/frontend/src/components/AsideMenu.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { MenuAsideItem } from '../interfaces'
+import AsideMenuLayer from './AsideMenuLayer'
+import OverlayLayer from './OverlayLayer'
+
+type Props = {
+  menu: MenuAsideItem[]
+  isAsideMobileExpanded: boolean
+  isAsideLgActive: boolean
+  onAsideLgClose: () => void
+}
+
+export default function AsideMenu({
+  isAsideMobileExpanded = false,
+  isAsideLgActive = false,
+  ...props
+}: Props) {
+  return (
+    <>
+      <AsideMenuLayer
+        menu={props.menu}
+        className={`${isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'} ${
+          !isAsideLgActive ? 'lg:hidden xl:flex' : ''
+        }`}
+        onAsideLgCloseClick={props.onAsideLgClose}
+      />
+      {isAsideLgActive && <OverlayLayer zIndex="z-30" onClick={props.onAsideLgClose} />}
+    </>
+  )
+}
diff --git a/frontend/src/components/AsideMenuItem.tsx b/frontend/src/components/AsideMenuItem.tsx
new file mode 100644
index 0000000..dbb09b2
--- /dev/null
+++ b/frontend/src/components/AsideMenuItem.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react'
+import { mdiMinus, mdiPlus } from '@mdi/js'
+import BaseIcon from './BaseIcon'
+import Link from 'next/link'
+import { getButtonColor } from '../colors'
+import AsideMenuList from './AsideMenuList'
+import { MenuAsideItem } from '../interfaces'
+import { useAppSelector } from '../stores/hooks'
+import { useRouter } from 'next/router'
+
+type Props = {
+  item: MenuAsideItem
+  isDropdownList?: boolean
+}
+
+const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  const [isLinkActive, setIsLinkActive] = useState(false)
+  const [isDropdownActive, setIsDropdownActive] = useState(false)
+
+  const asideMenuItemStyle = useAppSelector((state) => state.style.asideMenuItemStyle)
+  const asideMenuDropdownStyle = useAppSelector((state) => state.style.asideMenuDropdownStyle)
+  const asideMenuItemActiveStyle = useAppSelector((state) => state.style.asideMenuItemActiveStyle)
+  const borders = useAppSelector((state) => state.style.borders);
+  const activeLinkColor = useAppSelector(
+    (state) => state.style.activeLinkColor,
+  );
+  const activeClassAddon = !item.color && isLinkActive ? asideMenuItemActiveStyle : ''
+
+  const { asPath, isReady } = useRouter()
+
+  useEffect(() => {
+    if (item.href && isReady) {
+      const linkPathName = new URL(item.href, location.href).pathname + '/';
+      const activePathname = new URL(asPath, location.href).pathname
+
+      const activeView = activePathname.split('/')[1];
+      const linkPathNameView = linkPathName.split('/')[1];
+
+      setIsLinkActive(linkPathNameView === activeView);
+    }
+  }, [item.href, isReady, asPath])
+
+  const asideMenuItemInnerContents = (
+    <>
+      {item.icon && (
+        <BaseIcon path={item.icon} className={`flex-none mx-3 ${activeClassAddon}`} size="18" />
+      )}
+      <span
+        className={`grow text-ellipsis line-clamp-1 ${
+          item.menu ? '' : 'pr-12'
+        } ${activeClassAddon}`}
+      >
+        {item.label}
+      </span>
+      {item.menu && (
+        <BaseIcon
+          path={isDropdownActive ? mdiMinus : mdiPlus}
+          className={`flex-none ${activeClassAddon}`}
+          w="w-12"
+        />
+      )}
+    </>
+  )
+
+  const componentClass = [
+    'flex cursor-pointer py-1.5 ',
+    isDropdownList ? 'px-6 text-sm' : '',
+    item.color
+        ? getButtonColor(item.color, false, true)
+        : `${asideMenuItemStyle}`,
+    isLinkActive
+        ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800`
+        : '',
+  ].join(' ');
+
+  return (
+    <li className={'px-3 py-1.5'}>
+      {item.withDevider && <hr className={`${borders} mb-3`} />}
+      {item.href && (
+        <Link href={item.href} target={item.target} className={componentClass}>
+          {asideMenuItemInnerContents}
+        </Link>
+      )}
+      {!item.href && (
+        <div className={componentClass} onClick={() => setIsDropdownActive(!isDropdownActive)}>
+          {asideMenuItemInnerContents}
+        </div>
+      )}
+      {item.menu && (
+        <AsideMenuList
+          menu={item.menu}
+          className={`${asideMenuDropdownStyle} ${
+            isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
+          }`}
+          isDropdownList
+        />
+      )}
+    </li>
+  )
+}
+
+export default AsideMenuItem
diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx
new file mode 100644
index 0000000..7f31258
--- /dev/null
+++ b/frontend/src/components/AsideMenuLayer.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { mdiLogout, mdiClose } from '@mdi/js'
+import BaseIcon from './BaseIcon'
+import AsideMenuList from './AsideMenuList'
+import { MenuAsideItem } from '../interfaces'
+import { useAppSelector } from '../stores/hooks'
+import Link from 'next/link';
+
+import { useAppDispatch } from '../stores/hooks';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+
+type Props = {
+  menu: MenuAsideItem[]
+  className?: string
+  onAsideLgCloseClick: () => void
+}
+
+export default function AsideMenuLayer({ menu, className = '', ...props }: Props) {
+  const corners = useAppSelector((state) => state.style.corners);
+  const asideStyle = useAppSelector((state) => state.style.asideStyle)
+  const asideBrandStyle = useAppSelector((state) => state.style.asideBrandStyle)
+  const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
+  const darkMode = useAppSelector((state) => state.style.darkMode)
+
+  const handleAsideLgCloseClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    props.onAsideLgCloseClick()
+  }
+
+  const dispatch = useAppDispatch();
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const organizationsId = currentUser?.organizations?.id;
+  const [organizations, setOrganizations] = React.useState(null);
+
+  const fetchOrganizations = createAsyncThunk('/org-for-auth', async () => {
+    try {
+      const response = await axios.get('/org-for-auth');
+      setOrganizations(response.data);
+      return response.data;
+    } catch (error) {
+      console.error(error.response);
+      throw error;
+    }
+  });
+
+  React.useEffect(() => {
+    dispatch(fetchOrganizations());
+  }, [dispatch]);
+
+  let organizationName = organizations?.find(item => item.id === organizationsId)?.name;
+  if(organizationName?.length > 25){
+    organizationName = organizationName?.substring(0, 25) + '...';
+  }
+
+
+  return (
+    <aside
+      id='asideMenu'
+      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
+    >
+      <div
+          className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle} ${corners}`}
+      >
+        <div
+          className={`flex flex-row h-14 items-center justify-between ${asideBrandStyle}`}
+        >
+          <div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
+              
+                  <b className="font-black">Modern ERP Redesign</b>
+                
+            
+            {organizationName && <p>{organizationName}</p>}
+            
+          </div>
+          <button
+            className="hidden lg:inline-block xl:hidden p-3"
+            onClick={handleAsideLgCloseClick}
+          >
+            <BaseIcon path={mdiClose} />
+          </button>
+        </div>
+        <div
+          className={`flex-1 overflow-y-auto overflow-x-hidden ${
+            darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+          }`}
+        >
+          <AsideMenuList menu={menu} />
+        </div>
+      </div>
+    </aside>
+  )
+}
diff --git a/frontend/src/components/AsideMenuList.tsx b/frontend/src/components/AsideMenuList.tsx
new file mode 100644
index 0000000..9e33ea1
--- /dev/null
+++ b/frontend/src/components/AsideMenuList.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { MenuAsideItem } from '../interfaces'
+import AsideMenuItem from './AsideMenuItem'
+import {useAppSelector} from "../stores/hooks";
+import {hasPermission} from "../helpers/userPermissions";
+
+type Props = {
+  menu: MenuAsideItem[]
+  isDropdownList?: boolean
+  className?: string
+}
+
+export default function AsideMenuList({ menu, isDropdownList = false, className = '' }: Props) {
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  if (!currentUser) return null;
+
+  return (
+    <ul className={className}>
+      {menu.map((item, index) => {
+        
+          if (!hasPermission(currentUser, item.permissions)) return null;
+        
+        return (
+          <div key={index}>
+            <AsideMenuItem
+              item={item}
+              isDropdownList={isDropdownList}
+            />
+          </div>
+        )
+      })}
+    </ul>
+  )
+}
diff --git a/frontend/src/components/BaseButton.tsx b/frontend/src/components/BaseButton.tsx
new file mode 100644
index 0000000..a137dc2
--- /dev/null
+++ b/frontend/src/components/BaseButton.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import Link from 'next/link'
+import { getButtonColor } from '../colors'
+import BaseIcon from './BaseIcon'
+import type { ColorButtonKey } from '../interfaces'
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string
+  icon?: string
+  iconSize?: string | number
+  href?: string
+  target?: string
+  type?: string
+  color?: ColorButtonKey
+  className?: string
+  iconClassName?: string
+  asAnchor?: boolean
+  small?: boolean
+  outline?: boolean
+  active?: boolean
+  disabled?: boolean
+  roundedFull?: boolean
+  onClick?: (e: React.MouseEvent) => void
+}
+
+export default function BaseButton({
+  label,
+  icon,
+  iconSize,
+  href,
+  target,
+  type,
+  color = 'white',
+  className = '',
+  iconClassName = '',
+  asAnchor = false,
+  small = false,
+  outline = false,
+  active = false,
+  disabled = false,
+  roundedFull = false,
+  onClick,
+}: Props) {
+  const corners = useAppSelector((state) => state.style.corners);
+  const componentClass = [
+    'inline-flex',
+    'justify-center',
+    'items-center',
+    'whitespace-nowrap',
+    'focus:outline-none',
+    'transition-colors',
+    'focus:ring',
+    'duration-150',
+    'border',
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    roundedFull ? 'rounded-full' : `${corners}`,
+    getButtonColor(color, outline, !disabled, active),
+    className,
+  ]
+
+  if (!label && icon) {
+    componentClass.push('p-1')
+  } else if (small) {
+    componentClass.push('text-sm', roundedFull ? 'px-3 py-1' : 'p-1')
+  } else {
+    componentClass.push('py-2', roundedFull ? 'px-6' : 'px-3')
+  }
+
+  if (disabled) {
+    componentClass.push(outline ? 'opacity-50' : 'opacity-70')
+  }
+
+  const componentClassString = componentClass.join(' ')
+
+  const componentChildren = (
+    <>
+      {icon && <BaseIcon path={icon} size={iconSize} className={iconClassName} />}
+      {label && <span className={small && icon ? 'px-1' : 'px-2'}>{label}</span>}
+    </>
+  )
+
+  if (href && !disabled) {
+    return (
+      <Link href={href} target={target} className={componentClassString}>
+        {componentChildren}
+      </Link>
+    )
+  }
+
+  return React.createElement(
+    asAnchor ? 'a' : 'button',
+    { className: componentClassString, type: type ?? 'button', target, disabled, onClick },
+    componentChildren
+  )
+}
diff --git a/frontend/src/components/BaseButtons.tsx b/frontend/src/components/BaseButtons.tsx
new file mode 100644
index 0000000..e81a102
--- /dev/null
+++ b/frontend/src/components/BaseButtons.tsx
@@ -0,0 +1,38 @@
+import { Children, cloneElement, ReactElement } from 'react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  type?: string;
+  mb?: string;
+  noWrap?: boolean;
+  classAddon?: string;
+  children?: ReactNode;
+  className?: string;
+};
+
+const BaseButtons = ({
+                       type = 'justify-end',
+                       mb = '-mb-3',
+                       classAddon = 'mr-3 last:mr-0 mb-3',
+                       noWrap = false,
+                       children,
+                       className,
+                     }: Props) => {
+  return (
+      <div
+          className={`flex items-center ${type} ${className} ${mb} ${
+              noWrap ? 'flex-nowrap' : 'flex-wrap'
+          }`}
+      >
+        {Children.map(children, (child: ReactElement) =>
+            child
+                ? cloneElement(child as ReactElement<{ className?: string }>, {
+                  className: `${classAddon} ${(child.props as { className?: string }).className || ''}`,
+                })
+                : null,
+        )}
+      </div>
+  );
+};
+
+export default BaseButtons;
diff --git a/frontend/src/components/BaseDivider.tsx b/frontend/src/components/BaseDivider.tsx
new file mode 100644
index 0000000..ac56fa6
--- /dev/null
+++ b/frontend/src/components/BaseDivider.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { useAppSelector } from '../stores/hooks';
+type Props = {
+  navBar?: boolean
+}
+
+export default function BaseDivider({ navBar = false }: Props) {
+  const borders = useAppSelector((state) => state.style.borders);
+  const classAddon = navBar
+    ? 'hidden lg:block lg:my-0.5 dark:border-dark-700'
+    : 'my-6 -mx-6 dark:border-dark-800'
+
+  return <hr className={`${classAddon} border-t ${borders} `} />
+}
diff --git a/frontend/src/components/BaseIcon.tsx b/frontend/src/components/BaseIcon.tsx
new file mode 100644
index 0000000..98ec891
--- /dev/null
+++ b/frontend/src/components/BaseIcon.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  path: string
+  w?: string
+  h?: string
+  fill?: string;
+  size?: string | number | null
+  className?: string
+  children?: ReactNode
+}
+
+export default function BaseIcon({
+  path,
+  fill,
+  w = 'w-6',
+  h = 'h-6',
+  size = null,
+  className = '',
+  children,
+}: Props) {
+  const iconSize = size ?? 16
+
+  return (
+    <span className={`inline-flex justify-center items-center ${w} ${h} ${className}`}>
+      <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} className="inline-block">
+        <path fill={fill || 'currentColor'} d={path} />
+      </svg>
+      {children}
+    </span>
+  )
+}
diff --git a/frontend/src/components/BigCalendar.tsx b/frontend/src/components/BigCalendar.tsx
new file mode 100644
index 0000000..a457be6
--- /dev/null
+++ b/frontend/src/components/BigCalendar.tsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import {
+    Calendar,
+    Views,
+    momentLocalizer,
+    SlotInfo,
+    EventProps,
+} from 'react-big-calendar';
+import moment from 'moment';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import ListActionsPopover from './ListActionsPopover';
+import Link from 'next/link';
+
+import { useAppSelector } from '../stores/hooks';
+import { hasPermission } from '../helpers/userPermissions';
+
+
+const localizer = momentLocalizer(moment);
+
+type TEvent = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+};
+
+type Props = {
+    events: any[];
+    handleDeleteAction: (id: string) => void;
+    handleCreateEventAction: (slotInfo: SlotInfo) => void;
+    onDateRangeChange: (range: { start: string; end: string }) => void;
+    entityName: string;
+    showField: string;
+    pathEdit?: string;
+    pathView?: string;
+    'start-data-key': string;
+    'end-data-key': string;
+};
+
+const BigCalendar = ({
+                         events,
+                         handleDeleteAction,
+                         handleCreateEventAction,
+                         onDateRangeChange,
+                         entityName,
+                         showField,
+                         pathEdit,
+                         pathView,
+                         'start-data-key': startDataKey,
+                         'end-data-key': endDataKey,
+                     }: Props) => {
+    const [myEvents, setMyEvents] = useState<TEvent[]>([]);
+    const prevRange = useRef<{ start: string; end: string } | null>(null);
+
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission =
+        currentUser &&
+        hasPermission(currentUser, `UPDATE_${entityName.toUpperCase()}`);
+    const hasCreatePermission =
+        currentUser &&
+        hasPermission(currentUser, `CREATE_${entityName.toUpperCase()}`);
+    
+
+    const { defaultDate, scrollToTime } = useMemo(
+        () => ({
+            defaultDate: new Date(),
+            scrollToTime: new Date(1970, 1, 1, 6),
+        }),
+        [],
+    );
+
+    useEffect(() => {
+        if (!events || !Array.isArray(events) || !events?.length) return;
+
+        const formattedEvents = events.map((event) => ({
+            ...event,
+            start: new Date(event[startDataKey]),
+            end: new Date(event[endDataKey]),
+            title: event[showField],
+        }));
+
+        setMyEvents(formattedEvents);
+    }, [endDataKey, events, startDataKey, showField]);
+
+    const onRangeChange = (
+        range: Date[] | { start: Date; end: Date },
+    ) => {
+        const newRange = { start: '', end: '' };
+        const format = 'YYYY-MM-DDTHH:mm';
+
+        if (Array.isArray(range)) {
+            newRange.start = moment(range[0]).format(format);
+            newRange.end = moment(range[range.length - 1]).format(format);
+        } else {
+            newRange.start = moment(range.start).format(format);
+            newRange.end = moment(range.end).format(format);
+        }
+
+        if (newRange.start === newRange.end) {
+            newRange.end = moment(newRange.end).add(1, 'days').format(format);
+        }
+
+        // check if the range fits in the previous range
+        if (
+            prevRange.current &&
+            prevRange.current.start <= newRange.start &&
+            prevRange.current.end >= newRange.end
+        ) {
+            return;
+        }
+
+        prevRange.current = { start: newRange.start, end: newRange.end };
+        onDateRangeChange(newRange);
+    };
+
+    return (
+        <div className='h-[600px] p-4'>
+            <Calendar
+                defaultDate={defaultDate}
+                defaultView={Views.MONTH}
+                events={myEvents}
+                localizer={localizer}
+                selectable={hasCreatePermission}
+                onSelectSlot={handleCreateEventAction}
+                onRangeChange={onRangeChange}
+                scrollToTime={scrollToTime}
+                components={{
+                    event: (props) => (
+                        <MyCustomEvent
+                            {...props}
+                            onDelete={handleDeleteAction}
+                            hasUpdatePermission={hasUpdatePermission}
+                            pathEdit ={pathEdit}
+                            pathView={pathView}
+                        />
+                    ),
+                }}
+            />
+        </div>
+    );
+};
+
+const MyCustomEvent = (
+    props: {
+        onDelete: (id: string) => void;
+        hasUpdatePermission: boolean;
+        pathEdit?: string;
+        pathView?: string;
+    } & EventProps<TEvent>,
+) => {
+    const { onDelete, hasUpdatePermission, title, event, pathEdit, pathView } = props;
+
+    return (
+        <div className={'flex items-center justify-between relative'}>
+            <Link
+                href={`${pathView}${event.id}`}
+                className={'text-ellipsis overflow-hidden grow'}
+            >
+                {title}
+            </Link>
+            <ListActionsPopover
+                className={'w-2 h-2 text-white'}
+                iconClassName={'text-white w-5'}
+                itemId={event.id}
+                onDelete={onDelete}
+                pathEdit={`${pathEdit}${event.id}`}
+                pathView={`${pathView}${event.id}`}
+                hasUpdatePermission={hasUpdatePermission}
+            />
+        </div>
+    );
+};
+
+export default BigCalendar;
diff --git a/frontend/src/components/CardBox.tsx b/frontend/src/components/CardBox.tsx
new file mode 100644
index 0000000..988f162
--- /dev/null
+++ b/frontend/src/components/CardBox.tsx
@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react'
+import CardBoxComponentBody from './CardBoxComponentBody'
+import CardBoxComponentFooter from './CardBoxComponentFooter'
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  rounded?: string
+  flex?: string
+  className?: string
+  hasComponentLayout?: boolean
+  cardBoxClassName?: string
+  hasTable?: boolean
+  isHoverable?: boolean
+  isModal?: boolean
+  children?: ReactNode
+  footer?: ReactNode
+  isList?:boolean 
+  id?: string;
+  onClick?: (e: React.MouseEvent) => void
+}
+
+export default function CardBox({
+  rounded = 'rounded',
+  flex = 'flex-col',
+  className = '',
+  hasComponentLayout = false,
+  cardBoxClassName = '',
+  hasTable = false,
+  isHoverable = false,
+  isList = false,
+  isModal = false,
+  children,
+  footer,
+  id ='',
+  onClick,
+}: Props) {
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const componentClass = [
+    `flex  dark:border-dark-700 dark:bg-dark-900`,
+    className,
+    corners !== 'rounded-full'? corners : 'rounded-3xl',
+    flex,
+    isList ? '' : `${cardsStyle}`,
+    hasTable ? '' : `border-dark-700  dark:border-dark-700`,
+  ]
+
+  if (isHoverable) {
+    componentClass.push('hover:shadow-lg transition-shadow duration-500')
+  }
+
+  return React.createElement(
+    'div',
+    { className: componentClass.join(' '), onClick },
+    hasComponentLayout ? (
+      children
+    ) : (
+      <>
+        <CardBoxComponentBody id={id} noPadding={hasTable} className={cardBoxClassName}>{children}</CardBoxComponentBody>
+        {footer && <CardBoxComponentFooter>{footer}</CardBoxComponentFooter>}
+      </>
+    )
+  )
+}
diff --git a/frontend/src/components/CardBoxComponentBody.tsx b/frontend/src/components/CardBoxComponentBody.tsx
new file mode 100644
index 0000000..4c89896
--- /dev/null
+++ b/frontend/src/components/CardBoxComponentBody.tsx
@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  noPadding?: boolean
+  className?: string
+  children?: ReactNode
+  id?: string
+}
+
+export default function CardBoxComponentBody({ noPadding = false, className, children, id }: Props) {
+  return <div id={id} className={`flex-1 ${noPadding ? '' : 'p-6'} ${className}`}>{children}</div>
+}
diff --git a/frontend/src/components/CardBoxComponentEmpty.tsx b/frontend/src/components/CardBoxComponentEmpty.tsx
new file mode 100644
index 0000000..c71413e
--- /dev/null
+++ b/frontend/src/components/CardBoxComponentEmpty.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const CardBoxComponentEmpty = () => {
+  return (
+    <div className="text-center py-24 text-gray-500 dark:text-slate-400">
+      <p>Nothing&apos;s here…</p>
+    </div>
+  )
+}
+
+export default CardBoxComponentEmpty
diff --git a/frontend/src/components/CardBoxComponentFooter.tsx b/frontend/src/components/CardBoxComponentFooter.tsx
new file mode 100644
index 0000000..4b41bba
--- /dev/null
+++ b/frontend/src/components/CardBoxComponentFooter.tsx
@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  className?: string
+  children?: ReactNode
+}
+
+export default function CardBoxComponentFooter({ className, children }: Props) {
+  return <footer className={`p-6 ${className}`}>{children}</footer>
+}
diff --git a/frontend/src/components/CardBoxComponentTitle.tsx b/frontend/src/components/CardBoxComponentTitle.tsx
new file mode 100644
index 0000000..4f92def
--- /dev/null
+++ b/frontend/src/components/CardBoxComponentTitle.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  title: string
+  children?: ReactNode
+}
+
+const CardBoxComponentTitle = ({ title, children }: Props) => {
+  return (
+    <div className="flex items-center justify-center mb-3">
+      <h1 className="text-2xl">{title}</h1>
+      {children}
+    </div>
+  )
+}
+
+export default CardBoxComponentTitle
diff --git a/frontend/src/components/CardBoxModal.tsx b/frontend/src/components/CardBoxModal.tsx
new file mode 100644
index 0000000..27d5676
--- /dev/null
+++ b/frontend/src/components/CardBoxModal.tsx
@@ -0,0 +1,59 @@
+import { mdiClose } from '@mdi/js'
+import { ReactNode } from 'react'
+import type { ColorButtonKey } from '../interfaces'
+import BaseButton from './BaseButton'
+import BaseButtons from './BaseButtons'
+import CardBox from './CardBox'
+import CardBoxComponentTitle from './CardBoxComponentTitle'
+import OverlayLayer from './OverlayLayer'
+
+type Props = {
+  title: string
+  buttonColor: ColorButtonKey
+  buttonLabel: string
+  isActive: boolean
+  children?: ReactNode
+  onConfirm: () => void
+  onCancel?: () => void
+}
+
+const CardBoxModal = ({
+  title,
+  buttonColor,
+  buttonLabel,
+  isActive,
+  children,
+  onConfirm,
+  onCancel,
+}: Props) => {
+  if (!isActive) {
+    return null
+  }
+
+  const footer = (
+    <BaseButtons>
+      <BaseButton label={buttonLabel} color={buttonColor} onClick={onConfirm} />
+      {!!onCancel && <BaseButton label="Cancel" color={buttonColor} outline onClick={onCancel} />}
+    </BaseButtons>
+  )
+
+  return (
+    <OverlayLayer onClick={onCancel} className={onCancel ? 'cursor-pointer' : ''}>
+      <CardBox
+        className={`transition-transform shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50`}
+        isModal
+        footer={footer}
+      >
+        <CardBoxComponentTitle title={title}>
+          {!!onCancel && (
+            <BaseButton icon={mdiClose} color="whiteDark" onClick={onCancel} small roundedFull />
+          )}
+        </CardBoxComponentTitle>
+
+        <div className="space-y-3">{children}</div>
+      </CardBox>
+    </OverlayLayer>
+  )
+}
+
+export default CardBoxModal
diff --git a/frontend/src/components/ChartLineSample/config.ts b/frontend/src/components/ChartLineSample/config.ts
new file mode 100644
index 0000000..cacce92
--- /dev/null
+++ b/frontend/src/components/ChartLineSample/config.ts
@@ -0,0 +1,54 @@
+export const chartColors = {
+  default: {
+    primary: '#00D1B2',
+    info: '#209CEE',
+    danger: '#FF3860',
+  },
+}
+
+const randomChartData = (n: number) => {
+  const data = []
+
+  for (let i = 0; i < n; i++) {
+    data.push(Math.round(Math.random() * 200))
+  }
+
+  return data
+}
+
+const datasetObject = (color: string, points: number) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: 'rgba(255,255,255,0)',
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: randomChartData(points),
+    tension: 0.5,
+    cubicInterpolationMode: 'default',
+  }
+}
+
+export const sampleChartData = (points = 9) => {
+  const labels = []
+
+  for (let i = 1; i <= points; i++) {
+    labels.push(`0${i}`)
+  }
+
+  return {
+    labels,
+    datasets: [
+      datasetObject('primary', points),
+      datasetObject('info', points),
+      datasetObject('danger', points),
+    ],
+  }
+}
diff --git a/frontend/src/components/ChartLineSample/index.tsx b/frontend/src/components/ChartLineSample/index.tsx
new file mode 100644
index 0000000..c7f417b
--- /dev/null
+++ b/frontend/src/components/ChartLineSample/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+} from 'chart.js'
+import { Line } from 'react-chartjs-2'
+
+Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      display: false,
+    },
+    x: {
+      display: true,
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+}
+
+const ChartLineSample = ({ data }) => {
+  return <Line options={options} data={data} className="h-96" />
+}
+
+export default ChartLineSample
diff --git a/frontend/src/components/ClickOutside.tsx b/frontend/src/components/ClickOutside.tsx
new file mode 100644
index 0000000..1673e29
--- /dev/null
+++ b/frontend/src/components/ClickOutside.tsx
@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect, useRef, ReactNode, MutableRefObject } from 'react';
+
+interface ClickOutsideProps {
+    children?: ReactNode;
+    onClickOutside: () => void;
+    excludedElements: MutableRefObject<any>[];
+}
+
+const ClickOutside = ({ children, onClickOutside, excludedElements }: ClickOutsideProps) => {
+    const wrapperRef = useRef(null);
+
+    const handleClickOutside = useCallback(
+        (event) => {
+            if (
+                wrapperRef.current &&
+                !wrapperRef.current.contains(event.target) &&
+                !excludedElements.some((el) => el.current.contains(event.target))
+            ) {
+                onClickOutside();
+            }
+        },
+        [wrapperRef, onClickOutside, ...excludedElements],
+    );
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+
+    return <div ref={wrapperRef}>{children}</div>;
+};
+
+export default ClickOutside;
diff --git a/frontend/src/components/Companies/CardCompanies.tsx b/frontend/src/components/Companies/CardCompanies.tsx
new file mode 100644
index 0000000..1edc7eb
--- /dev/null
+++ b/frontend/src/components/Companies/CardCompanies.tsx
@@ -0,0 +1,280 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  companies: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardCompanies = ({
+  companies,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_COMPANIES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && companies.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  md:p-0 md:block  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link
+                    href={`/companies/companies-view/?id=${item.id}`}
+                    className={'cursor-pointer'}
+                >
+                  <ImageField
+                    name={'Avatar'}
+                    image={item.logo}
+                    className='w-12 h-12 md:w-full md:h-44 rounded-lg md:rounded-b-none overflow-hidden ring-1 ring-gray-900/10'
+                    imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
+                  />
+                  <p className={'px-6 py-2 font-semibold'}>{item.company_name}</p>
+                </Link>
+              
+
+              <div className='ml-auto  md:absolute md:top-0 md:right-0 '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/companies/companies-edit/?id=${item.id}`}
+                  pathView={`/companies/companies-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>CompanyName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.company_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>LegalName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.legal_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TaxNumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tax_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Website</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.website }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Phone</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.phone }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Email</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.email }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>AddressLine1</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.address_line1 }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>AddressLine2</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.address_line2 }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>City</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.city }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>State/Province</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.state }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PostalCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.postal_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Country</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.country }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Logo</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            <ImageField
+                                name={'Avatar'}
+                                image={item.logo}
+                                className='mx-auto w-8 h-8'
+                            />
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && companies.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardCompanies;
diff --git a/frontend/src/components/Companies/ListCompanies.tsx b/frontend/src/components/Companies/ListCompanies.tsx
new file mode 100644
index 0000000..ceec0e1
--- /dev/null
+++ b/frontend/src/components/Companies/ListCompanies.tsx
@@ -0,0 +1,203 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    companies: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListCompanies = ({ companies, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_COMPANIES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && companies.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                            <ImageField
+                                  name={'Avatar'}
+                                  image={item.logo}
+                                  className='w-24 h-24 rounded-l overflow-hidden hidden md:block'
+                                  imageClassName={'rounded-l rounded-r-none h-full object-cover'}
+                            />
+                          
+                          <Link
+                              href={`/companies/companies-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>CompanyName</p>
+                                <p className={'line-clamp-2'}>{ item.company_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>LegalName</p>
+                                <p className={'line-clamp-2'}>{ item.legal_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TaxNumber</p>
+                                <p className={'line-clamp-2'}>{ item.tax_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Website</p>
+                                <p className={'line-clamp-2'}>{ item.website }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Phone</p>
+                                <p className={'line-clamp-2'}>{ item.phone }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Email</p>
+                                <p className={'line-clamp-2'}>{ item.email }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>AddressLine1</p>
+                                <p className={'line-clamp-2'}>{ item.address_line1 }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>AddressLine2</p>
+                                <p className={'line-clamp-2'}>{ item.address_line2 }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>City</p>
+                                <p className={'line-clamp-2'}>{ item.city }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>State/Province</p>
+                                <p className={'line-clamp-2'}>{ item.state }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PostalCode</p>
+                                <p className={'line-clamp-2'}>{ item.postal_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Country</p>
+                                <p className={'line-clamp-2'}>{ item.country }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Logo</p>
+                                <ImageField
+                                  name={'Avatar'}
+                                  image={item.logo}
+                                  className='mx-auto w-8 h-8'
+                                />
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/companies/companies-edit/?id=${item.id}`}
+                              pathView={`/companies/companies-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && companies.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListCompanies
\ No newline at end of file
diff --git a/frontend/src/components/Companies/TableCompanies.tsx b/frontend/src/components/Companies/TableCompanies.tsx
new file mode 100644
index 0000000..2a305bf
--- /dev/null
+++ b/frontend/src/components/Companies/TableCompanies.tsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/companies/companiesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureCompaniesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import CardCompanies from './CardCompanies';
+
+
+const perPage =  10 
+
+const TableSampleCompanies = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { companies, loading, count, notify: companiesNotify, refetch } = useAppSelector((state) => state.companies)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (companiesNotify.showNotification) {
+          notify(companiesNotify.typeNotification, companiesNotify.textNotification);
+      }
+  }, [companiesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `companies`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={companies ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {companies && Array.isArray(companies) && !showGrid && (
+            <CardCompanies
+                companies={companies}
+                loading={loading}
+                onDelete={handleDeleteModalAction}
+                currentPage={currentPage}
+                numPages={numPages}
+                onPageChange={onPageChange}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleCompanies
diff --git a/frontend/src/components/Companies/configureCompaniesCols.tsx b/frontend/src/components/Companies/configureCompaniesCols.tsx
new file mode 100644
index 0000000..9caf234
--- /dev/null
+++ b/frontend/src/components/Companies/configureCompaniesCols.tsx
@@ -0,0 +1,285 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_COMPANIES')
+    
+    return [
+        
+        {
+            field: 'company_name',
+            headerName: 'CompanyName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'legal_name',
+            headerName: 'LegalName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'tax_number',
+            headerName: 'TaxNumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'website',
+            headerName: 'Website',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'phone',
+            headerName: 'Phone',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'email',
+            headerName: 'Email',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'address_line1',
+            headerName: 'AddressLine1',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'address_line2',
+            headerName: 'AddressLine2',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'city',
+            headerName: 'City',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'state',
+            headerName: 'State/Province',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'postal_code',
+            headerName: 'PostalCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'country',
+            headerName: 'Country',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'logo',
+            headerName: 'Logo',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <ImageField
+                name={'Avatar'}
+                image={params?.row?.logo}
+                className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
+              />
+            ),
+          
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/companies/companies-edit/?id=${params?.row?.id}`}
+                      pathView={`/companies/companies-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/DataGridMultiSelect.tsx b/frontend/src/components/DataGridMultiSelect.tsx
new file mode 100644
index 0000000..bb82434
--- /dev/null
+++ b/frontend/src/components/DataGridMultiSelect.tsx
@@ -0,0 +1,55 @@
+import { GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-grid';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { MenuItem, Select } from '@mui/material';
+
+interface Props {
+  entityName: string;
+}
+
+const DataGridMultiSelect = (props: GridRenderEditCellParams & Props) => {
+  const { id, value, field, entityName } = props;
+  const apiRef = useGridApiContext();
+  const [options, setOptions] = useState([]);
+
+  async function callApi(entityName: string) {
+    const data = await axios(`/${entityName}/autocomplete?limit=100`);
+    return data.data;
+  }
+
+  useEffect(() => {
+    callApi(entityName).then((data) => {
+      setOptions(data);
+    });
+  }, []);
+
+  const handleChange = (event) => {
+    const eventValue = event.target.value; // The new value entered by the user
+
+    const newValue =
+      typeof eventValue === 'string' ? value.split(',') : eventValue;
+
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: newValue.filter((x) => x !== ''),
+    });
+  };
+
+  return (
+    <Select
+      multiple
+      value={value ?? []}
+      onChange={handleChange}
+      sx={{ width: '100%' }}
+    >
+      {options.map((option) => (
+        <MenuItem key={option.id} value={option.id}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default DataGridMultiSelect;
diff --git a/frontend/src/components/Departments/CardDepartments.tsx b/frontend/src/components/Departments/CardDepartments.tsx
new file mode 100644
index 0000000..d0749aa
--- /dev/null
+++ b/frontend/src/components/Departments/CardDepartments.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  departments: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardDepartments = ({
+  departments,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DEPARTMENTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && departments.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/departments/departments-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.department_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/departments/departments-edit/?id=${item.id}`}
+                  pathView={`/departments/departments-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DepartmentName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.department_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DepartmentCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.department_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Manager</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.manager) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && departments.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardDepartments;
diff --git a/frontend/src/components/Departments/ListDepartments.tsx b/frontend/src/components/Departments/ListDepartments.tsx
new file mode 100644
index 0000000..c0a1e8d
--- /dev/null
+++ b/frontend/src/components/Departments/ListDepartments.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    departments: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListDepartments = ({ departments, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DEPARTMENTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && departments.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/departments/departments-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DepartmentName</p>
+                                <p className={'line-clamp-2'}>{ item.department_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DepartmentCode</p>
+                                <p className={'line-clamp-2'}>{ item.department_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Manager</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.manager) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/departments/departments-edit/?id=${item.id}`}
+                              pathView={`/departments/departments-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && departments.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListDepartments
\ No newline at end of file
diff --git a/frontend/src/components/Departments/TableDepartments.tsx b/frontend/src/components/Departments/TableDepartments.tsx
new file mode 100644
index 0000000..b4496ba
--- /dev/null
+++ b/frontend/src/components/Departments/TableDepartments.tsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/departments/departmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureDepartmentsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import ListDepartments from './ListDepartments';
+
+
+const perPage =  10 
+
+const TableSampleDepartments = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { departments, loading, count, notify: departmentsNotify, refetch } = useAppSelector((state) => state.departments)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (departmentsNotify.showNotification) {
+          notify(departmentsNotify.typeNotification, departmentsNotify.textNotification);
+      }
+  }, [departmentsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `departments`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={departments ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {departments && Array.isArray(departments) && !showGrid && (
+            <ListDepartments
+                departments={departments}
+                loading={loading}
+                onDelete={handleDeleteModalAction}
+                currentPage={currentPage}
+                numPages={numPages}
+                onPageChange={onPageChange}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleDepartments
diff --git a/frontend/src/components/Departments/configureDepartmentsCols.tsx b/frontend/src/components/Departments/configureDepartmentsCols.tsx
new file mode 100644
index 0000000..f5e158f
--- /dev/null
+++ b/frontend/src/components/Departments/configureDepartmentsCols.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_DEPARTMENTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'department_name',
+            headerName: 'DepartmentName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'department_code',
+            headerName: 'DepartmentCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'manager',
+            headerName: 'Manager',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/departments/departments-edit/?id=${params?.row?.id}`}
+                      pathView={`/departments/departments-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/DevModeBadge.tsx b/frontend/src/components/DevModeBadge.tsx
new file mode 100644
index 0000000..bc238c4
--- /dev/null
+++ b/frontend/src/components/DevModeBadge.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import useDevCompilationStatus from '../hooks/useDevCompilationStatus';
+const DevModeBadge: React.FC = () => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const compilationStatus = useDevCompilationStatus();
+
+    const [badgeStyles, setBadgeStyles] = useState<React.CSSProperties>({
+        position: 'fixed',
+        bottom: '20px',
+        left: '70px',
+        background: 'rgba(0, 0, 0, 0.85)',
+        color: 'white',
+        padding: '15px',
+        borderRadius: '8px',
+        fontFamily: 'sans-serif',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        textAlign: 'left',
+        zIndex: 2147483647,
+        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
+        whiteSpace: 'pre-wrap',
+        transition: 'width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), padding 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out', // Improved transition for width
+        opacity: 0,
+        pointerEvents: 'none',
+        width: '340px',
+        maxWidth: '340px',
+        height: 'auto',
+        overflow: 'hidden',
+        cursor: 'pointer',
+    });
+
+    const fullText = `🚧 Your app is running in development mode.
+Current request is compiling and may take a few moments.
+
+💡 Tip: Set up a stable environment to run your app in production mode—pages will load instantly without compilation delays.`;
+
+    const collapsedText = '🚧 DEV stage';
+
+    useEffect(() => {
+        if (compilationStatus === 'ready') {
+            setIsCollapsed(true);
+        } else {
+            setIsCollapsed(false);
+        }
+
+    }, [compilationStatus]);
+
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev_stage') {
+            setIsVisible(true);
+
+            setBadgeStyles(prev => ({
+                ...prev,
+                opacity: 1,
+                width: '120px',
+                maxWidth: '120px',
+                padding: '6px 10px',
+                borderRadius: '18px',
+                whiteSpace: 'nowrap',
+                fontSize: '12px',
+                cursor: 'pointer',
+                pointerEvents: 'auto',
+            }));
+
+        } else {
+            setIsVisible(false);
+            setBadgeStyles(prev => ({ ...prev, opacity: 0 }));
+        }
+    }, []);
+
+    useEffect(() => {
+        if (!isVisible) return;
+
+        if (isCollapsed) {
+            setBadgeStyles(prev => ({
+                ...prev,
+                width: '140px',
+                maxWidth: '160px',
+                padding: '6px 20px',
+                borderRadius: '18px',
+                whiteSpace: 'nowrap',
+                fontSize: '12px',
+            }));
+        } else {
+            setBadgeStyles(prev => ({
+                ...prev,
+                width: '340px',
+                maxWidth: '340px',
+                padding: '15px',
+                borderRadius: '8px',
+                whiteSpace: 'pre-wrap',
+                fontSize: '14px',
+            }));
+        }
+    }, [isCollapsed, isVisible]);
+
+    const handleToggleCollapse = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsCollapsed(prev => !prev);
+    };
+
+    if (!isVisible) {
+        return null;
+    }
+
+    return (
+        <div style={badgeStyles} onClick={isCollapsed ? handleToggleCollapse : undefined}>
+            <button
+                onClick={handleToggleCollapse}
+                style={{
+                    position: 'absolute',
+                    top: isCollapsed ? '3px' : '5px',
+                    right: isCollapsed ? '2px' : '5px',
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: isCollapsed ? '10px' : '18px',
+                    cursor: 'pointer',
+                    padding: '2px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    lineHeight: '1',
+                    width: '24px',
+                    height: isCollapsed ? '24px' : '24px',
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                    transition: 'background-color 0.2s ease, font-size 0.2s ease, width 0.2s ease, height 0.2s ease',
+                }}
+                aria-label={isCollapsed ? "Expand message" : "Collapse message"}
+            >
+                {isCollapsed ? '+' : '×'}
+            </button>
+
+            {!isCollapsed && (
+                <div style={{ marginRight: '20px' }}>
+                    {fullText}
+                </div>
+            )}
+            {isCollapsed && (
+                <div style={{ marginRight: '10px' }}>
+                    {collapsedText}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DevModeBadge;
diff --git a/frontend/src/components/Document_links/CardDocument_links.tsx b/frontend/src/components/Document_links/CardDocument_links.tsx
new file mode 100644
index 0000000..c390cce
--- /dev/null
+++ b/frontend/src/components/Document_links/CardDocument_links.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  document_links: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardDocument_links = ({
+  document_links,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENT_LINKS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && document_links.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/document_links/document_links-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.source_reference}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/document_links/document_links-edit/?id=${item.id}`}
+                  pathView={`/document_links/document_links-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Document</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.documentsOneListFormatter(item.document) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>SourceType</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.source_type }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>SourceReference</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.source_reference }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Notes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && document_links.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardDocument_links;
diff --git a/frontend/src/components/Document_links/ListDocument_links.tsx b/frontend/src/components/Document_links/ListDocument_links.tsx
new file mode 100644
index 0000000..c9417e4
--- /dev/null
+++ b/frontend/src/components/Document_links/ListDocument_links.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    document_links: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListDocument_links = ({ document_links, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENT_LINKS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && document_links.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/document_links/document_links-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Document</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.documentsOneListFormatter(item.document) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>SourceType</p>
+                                <p className={'line-clamp-2'}>{ item.source_type }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>SourceReference</p>
+                                <p className={'line-clamp-2'}>{ item.source_reference }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Notes</p>
+                                <p className={'line-clamp-2'}>{ item.notes }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/document_links/document_links-edit/?id=${item.id}`}
+                              pathView={`/document_links/document_links-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && document_links.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListDocument_links
\ No newline at end of file
diff --git a/frontend/src/components/Document_links/TableDocument_links.tsx b/frontend/src/components/Document_links/TableDocument_links.tsx
new file mode 100644
index 0000000..b063a7c
--- /dev/null
+++ b/frontend/src/components/Document_links/TableDocument_links.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/document_links/document_linksSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureDocument_linksCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleDocument_links = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { document_links, loading, count, notify: document_linksNotify, refetch } = useAppSelector((state) => state.document_links)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (document_linksNotify.showNotification) {
+          notify(document_linksNotify.typeNotification, document_linksNotify.textNotification);
+      }
+  }, [document_linksNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `document_links`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={document_links ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleDocument_links
diff --git a/frontend/src/components/Document_links/configureDocument_linksCols.tsx b/frontend/src/components/Document_links/configureDocument_linksCols.tsx
new file mode 100644
index 0000000..bdcb240
--- /dev/null
+++ b/frontend/src/components/Document_links/configureDocument_linksCols.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_DOCUMENT_LINKS')
+    
+    return [
+        
+        {
+            field: 'document',
+            headerName: 'Document',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('documents'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'source_type',
+            headerName: 'SourceType',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'source_reference',
+            headerName: 'SourceReference',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'notes',
+            headerName: 'Notes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/document_links/document_links-edit/?id=${params?.row?.id}`}
+                      pathView={`/document_links/document_links-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Document_types/CardDocument_types.tsx b/frontend/src/components/Document_types/CardDocument_types.tsx
new file mode 100644
index 0000000..b98cb1c
--- /dev/null
+++ b/frontend/src/components/Document_types/CardDocument_types.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  document_types: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardDocument_types = ({
+  document_types,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENT_TYPES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && document_types.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/document_types/document_types-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.type_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/document_types/document_types-edit/?id=${item.id}`}
+                  pathView={`/document_types/document_types-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TypeName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.type_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TypeCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.type_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Module</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.module }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && document_types.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardDocument_types;
diff --git a/frontend/src/components/Document_types/ListDocument_types.tsx b/frontend/src/components/Document_types/ListDocument_types.tsx
new file mode 100644
index 0000000..396996b
--- /dev/null
+++ b/frontend/src/components/Document_types/ListDocument_types.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    document_types: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListDocument_types = ({ document_types, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENT_TYPES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && document_types.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/document_types/document_types-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TypeName</p>
+                                <p className={'line-clamp-2'}>{ item.type_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TypeCode</p>
+                                <p className={'line-clamp-2'}>{ item.type_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Module</p>
+                                <p className={'line-clamp-2'}>{ item.module }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/document_types/document_types-edit/?id=${item.id}`}
+                              pathView={`/document_types/document_types-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && document_types.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListDocument_types
\ No newline at end of file
diff --git a/frontend/src/components/Document_types/TableDocument_types.tsx b/frontend/src/components/Document_types/TableDocument_types.tsx
new file mode 100644
index 0000000..b24cd91
--- /dev/null
+++ b/frontend/src/components/Document_types/TableDocument_types.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/document_types/document_typesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureDocument_typesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleDocument_types = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { document_types, loading, count, notify: document_typesNotify, refetch } = useAppSelector((state) => state.document_types)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (document_typesNotify.showNotification) {
+          notify(document_typesNotify.typeNotification, document_typesNotify.textNotification);
+      }
+  }, [document_typesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `document_types`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={document_types ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleDocument_types
diff --git a/frontend/src/components/Document_types/configureDocument_typesCols.tsx b/frontend/src/components/Document_types/configureDocument_typesCols.tsx
new file mode 100644
index 0000000..dc3981b
--- /dev/null
+++ b/frontend/src/components/Document_types/configureDocument_typesCols.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_DOCUMENT_TYPES')
+    
+    return [
+        
+        {
+            field: 'type_name',
+            headerName: 'TypeName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'type_code',
+            headerName: 'TypeCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'module',
+            headerName: 'Module',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/document_types/document_types-edit/?id=${params?.row?.id}`}
+                      pathView={`/document_types/document_types-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Documents/CardDocuments.tsx b/frontend/src/components/Documents/CardDocuments.tsx
new file mode 100644
index 0000000..effd8a4
--- /dev/null
+++ b/frontend/src/components/Documents/CardDocuments.tsx
@@ -0,0 +1,250 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  documents: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardDocuments = ({
+  documents,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && documents.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/documents/documents-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.document_number}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/documents/documents-edit/?id=${item.id}`}
+                  pathView={`/documents/documents-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DocumentType</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.document_typesOneListFormatter(item.document_type) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DocumentNumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.document_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Title</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.title }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Priority</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.priority }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Owner</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.owner) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DocumentDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.document_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ReviewDueDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.review_due_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Summary</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.summary }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Files</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.files).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Tags</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tags }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && documents.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardDocuments;
diff --git a/frontend/src/components/Documents/ListDocuments.tsx b/frontend/src/components/Documents/ListDocuments.tsx
new file mode 100644
index 0000000..5a9b6c0
--- /dev/null
+++ b/frontend/src/components/Documents/ListDocuments.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    documents: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListDocuments = ({ documents, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DOCUMENTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && documents.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/documents/documents-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DocumentType</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.document_typesOneListFormatter(item.document_type) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DocumentNumber</p>
+                                <p className={'line-clamp-2'}>{ item.document_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Title</p>
+                                <p className={'line-clamp-2'}>{ item.title }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Priority</p>
+                                <p className={'line-clamp-2'}>{ item.priority }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Owner</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.owner) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DocumentDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.document_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ReviewDueDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.review_due_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Summary</p>
+                                <p className={'line-clamp-2'}>{ item.summary }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Files</p>
+                                {dataFormatter.filesFormatter(item.files).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Tags</p>
+                                <p className={'line-clamp-2'}>{ item.tags }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/documents/documents-edit/?id=${item.id}`}
+                              pathView={`/documents/documents-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && documents.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListDocuments
\ No newline at end of file
diff --git a/frontend/src/components/Documents/TableDocuments.tsx b/frontend/src/components/Documents/TableDocuments.tsx
new file mode 100644
index 0000000..e8aacdb
--- /dev/null
+++ b/frontend/src/components/Documents/TableDocuments.tsx
@@ -0,0 +1,509 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/documents/documentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureDocumentsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
+
+const perPage =  10 
+
+const TableSampleDocuments = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+    const [kanbanColumns, setKanbanColumns] = useState<Array<{id: string, label: string}> | null>(null);
+    const [kanbanFilters, setKanbanFilters] = useState('');
+  
+  const { documents, loading, count, notify: documentsNotify, refetch } = useAppSelector((state) => state.documents)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (documentsNotify.showNotification) {
+          notify(documentsNotify.typeNotification, documentsNotify.textNotification);
+      }
+  }, [documentsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+    useEffect(() => {
+      
+        
+      
+      setKanbanColumns([
+          
+          { id: "draft", label: "draft" },
+          
+          { id: "in_review", label: "in_review" },
+          
+          { id: "approved", label: "approved" },
+          
+          { id: "rejected", label: "rejected" },
+          
+          { id: "archived", label: "archived" },
+          
+      ]);
+      
+      
+    }, []);
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setKanbanFilters('');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+    setKanbanFilters(generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+      setKanbanFilters('');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `documents`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={documents ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+      
+      {!showGrid && kanbanColumns && (
+            <KanbanBoard
+                columnFieldName={'status'}
+                showFieldName={'document_number'}
+                entityName={'documents'}
+                filtersQuery={kanbanFilters}
+                deleteThunk={deleteItem}
+                updateThunk={update}
+                columns={kanbanColumns}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleDocuments
diff --git a/frontend/src/components/Documents/configureDocumentsCols.tsx b/frontend/src/components/Documents/configureDocumentsCols.tsx
new file mode 100644
index 0000000..063ed0e
--- /dev/null
+++ b/frontend/src/components/Documents/configureDocumentsCols.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_DOCUMENTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'document_type',
+            headerName: 'DocumentType',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('document_types'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'document_number',
+            headerName: 'DocumentNumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'title',
+            headerName: 'Title',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'priority',
+            headerName: 'Priority',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'owner',
+            headerName: 'Owner',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'document_date',
+            headerName: 'DocumentDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.document_date),
+          
+        },
+        
+        {
+            field: 'review_due_date',
+            headerName: 'ReviewDueDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.review_due_date),
+          
+        },
+        
+        {
+            field: 'summary',
+            headerName: 'Summary',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'files',
+            headerName: 'Files',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.files).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'tags',
+            headerName: 'Tags',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/documents/documents-edit/?id=${params?.row?.id}`}
+                      pathView={`/documents/documents-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/DragDropFilePicker.tsx b/frontend/src/components/DragDropFilePicker.tsx
new file mode 100644
index 0000000..821570d
--- /dev/null
+++ b/frontend/src/components/DragDropFilePicker.tsx
@@ -0,0 +1,124 @@
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import BaseIcon from './BaseIcon';
+import { mdiFileUploadOutline } from '@mdi/js';
+
+type Props = {
+  file: File | null;
+  setFile: (file: File) => void;
+  formats?: string;
+};
+
+const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
+  const [highlight, setHighlight] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const fileInput = React.createRef<HTMLInputElement>();
+
+  useEffect(() => {
+    if (!file && fileInput) fileInput.current.value = '';
+  }, [file, fileInput]);
+
+  function onFilesAdded(files: FileList | null) {
+    if (files && files[0]) {
+      const newFile = files[0];
+      const fileExtension = newFile.name.split('.').pop().toLowerCase();
+
+      if (formats.includes(fileExtension) || !formats) {
+        setFile(newFile);
+        setErrorMessage('');
+      } else {
+        setErrorMessage(`Allowed formats: ${formats}`);
+      }
+    }
+  }
+
+  function onDragOver(e) {
+    e.preventDefault();
+    setHighlight(true);
+  }
+
+  function onDragLeave() {
+    setHighlight(false);
+  }
+
+  function onDrop(e) {
+    e.preventDefault();
+
+    const files = e.dataTransfer.files;
+
+    onFilesAdded(files);
+    setHighlight(false);
+  }
+
+  const onClear = () => {
+    setFile(null);
+    setErrorMessage('');
+  };
+
+  return (
+    <div
+      className='flex items-center justify-center w-full mb-4'
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <label
+        htmlFor='dropzone-file'
+        className={`
+          flex flex-col items-center justify-center w-full h-64
+          border-2 border-dashed rounded-lg cursor-pointer
+          bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100
+          dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600
+          ${
+            highlight
+              ? 'border-pavitra-blue dark:border-pavitra-blue'
+              : 'border-pavitra-600'
+          }
+        `}
+      >
+        <div className='flex flex-col items-center justify-center pt-5 pb-6'>
+          <BaseIcon
+            path={mdiFileUploadOutline}
+            size={34}
+            className={`${
+              file ? 'text-pavitra-blue' : 'text-pavitra-600'
+            } mx-auto mb-2`}
+          />
+          {errorMessage && (
+            <p className='mb-2 text-sm text-red-600 dark:text-red-600'>
+              {errorMessage}
+            </p>
+          )}
+          {file ? (
+            <div className='px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden bg-gray-100 dark:bg-slate-800 border-gray-200 dark:border-slate-700 border rounded'>
+              <span className='text-ellipsis max-w-full line-clamp-1'>
+                {file.name}
+              </span>
+            </div>
+          ) : (
+            <>
+              <p className='mb-2 text-sm text-gray-500 dark:text-gray-400'>
+                <span className='font-semibold'>Click to upload</span> or drag
+                and drop
+              </p>
+              {formats && (
+                <p className='text-xs text-gray-500 dark:text-gray-400'>
+                  {formats}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+        <input
+          id='dropzone-file'
+          ref={fileInput}
+          type='file'
+          accept={formats}
+          className='hidden'
+          onChange={(e) => onFilesAdded(e.target.files)}
+        />
+      </label>
+    </div>
+  );
+};
+
+export default DragDropFilePicker;
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..93b2833
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,218 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { mdiAlertCircle } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+// Define the props and state interfaces
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  showStack: boolean;
+}
+
+// Class-based ErrorBoundary Component
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    // Define state variables
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      showStack: false,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    // Update state so the next render will show the fallback UI
+    return {
+      hasError: true,
+      error: error,
+    };
+  }
+
+  componentDidUpdate(
+      prevProps: Readonly<ErrorBoundaryProps>,
+      prevState: Readonly<ErrorBoundaryState>,
+      snapshot?: any,
+  ) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log('componentDidUpdate');
+    }
+  }
+
+  async componentWillUnmount() {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log('componentWillUnmount');
+      const response = await fetch('/api/logError', {
+        method: 'DELETE',
+      });
+
+      const data = await response.json();
+      console.log('Error logs cleared:', data);
+    }
+  }
+
+  async componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Update state with error details (always needed for UI)
+    this.setState({
+      errorInfo: errorInfo,
+    });
+
+    // Only perform logging in non-production environments
+    if (process.env.NODE_ENV !== 'production') {
+      console.log('Error caught in boundary:', error, errorInfo);
+
+      // Function to log errors to the server
+      const logErrorToServer = async () => {
+        try {
+          const response = await fetch('/api/logError', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              message: error.message,
+              stack: errorInfo.componentStack,
+            }),
+          });
+
+          const data = await response.json();
+          console.log('Error logged:', data);
+        } catch (err) {
+          console.error('Failed to log error:', err);
+        }
+      };
+
+      // Function to fetch logged errors (optional)
+      const fetchLoggedErrors = async () => {
+        try {
+          const response = await fetch('/api/logError');
+          const data = await response.json();
+          console.log('Fetched logs:', data);
+        } catch (err) {
+          console.error('Failed to fetch logs:', err);
+        }
+      };
+
+      await logErrorToServer();
+      await fetchLoggedErrors();
+    }
+  }
+
+  toggleStack = () => {
+    this.setState((prevState) => ({
+      showStack: !prevState.showStack,
+    }));
+  };
+
+  resetError = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      showStack: false,
+    });
+  };
+
+  tryAgain = async () => {
+    // Only clear error logs in non-production environments
+    if (process.env.NODE_ENV !== 'production') {
+      try {
+        const response = await fetch('/api/logError', {
+          method: 'DELETE',
+        });
+
+        const data = await response.json();
+        console.log('Error logs cleared:', data);
+      } catch (e) {
+        console.error('Failed to clear error logs:', e);
+      }
+    }
+
+    // Always reset the error state (needed for UI recovery)
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // Extract error details
+      const { error, errorInfo, showStack } = this.state;
+      const errorMessage = error?.message || 'An unexpected error occurred';
+      const stackTrace =
+          errorInfo?.componentStack || error?.stack || 'No stack trace available';
+
+      return (
+          <div className='flex items-center justify-center min-h-screen bg-pavitra-300'>
+            <div className='max-w-lg w-full p-8 bg-white rounded-lg shadow-sm'>
+              <div className='flex flex-col items-center text-center space-y-6'>
+                <div className='p-3 bg-pavitra-500 rounded-full flex items-center justify-center'>
+                  <BaseIcon
+                      path={mdiAlertCircle}
+                      size={32}
+                      className='text-pavitra-red'
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <h2 className='text-xl font-semibold text-pavitra-900'>
+                    Something went wrong
+                  </h2>
+                  <p className='text-pavitra-800'>
+                    We&apos;re sorry, but we encountered an unexpected error.
+                  </p>
+                </div>
+
+                <div className='w-full text-left p-4 bg-pavitra-400 rounded-md overflow-hidden'>
+                  <p className='font-mono text-sm text-pavitra-red break-words'>
+                    {errorMessage}
+                  </p>
+
+                  <div className='mt-4'>
+                    <button
+                        onClick={this.toggleStack}
+                        className='text-xs text-pavitra-800 flex items-center gap-1'
+                    >
+                      <span>{showStack ? 'Hide' : 'Show'} stack trace</span>
+                      <span className='text-xs'>{showStack ? '▲' : '▼'}</span>
+                    </button>
+
+                    {showStack && (
+                        <pre className='mt-2 p-3 bg-pavitra-500 rounded text-xs font-mono text-pavitra-900 overflow-x-auto max-h-64'>
+                      {stackTrace}
+                    </pre>
+                    )}
+                  </div>
+                </div>
+
+                <div className='space-y-4 w-full'>
+                  <button
+                      className='w-full py-2 px-4 bg-pavitra-blue hover:bg-pavitra-900 text-white rounded-md transition-colors'
+                      onClick={this.tryAgain}
+                  >
+                    Try Again
+                  </button>
+
+                  <button
+                      className='w-full py-2 px-4 border border-pavitra-600 text-pavitra-800 hover:bg-pavitra-400 rounded-md transition-colors'
+                      onClick={this.resetError}
+                  >
+                    Go Back
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/components/FooterBar.tsx b/frontend/src/components/FooterBar.tsx
new file mode 100644
index 0000000..0acc9c5
--- /dev/null
+++ b/frontend/src/components/FooterBar.tsx
@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react'
+import { containerMaxW } from '../config'
+import Logo from './Logo'
+
+type Props = {
+  children?: ReactNode
+}
+
+export default function FooterBar({ children }: Props) {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className={`py-2 px-6 ${containerMaxW}`}>
+      <div className="block md:flex items-center justify-between">
+        <div className="text-center md:text-left mb-6 md:mb-0">
+          <b>
+            &copy;{year},{` `}
+            <a href="https://flatlogic.com/" rel="noreferrer" target="_blank">
+              Flatlogic
+            </a>
+            .
+          </b>
+          {` `}
+          {children}
+        </div>
+
+          <div className="flex item-center md:py-2 gap-4">
+              <a href="https://flatlogic.com/" rel="noreferrer" target="_blank">
+                  <Logo className="w-auto h-8 md:h-6 mx-auto" />
+              </a>
+          </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/frontend/src/components/FormCheckRadio.tsx b/frontend/src/components/FormCheckRadio.tsx
new file mode 100644
index 0000000..7a9bc31
--- /dev/null
+++ b/frontend/src/components/FormCheckRadio.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+  type: 'checkbox' | 'radio' | 'switch'
+  label?: string
+  className?: string
+}
+
+const FormCheckRadio = (props: Props) => {
+  return (
+    <label className={`${props.type} ${props.className}`}>
+      {props.children}
+      <span className="check" />
+      <span className="pl-2">{props.label}</span>
+    </label>
+  )
+}
+
+export default FormCheckRadio
diff --git a/frontend/src/components/FormCheckRadioGroup.tsx b/frontend/src/components/FormCheckRadioGroup.tsx
new file mode 100644
index 0000000..90d98e0
--- /dev/null
+++ b/frontend/src/components/FormCheckRadioGroup.tsx
@@ -0,0 +1,20 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react'
+
+type Props = {
+  isColumn?: boolean
+  children: ReactNode
+}
+
+const FormCheckRadioGroup = (props: Props) => {
+  return (
+    <div className={`flex justify-start flex-wrap -mb-3 ${props.isColumn ? 'flex-col' : ''}`}>
+      {Children.map(props.children, (child: ReactElement) =>
+          cloneElement(child as ReactElement<{ className?: string }>, {
+            className: `mr-6 mb-3 last:mr-0 ${(child.props as { className?: string }).className || ''}`,
+          }),
+      )}
+    </div>
+  )
+}
+
+export default FormCheckRadioGroup
diff --git a/frontend/src/components/FormField.tsx b/frontend/src/components/FormField.tsx
new file mode 100644
index 0000000..988ac39
--- /dev/null
+++ b/frontend/src/components/FormField.tsx
@@ -0,0 +1,80 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react'
+import BaseIcon from './BaseIcon'
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string
+  labelFor?: string
+  help?: string
+  icons?: string[] | null[]
+  isBorderless?: boolean
+  isTransparent?: boolean
+  hasTextareaHeight?: boolean
+  children: ReactNode
+  disabled?: boolean
+  borderButtom?: boolean
+  diversity?: boolean
+  websiteBg?: boolean
+}
+
+const FormField = ({ icons = [], ...props }: Props) => {
+  const childrenCount = Children.count(props.children)
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgWebsiteColor = useAppSelector((state) => state.style.bgLayoutColor);
+  let elementWrapperClass = ''
+
+  switch (childrenCount) {
+    case 2:
+      elementWrapperClass = 'grid grid-cols-1 gap-3 md:grid-cols-2'
+      break
+    case 3:
+      elementWrapperClass = 'grid grid-cols-1 gap-3 md:grid-cols-3'
+  }
+
+  const controlClassName = [
+    `px-3 py-2 max-w-full border-gray-300 dark:border-dark-700 ${corners} w-full dark:placeholder-gray-400`,
+    `${focusRing}`,
+    props.hasTextareaHeight ? 'h-24' : 'h-12',
+    props.isBorderless ? 'border-0' : 'border',
+    props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? `  bg-white` : bgColor} dark:bg-dark-800`,
+    props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-dark-900 disabled' : '',
+    props.borderButtom ? `border-0 border-b ${props.diversity ? "border-gray-400" : " placeholder-white   border-gray-300/10 border-white "} rounded-none focus:ring-0` : '',
+  ].join(' ');
+
+  return (
+    <div className="mb-6 last:mb-0">
+      {props.label && (
+        <label
+          htmlFor={props.labelFor}
+          className={`block font-bold mb-2 ${props.labelFor ? 'cursor-pointer' : ''}`}
+        >
+          {props.label}
+        </label>
+      )}
+      <div className={`${elementWrapperClass}`}>
+        {Children.map(props.children, (child: ReactElement, index) => (
+          <div className="relative">
+            {cloneElement(child as ReactElement<{ className?: string }>, {
+                className: `${controlClassName} ${icons[index] ? 'pl-10' : ''}`,
+            })}
+            {icons[index] && (
+              <BaseIcon
+                path={icons[index]}
+                w="w-10"
+                h={props.hasTextareaHeight ? 'h-full' : 'h-12'}
+                className="absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-slate-400"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      {props.help && (
+          <div className='text-xs    text-gray-500 dark:text-dark-600 mt-1'>{props.help}</div>
+      )}
+    </div>
+  )
+}
+
+export default FormField
diff --git a/frontend/src/components/FormFilePicker.tsx b/frontend/src/components/FormFilePicker.tsx
new file mode 100644
index 0000000..4302edd
--- /dev/null
+++ b/frontend/src/components/FormFilePicker.tsx
@@ -0,0 +1,92 @@
+import {useEffect, useState} from 'react';
+import { ColorButtonKey } from '../interfaces';
+import BaseButton from './BaseButton';
+import FileUploader from "./Uploaders/UploadService";
+import { mdiReload } from '@mdi/js';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  icon?: string;
+  accept?: string;
+  color: ColorButtonKey;
+  isRoundIcon?: boolean;
+  path: string;
+  schema: object;
+  field: any;
+  form: any;
+};
+
+const FormFilePicker = ({ label, icon, accept, color, isRoundIcon,  path,
+                          schema,
+                          form,
+                          field, }: Props) => {
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  let cornersRight;
+  if (corners === 'rounded'){
+    cornersRight = 'rounded-r'
+  } else if (corners === 'rounded-lg'){
+    cornersRight = 'rounded-r-lg'
+  }else if (corners === 'rounded-full'){
+    cornersRight = 'rounded-r-3xl'
+  }else{
+    cornersRight = ''
+  }
+
+  useEffect(() => {
+    if (field.value) {
+      setFile(field.value[0]);
+    }
+  }, [field.value]);
+  const handleFileChange = async (event) => {
+    const file = event.currentTarget.files[0];
+    setFile(file);
+
+    FileUploader.validate(file, schema);
+    setLoading(true);
+    const remoteFile = await FileUploader.upload(path, file, schema);
+
+    form.setFieldValue(field.name, [{ ...remoteFile }]);
+    setLoading(false);
+  };
+
+  const showFilename = !isRoundIcon && file;
+
+  return (
+      <div className='flex items-stretch justify-start relative'>
+        <label className='inline-flex'>
+          <BaseButton
+              className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
+                  showFilename ? 'rounded-r-none' : ''
+              }`}
+              iconSize={isRoundIcon ? 24 : undefined}
+              label={isRoundIcon ? null : label}
+              icon={loading ? mdiReload : icon}
+              iconClassName={loading && 'animate-spin'}
+              color={color}
+              roundedFull={isRoundIcon}
+              asAnchor
+          />
+          <input
+              type='file'
+              className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
+              onChange={handleFileChange}
+              accept={accept}
+              disabled={loading}
+          />
+        </label>
+        {showFilename && !loading && (
+            <div className={` px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor}  dark:bg-slate-800 border-gray-200 dark:border-slate-700 border ${cornersRight} `}>
+          <span className='text-ellipsis max-w-full line-clamp-1'>
+            {file.name}
+          </span>
+            </div>
+        )}
+      </div>
+  );
+};
+
+export default FormFilePicker;
diff --git a/frontend/src/components/FormImagePicker.tsx b/frontend/src/components/FormImagePicker.tsx
new file mode 100644
index 0000000..7bc34ae
--- /dev/null
+++ b/frontend/src/components/FormImagePicker.tsx
@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { ColorButtonKey } from '../interfaces';
+import BaseButton from './BaseButton';
+import ImagesUploader from "./Uploaders/ImagesUploader";
+import FileUploader from './Uploaders/UploadService';
+import { mdiReload } from '@mdi/js';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  icon?: string;
+  accept?: string;
+  color: ColorButtonKey;
+  isRoundIcon?: boolean;
+  path: string;
+  schema: object;
+  field: any,
+  form: any,
+};
+
+const FormImagePicker = ({ label, icon, accept, color, isRoundIcon, path, schema, form, field }: Props) => {
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  let cornersRight;
+  if (corners === 'rounded'){
+    cornersRight = 'rounded-r'
+  } else if (corners === 'rounded-lg'){
+    cornersRight = 'rounded-r-lg'
+  }else if (corners === 'rounded-full'){
+    cornersRight = 'rounded-r-3xl'
+  }else{
+    cornersRight = ''
+  }
+
+  useEffect(() => {
+    if(field.value) {
+      setFile(field.value[0])
+    }
+  }, [field.value])
+  const handleFileChange = async (event) => {
+    const file = event.currentTarget.files[0]
+    setFile(file);
+
+    FileUploader.validate(file, schema);
+    setLoading(true);
+    const remoteFile = await FileUploader.upload(path, file, schema);
+
+    form.setFieldValue(field.name, [{...remoteFile}]);
+    setLoading(false);
+  };
+
+  const showFilename = !isRoundIcon && file;
+
+  return (
+      <div className='flex items-stretch justify-start relative'>
+        <label className='inline-flex'>
+          <BaseButton
+              className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
+                  showFilename ? 'rounded-r-none' : ''
+              }`}
+              iconSize={isRoundIcon ? 24 : undefined}
+              label={isRoundIcon ? null : label}
+              icon={loading ? mdiReload : icon}
+              iconClassName={loading && 'animate-spin'}
+              color={color}
+              roundedFull={isRoundIcon}
+              asAnchor
+          />
+          <input
+              type='file'
+              className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
+              onChange={handleFileChange}
+              accept={accept}
+              disabled={loading}
+          />
+        </label>
+        {showFilename && !loading && (
+            <div className={` ${cornersRight} px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor} dark:bg-slate-800 border-gray-200 dark:border-slate-700 border  `}>
+          <span className='text-ellipsis max-w-full line-clamp-1'>
+            {file.name}
+          </span>
+            </div>
+        )}
+      </div>
+  );
+};
+
+export default FormImagePicker;
diff --git a/frontend/src/components/Goods_receipt_lines/CardGoods_receipt_lines.tsx b/frontend/src/components/Goods_receipt_lines/CardGoods_receipt_lines.tsx
new file mode 100644
index 0000000..5ebecfa
--- /dev/null
+++ b/frontend/src/components/Goods_receipt_lines/CardGoods_receipt_lines.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  goods_receipt_lines: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardGoods_receipt_lines = ({
+  goods_receipt_lines,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_GOODS_RECEIPT_LINES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && goods_receipt_lines.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.quality_notes}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/goods_receipt_lines/goods_receipt_lines-edit/?id=${item.id}`}
+                  pathView={`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>GoodsReceipt</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.goods_receiptsOneListFormatter(item.goods_receipt) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>POLine</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_order_linesOneListFormatter(item.purchase_order_line) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Product</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.productsOneListFormatter(item.product) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>QuantityReceived</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity_received }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>QuantityAccepted</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity_accepted }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>QuantityRejected</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity_rejected }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>QualityNotes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quality_notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && goods_receipt_lines.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardGoods_receipt_lines;
diff --git a/frontend/src/components/Goods_receipt_lines/ListGoods_receipt_lines.tsx b/frontend/src/components/Goods_receipt_lines/ListGoods_receipt_lines.tsx
new file mode 100644
index 0000000..d580524
--- /dev/null
+++ b/frontend/src/components/Goods_receipt_lines/ListGoods_receipt_lines.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    goods_receipt_lines: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListGoods_receipt_lines = ({ goods_receipt_lines, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_GOODS_RECEIPT_LINES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && goods_receipt_lines.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>GoodsReceipt</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.goods_receiptsOneListFormatter(item.goods_receipt) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>POLine</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_order_linesOneListFormatter(item.purchase_order_line) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Product</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.productsOneListFormatter(item.product) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>QuantityReceived</p>
+                                <p className={'line-clamp-2'}>{ item.quantity_received }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>QuantityAccepted</p>
+                                <p className={'line-clamp-2'}>{ item.quantity_accepted }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>QuantityRejected</p>
+                                <p className={'line-clamp-2'}>{ item.quantity_rejected }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>QualityNotes</p>
+                                <p className={'line-clamp-2'}>{ item.quality_notes }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/goods_receipt_lines/goods_receipt_lines-edit/?id=${item.id}`}
+                              pathView={`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && goods_receipt_lines.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListGoods_receipt_lines
\ No newline at end of file
diff --git a/frontend/src/components/Goods_receipt_lines/TableGoods_receipt_lines.tsx b/frontend/src/components/Goods_receipt_lines/TableGoods_receipt_lines.tsx
new file mode 100644
index 0000000..332d168
--- /dev/null
+++ b/frontend/src/components/Goods_receipt_lines/TableGoods_receipt_lines.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/goods_receipt_lines/goods_receipt_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureGoods_receipt_linesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleGoods_receipt_lines = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { goods_receipt_lines, loading, count, notify: goods_receipt_linesNotify, refetch } = useAppSelector((state) => state.goods_receipt_lines)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (goods_receipt_linesNotify.showNotification) {
+          notify(goods_receipt_linesNotify.typeNotification, goods_receipt_linesNotify.textNotification);
+      }
+  }, [goods_receipt_linesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `goods_receipt_lines`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={goods_receipt_lines ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleGoods_receipt_lines
diff --git a/frontend/src/components/Goods_receipt_lines/configureGoods_receipt_linesCols.tsx b/frontend/src/components/Goods_receipt_lines/configureGoods_receipt_linesCols.tsx
new file mode 100644
index 0000000..627ea45
--- /dev/null
+++ b/frontend/src/components/Goods_receipt_lines/configureGoods_receipt_linesCols.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_GOODS_RECEIPT_LINES')
+    
+    return [
+        
+        {
+            field: 'goods_receipt',
+            headerName: 'GoodsReceipt',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('goods_receipts'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'purchase_order_line',
+            headerName: 'POLine',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_order_lines'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'product',
+            headerName: 'Product',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('products'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'quantity_received',
+            headerName: 'QuantityReceived',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'quantity_accepted',
+            headerName: 'QuantityAccepted',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'quantity_rejected',
+            headerName: 'QuantityRejected',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'quality_notes',
+            headerName: 'QualityNotes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/goods_receipt_lines/goods_receipt_lines-edit/?id=${params?.row?.id}`}
+                      pathView={`/goods_receipt_lines/goods_receipt_lines-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Goods_receipts/CardGoods_receipts.tsx b/frontend/src/components/Goods_receipts/CardGoods_receipts.tsx
new file mode 100644
index 0000000..0d2d20e
--- /dev/null
+++ b/frontend/src/components/Goods_receipts/CardGoods_receipts.tsx
@@ -0,0 +1,226 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  goods_receipts: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardGoods_receipts = ({
+  goods_receipts,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_GOODS_RECEIPTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && goods_receipts.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/goods_receipts/goods_receipts-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.grn_number}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/goods_receipts/goods_receipts-edit/?id=${item.id}`}
+                  pathView={`/goods_receipts/goods_receipts-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>GRNNumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.grn_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PurchaseOrder</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ReceivedBy</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.received_by) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Warehouse</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.warehousesOneListFormatter(item.warehouse) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ReceiptDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PostedDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.posted_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Remarks</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.remarks }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Attachments</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && goods_receipts.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardGoods_receipts;
diff --git a/frontend/src/components/Goods_receipts/ListGoods_receipts.tsx b/frontend/src/components/Goods_receipts/ListGoods_receipts.tsx
new file mode 100644
index 0000000..12453d9
--- /dev/null
+++ b/frontend/src/components/Goods_receipts/ListGoods_receipts.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    goods_receipts: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListGoods_receipts = ({ goods_receipts, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_GOODS_RECEIPTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && goods_receipts.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/goods_receipts/goods_receipts-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>GRNNumber</p>
+                                <p className={'line-clamp-2'}>{ item.grn_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PurchaseOrder</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ReceivedBy</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.received_by) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Warehouse</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.warehousesOneListFormatter(item.warehouse) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ReceiptDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.receipt_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PostedDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.posted_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Remarks</p>
+                                <p className={'line-clamp-2'}>{ item.remarks }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Attachments</p>
+                                {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/goods_receipts/goods_receipts-edit/?id=${item.id}`}
+                              pathView={`/goods_receipts/goods_receipts-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && goods_receipts.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListGoods_receipts
\ No newline at end of file
diff --git a/frontend/src/components/Goods_receipts/TableGoods_receipts.tsx b/frontend/src/components/Goods_receipts/TableGoods_receipts.tsx
new file mode 100644
index 0000000..ce2e8dd
--- /dev/null
+++ b/frontend/src/components/Goods_receipts/TableGoods_receipts.tsx
@@ -0,0 +1,489 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/goods_receipts/goods_receiptsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureGoods_receiptsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import BigCalendar from "../BigCalendar";
+import { SlotInfo } from 'react-big-calendar';
+
+
+const perPage =  100 
+
+const TableSampleGoods_receipts = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { goods_receipts, loading, count, notify: goods_receiptsNotify, refetch } = useAppSelector((state) => state.goods_receipts)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (goods_receiptsNotify.showNotification) {
+          notify(goods_receiptsNotify.typeNotification, goods_receiptsNotify.textNotification);
+      }
+  }, [goods_receiptsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+  const handleCreateEventAction = ({ start, end }: SlotInfo) => {
+      router.push(
+          `/goods_receipts/goods_receipts-new?dateRangeStart=${start.toISOString()}&dateRangeEnd=${end.toISOString()}`,
+      );
+  };
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `goods_receipts`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={goods_receipts ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {!showGrid && (
+            <BigCalendar
+              events={goods_receipts}
+              showField={'grn_number'}
+              start-data-key={'receipt_date'}
+              end-data-key={'posted_date'}
+              handleDeleteAction={handleDeleteModalAction}
+              pathEdit={`/goods_receipts/goods_receipts-edit/?id=`}
+              pathView={`/goods_receipts/goods_receipts-view/?id=`}
+              handleCreateEventAction={handleCreateEventAction}
+              onDateRangeChange={(range) => {
+                  loadData(0,`&calendarStart=${range.start}&calendarEnd=${range.end}`);
+              }}
+              entityName={'goods_receipts'}
+          />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleGoods_receipts
diff --git a/frontend/src/components/Goods_receipts/configureGoods_receiptsCols.tsx b/frontend/src/components/Goods_receipts/configureGoods_receiptsCols.tsx
new file mode 100644
index 0000000..9c9e851
--- /dev/null
+++ b/frontend/src/components/Goods_receipts/configureGoods_receiptsCols.tsx
@@ -0,0 +1,263 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_GOODS_RECEIPTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'grn_number',
+            headerName: 'GRNNumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'purchase_order',
+            headerName: 'PurchaseOrder',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_orders'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'received_by',
+            headerName: 'ReceivedBy',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'warehouse',
+            headerName: 'Warehouse',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('warehouses'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'receipt_date',
+            headerName: 'ReceiptDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.receipt_date),
+          
+        },
+        
+        {
+            field: 'posted_date',
+            headerName: 'PostedDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.posted_date),
+          
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'remarks',
+            headerName: 'Remarks',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'attachments',
+            headerName: 'Attachments',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.attachments).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/goods_receipts/goods_receipts-edit/?id=${params?.row?.id}`}
+                      pathView={`/goods_receipts/goods_receipts-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/IconRounded.tsx b/frontend/src/components/IconRounded.tsx
new file mode 100644
index 0000000..fc45023
--- /dev/null
+++ b/frontend/src/components/IconRounded.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { ColorKey } from '../interfaces'
+import { colorsBgLight, colorsText } from '../colors'
+import BaseIcon from './BaseIcon'
+
+type Props = {
+  icon: string
+  color: ColorKey
+  w?: string
+  h?: string
+  bg?: boolean
+  className?: string
+}
+
+export default function IconRounded({
+  icon,
+  color,
+  w = 'w-12',
+  h = 'h-12',
+  bg = false,
+  className = '',
+}: Props) {
+  const classAddon = bg ? colorsBgLight[color] : `${colorsText[color]} bg-gray-50 dark:bg-slate-800`
+
+  return (
+    <BaseIcon
+      path={icon}
+      w={w}
+      h={h}
+      size="24"
+      className={`rounded-full ${classAddon} ${className}`}
+    />
+  )
+}
diff --git a/frontend/src/components/ImageField.tsx b/frontend/src/components/ImageField.tsx
new file mode 100644
index 0000000..7ad5b55
--- /dev/null
+++ b/frontend/src/components/ImageField.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable @next/next/no-img-element */
+// Why disabled:
+// avatars.dicebear.com provides svg avatars
+// next/image needs dangerouslyAllowSVG option for that
+
+import React, { ReactNode } from 'react';
+import { mdiImageOutline } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  name: string;
+  image?: object | null;
+  api?: string;
+  className?: string;
+  imageClassName?: string;
+  children?: ReactNode;
+};
+
+export default function ImageField({
+                                     name,
+                                     image,
+                                     className = '',
+                                     imageClassName = '',
+                                     children,
+                                   }: Props) {
+  const imageSrc = image && image[0] ? `${image[0].publicUrl}` : '';
+
+  return (
+      <div className={className}>
+        {imageSrc ? (
+            <img
+                src={imageSrc}
+                alt={name}
+                className={`rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
+            />
+        ) : (
+            <div className={'flex h-full bg-slate-100 dark:bg-dark-900/70'}>
+              <BaseIcon
+                  className='text-black dark:text-white'
+                  w='w-full'
+                  h='h-full'
+                  size={54}
+                  path={mdiImageOutline}
+              />
+            </div>
+        )}
+
+        {children}
+      </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/IntroGuide.tsx b/frontend/src/components/IntroGuide.tsx
new file mode 100644
index 0000000..e19f6a9
--- /dev/null
+++ b/frontend/src/components/IntroGuide.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Steps, Hints } from 'intro.js-react';
+import { useRouter } from 'next/router';
+interface IntroGuideProps {
+  steps: Array<{
+    element: string;
+    intro: string;
+    position?: string;
+  }>;
+  disableInteraction?: boolean;
+  stepsEnabled: boolean;
+  stepsName: string;
+  onExit: () => void;
+}
+
+const IntroGuide: React.FC<IntroGuideProps> = ({
+  steps,
+  stepsEnabled,
+  onExit,
+  stepsName
+}) => {
+  const router = useRouter();
+  const handleStepChange = (stepIndex: number ) => {
+
+    if (stepIndex === 7 && stepsName === 'appSteps') { 
+      onExit();
+      router.push('/users/users-list/'); 
+    } else if (stepIndex === 2 && stepsName === 'usersSteps') { 
+      onExit();
+      router.push('/roles/roles-list/'); 
+    }
+  };
+
+  const handleExit = () => {
+    localStorage.setItem(`completed_${stepsName}`, 'true');
+    onExit();
+  };
+  return (
+    <>
+      <Steps
+        enabled={stepsEnabled}
+        steps={steps}
+        initialStep={0}
+        onExit={handleExit}
+        onChange={handleStepChange}
+        options={{
+          scrollToElement: true,
+          scrollPadding: 50,
+        }}
+      />
+    </>
+  );
+};
+
+export default IntroGuide;
\ No newline at end of file
diff --git a/frontend/src/components/Invoice_lines/CardInvoice_lines.tsx b/frontend/src/components/Invoice_lines/CardInvoice_lines.tsx
new file mode 100644
index 0000000..3ab723f
--- /dev/null
+++ b/frontend/src/components/Invoice_lines/CardInvoice_lines.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  invoice_lines: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardInvoice_lines = ({
+  invoice_lines,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_INVOICE_LINES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && invoice_lines.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/invoice_lines/invoice_lines-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.description}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/invoice_lines/invoice_lines-edit/?id=${item.id}`}
+                  pathView={`/invoice_lines/invoice_lines-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>VendorInvoice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.vendor_invoicesOneListFormatter(item.vendor_invoice) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Product</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.productsOneListFormatter(item.product) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Quantity</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>UnitPrice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.unit_price }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TaxRate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tax_rate }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>LineTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.line_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && invoice_lines.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardInvoice_lines;
diff --git a/frontend/src/components/Invoice_lines/ListInvoice_lines.tsx b/frontend/src/components/Invoice_lines/ListInvoice_lines.tsx
new file mode 100644
index 0000000..b55451a
--- /dev/null
+++ b/frontend/src/components/Invoice_lines/ListInvoice_lines.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    invoice_lines: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListInvoice_lines = ({ invoice_lines, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_INVOICE_LINES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && invoice_lines.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/invoice_lines/invoice_lines-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>VendorInvoice</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.vendor_invoicesOneListFormatter(item.vendor_invoice) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Product</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.productsOneListFormatter(item.product) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Quantity</p>
+                                <p className={'line-clamp-2'}>{ item.quantity }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>UnitPrice</p>
+                                <p className={'line-clamp-2'}>{ item.unit_price }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TaxRate</p>
+                                <p className={'line-clamp-2'}>{ item.tax_rate }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>LineTotal</p>
+                                <p className={'line-clamp-2'}>{ item.line_total }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/invoice_lines/invoice_lines-edit/?id=${item.id}`}
+                              pathView={`/invoice_lines/invoice_lines-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && invoice_lines.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListInvoice_lines
\ No newline at end of file
diff --git a/frontend/src/components/Invoice_lines/TableInvoice_lines.tsx b/frontend/src/components/Invoice_lines/TableInvoice_lines.tsx
new file mode 100644
index 0000000..c48c4fe
--- /dev/null
+++ b/frontend/src/components/Invoice_lines/TableInvoice_lines.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/invoice_lines/invoice_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureInvoice_linesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleInvoice_lines = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { invoice_lines, loading, count, notify: invoice_linesNotify, refetch } = useAppSelector((state) => state.invoice_lines)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (invoice_linesNotify.showNotification) {
+          notify(invoice_linesNotify.typeNotification, invoice_linesNotify.textNotification);
+      }
+  }, [invoice_linesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `invoice_lines`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={invoice_lines ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleInvoice_lines
diff --git a/frontend/src/components/Invoice_lines/configureInvoice_linesCols.tsx b/frontend/src/components/Invoice_lines/configureInvoice_linesCols.tsx
new file mode 100644
index 0000000..a3ae68c
--- /dev/null
+++ b/frontend/src/components/Invoice_lines/configureInvoice_linesCols.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_INVOICE_LINES')
+    
+    return [
+        
+        {
+            field: 'vendor_invoice',
+            headerName: 'VendorInvoice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('vendor_invoices'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'product',
+            headerName: 'Product',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('products'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'quantity',
+            headerName: 'Quantity',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'unit_price',
+            headerName: 'UnitPrice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'tax_rate',
+            headerName: 'TaxRate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'line_total',
+            headerName: 'LineTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/invoice_lines/invoice_lines-edit/?id=${params?.row?.id}`}
+                      pathView={`/invoice_lines/invoice_lines-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/KanbanBoard/KanbanBoard.tsx b/frontend/src/components/KanbanBoard/KanbanBoard.tsx
new file mode 100644
index 0000000..84954b8
--- /dev/null
+++ b/frontend/src/components/KanbanBoard/KanbanBoard.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import KanbanColumn from './KanbanColumn';
+import { AsyncThunk } from '@reduxjs/toolkit';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+type Props = {
+  columns: Array<{id: string, label: string}>;
+  filtersQuery: string;
+  entityName: string;
+  columnFieldName: string;
+  showFieldName: string;
+  deleteThunk: AsyncThunk<any, any, any>;
+  updateThunk: AsyncThunk<any, any, any>;
+};
+
+const KanbanBoard = ({
+  columns,
+  entityName,
+  columnFieldName,
+  filtersQuery,
+  showFieldName,
+  deleteThunk,
+  updateThunk,
+}: Props) => {
+  return (
+    <div
+      className={
+        'pb-2 flex-grow min-h-[400px] flex-1 grid grid-rows-1 auto-cols-min grid-flow-col gap-x-3 overflow-y-hidden overflow-x-auto'
+      }
+    >
+      <DndProvider backend={HTML5Backend}>
+        {columns.map((column) => (
+          <div key={column.id}>
+            <KanbanColumn
+                entityName={entityName}
+                columnFieldName={columnFieldName}
+                showFieldName={showFieldName}
+                column={column}
+                filtersQuery={filtersQuery}
+                deleteThunk={deleteThunk}
+                updateThunk={updateThunk}
+            />
+          </div>
+        ))}
+      </DndProvider>
+    </div>
+  );
+};
+
+export default KanbanBoard;
diff --git a/frontend/src/components/KanbanBoard/KanbanCard.tsx b/frontend/src/components/KanbanBoard/KanbanCard.tsx
new file mode 100644
index 0000000..7655572
--- /dev/null
+++ b/frontend/src/components/KanbanBoard/KanbanCard.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import Link from 'next/link';
+import moment from 'moment';
+import ListActionsPopover from '../ListActionsPopover';
+import { DragSourceMonitor, useDrag } from 'react-dnd';
+
+type Props = {
+    item: any;
+    column: { id: string; label: string };
+    entityName: string;
+    showFieldName: string;
+    setItemIdToDelete: (id: string) => void;
+};
+
+const KanbanCard = ({
+                        item,
+                        entityName,
+                        showFieldName,
+                        setItemIdToDelete,
+                        column,
+                    }: Props) => {
+    const [{ isDragging }, drag] = useDrag(
+        () => ({
+            type: 'box',
+            item: { item, column },
+            collect: (monitor: DragSourceMonitor) => ({
+                isDragging: monitor.isDragging(),
+            }),
+        }),
+        [item],
+    );
+
+    return (
+        <div
+            ref={drag}
+            className={
+                `bg-gray-50 dark:bg-dark-800 rounded-md space-y-2 p-4 relative ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`
+            }
+        >
+            <div className={'flex items-center justify-between'}>
+                <Link
+                    href={`/${entityName}/${entityName}-view/?id=${item.id}`}
+                    className={'text-base font-semibold'}
+                >
+                    {item[showFieldName] ?? 'No data'}
+                </Link>
+            </div>
+            <div className={'flex items-center justify-between'}>
+                <p>{moment(item.createdAt).format('MMM DD hh:mm a')}</p>
+                <ListActionsPopover
+                    itemId={item.id}
+                    pathEdit={`/${entityName}/${entityName}-edit/?id=${item.id}`}
+                    pathView={`/${entityName}/${entityName}-view/?id=${item.id}`}
+                    onDelete={(id) => setItemIdToDelete(id)}
+                    hasUpdatePermission={true}
+                    className={'w-2 h-2 text-white'}
+                    iconClassName={'w-5'}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default KanbanCard;
diff --git a/frontend/src/components/KanbanBoard/KanbanColumn.tsx b/frontend/src/components/KanbanBoard/KanbanColumn.tsx
new file mode 100644
index 0000000..425a0d3
--- /dev/null
+++ b/frontend/src/components/KanbanBoard/KanbanColumn.tsx
@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import Axios from 'axios';
+import CardBox from '../CardBox';
+import CardBoxModal from '../CardBoxModal';
+import { AsyncThunk } from '@reduxjs/toolkit';
+import { useDrop } from 'react-dnd';
+import KanbanCard from './KanbanCard';
+
+type Props = {
+    column: { id: string; label: string };
+    entityName: string;
+    columnFieldName: string;
+    showFieldName: string;
+    filtersQuery: any;
+    deleteThunk: AsyncThunk<any, any, any>;
+    updateThunk: AsyncThunk<any, any, any>;
+};
+
+type DropResult = {
+    sourceColumn: { id: string; label: string };
+    item: any;
+};
+
+const perPage = 10;
+
+const KanbanColumn = ({
+                          column,
+                          entityName,
+                          columnFieldName,
+                          showFieldName,
+                          filtersQuery,
+                          deleteThunk,
+                          updateThunk,
+                      }: Props) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [count, setCount] = useState(0);
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [itemIdToDelete, setItemIdToDelete] = useState('');
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const listInnerRef = useRef<HTMLDivElement | null>(null);
+    const dispatch = useAppDispatch();
+
+    const [{ dropResult }, drop] = useDrop<
+        {
+            item: any;
+            column: {
+                id: string;
+                label: string;
+            };
+        },
+        unknown,
+        {
+            dropResult: DropResult;
+        }
+    >(
+        () => ({
+            accept: 'box',
+            drop: ({
+                       item,
+                       column: sourceColumn,
+                   }: {
+                item: any;
+                column: { id: string; label: string };
+            }) => {
+                if (sourceColumn.id === column.id) return;
+
+                dispatch(
+                    updateThunk({
+                        id: item.id,
+                        data: {
+                            [columnFieldName]: column.id,
+                        },
+                    }),
+                ).then((res) => {
+                    setData((prevState) => (prevState ? [...prevState, item] : [item]));
+                    setCount((prevState) => prevState + 1);
+                });
+
+                return { sourceColumn, item };
+            },
+            collect: (monitor) => ({
+                dropResult: monitor.getDropResult(),
+            }),
+        }),
+        [],
+    );
+
+    const loadData = useCallback(
+        (page: number, filters = '') => {
+            const query = `?page=${page}&limit=${perPage}&field=createdAt&sort=desc&${columnFieldName}=${column.id}&${filters}`;
+            setLoading(true);
+            Axios.get(`${entityName}${query}`)
+                .then((res) => {
+                    setData((prevState) =>
+                        page === 0 ? res.data.rows : [...prevState, ...res.data.rows],
+                    );
+                    setCount(res.data.count);
+                    setCurrentPage(page);
+                })
+                .catch((err) => {
+                    console.error(err);
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        },
+        [currentUser, column],
+    );
+
+    useEffect(() => {
+        if (!currentUser) return;
+        loadData(0, filtersQuery);
+    }, [currentUser, loadData, filtersQuery]);
+
+    useEffect(() => {
+        loadData(0, filtersQuery);
+    }, [loadData, filtersQuery]);
+
+    useEffect(() => {
+        if (dropResult?.sourceColumn && dropResult.sourceColumn.id === column.id) {
+            setData((prevState) =>
+                prevState.filter((item) => item.id !== dropResult.item.id),
+            );
+            setCount((prevState) => prevState - 1);
+        }
+    }, [dropResult]);
+
+    const onScroll = () => {
+        if (listInnerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
+            if (Math.floor(scrollTop + clientHeight) === scrollHeight) {
+                if (data.length < count && !loading) {
+                    loadData(currentPage + 1, filtersQuery);
+                }
+            }
+        }
+    };
+
+    const onDeleteConfirm = () => {
+        if (!itemIdToDelete) return;
+
+        dispatch(deleteThunk(itemIdToDelete))
+            .then((res) => {
+                if (res.meta.requestStatus === 'fulfilled') {
+                    setItemIdToDelete('');
+                    loadData(0, filtersQuery);
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+            })
+            .finally(() => {
+                setItemIdToDelete('');
+            });
+    };
+
+    return (
+        <>
+            <CardBox
+                hasComponentLayout
+                className={
+                    'w-72 rounded-md h-fit max-h-full overflow-hidden flex flex-col'
+                }
+            >
+                <div className={'flex items-center justify-between p-3'}>
+                    <p className={'uppercase'}>{column.label}</p>
+                    <p>{count}</p>
+                </div>
+                <div
+                    ref={(node) => {
+                        drop(node);
+                        listInnerRef.current = node;
+                    }}
+                    className={'p-3 space-y-3 flex-1 overflow-y-auto max-h-[400px]'}
+                    onScroll={onScroll}
+                >
+                    {data?.map((item) => (
+                        <div key={item.id}>
+                          <KanbanCard
+                              item={item}
+                              column={column}
+                              showFieldName={showFieldName}
+                              entityName={entityName}
+                              setItemIdToDelete={setItemIdToDelete}
+                          />
+                        </div>
+                    ))}
+                    {!data?.length && (
+                        <p className={'text-center py-8 bg-gray-50 dark:bg-dark-800'}>No data</p>
+                    )}
+                </div>
+            </CardBox>
+            <CardBoxModal
+                title='Please confirm'
+                buttonColor='info'
+                buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+                isActive={!!itemIdToDelete}
+                onConfirm={onDeleteConfirm}
+                onCancel={() => setItemIdToDelete('')}
+            >
+                <p>Are you sure you want to delete this item?</p>
+            </CardBoxModal>
+        </>
+    );
+};
+
+export default KanbanColumn;
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..f2f373a
--- /dev/null
+++ b/frontend/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import Select, { components, SingleValueProps, OptionProps } from 'react-select';
+
+type LanguageOption = { label: string; value: string };
+
+const LANGS: LanguageOption[] = [
+    { value: 'en', label: '🇬🇧 EN' },
+    { value: 'fr', label: '🇫🇷 FR' },
+    { value: 'es', label: '🇪🇸 ES' },
+    { value: 'de', label: '🇩🇪 DE' },
+];
+
+const Option = (props: OptionProps<LanguageOption, false>) => (
+    <components.Option {...props}>
+        <span className='flex items-center gap-1'>{props.data.label}</span>
+    </components.Option>
+);
+
+const SingleVal = (props: SingleValueProps<LanguageOption, false>) => (
+    <components.SingleValue {...props}>
+        <span className='flex items-center gap-1'>{props.data.label}</span>
+    </components.SingleValue>
+);
+
+const LanguageSwitcher: React.FC = () => {
+    const [mounted, setMounted]   = useState(false);
+    const [selected, setSelected] = useState<LanguageOption>(LANGS[0]);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const handleChange = (opt: LanguageOption | null) => {
+        if (!opt) return;
+        setSelected(opt);
+    };
+
+    if (!mounted) return null;
+
+    return (
+        <div style={{ width: 88 }}>
+            <Select
+                value={selected}
+                options={LANGS}
+                onChange={handleChange}
+                isSearchable={false}
+                menuPlacement='top'
+                components={{
+                    Option,
+                    SingleValue: SingleVal,
+                    IndicatorSeparator: () => null,
+                }}
+                styles={{
+                    control: (base) => ({
+                        ...base,
+                        minHeight: 28,
+                        height: 28,
+                        paddingTop: 0,
+                        paddingBottom: 0,
+                        borderColor: '#d1d5db',
+                        cursor: 'pointer',
+                    }),
+                    valueContainer: (base) => ({
+                        ...base,
+                        paddingTop: 0,
+                        paddingBottom: 0,
+                        paddingLeft: 6,
+                    }),
+                    indicatorsContainer: (base) => ({
+                        ...base,
+                        height: 24,
+                    }),
+                    dropdownIndicator: (base) => ({
+                        ...base,
+                        padding: 2,
+                    }),
+                    option: (base, state) => ({
+                        ...base,
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        height: 26,
+                        fontSize: '0.875rem',
+                        backgroundColor: state.isFocused ? '#f3f4f6' : 'white',
+                        color: '#111827',
+                    }),
+                    menu: (base) => ({
+                        ...base,
+                        zIndex: 9999,
+                    }),
+                }}
+            />
+        </div>
+    );
+};
+
+export default LanguageSwitcher;
diff --git a/frontend/src/components/ListActionsPopover.tsx b/frontend/src/components/ListActionsPopover.tsx
new file mode 100644
index 0000000..0f93245
--- /dev/null
+++ b/frontend/src/components/ListActionsPopover.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import Link from 'next/link';
+import Button from '@mui/material/Button';
+import BaseIcon from './BaseIcon';
+import {
+    mdiDotsVertical,
+    mdiEye,
+    mdiPencilOutline,
+    mdiTrashCan,
+} from '@mdi/js';
+import Popover from '@mui/material/Popover';
+import { IconButton } from '@mui/material';
+
+
+type Props = {
+    itemId: string;
+    onDelete: (id: string) => void;
+    hasUpdatePermission: boolean;
+    className?: string;
+    iconClassName?: string;
+    pathEdit: string;
+    pathView: string;
+};
+
+const ListActionsPopover = ({
+                                itemId,
+                                onDelete,
+                                hasUpdatePermission,
+                                className,
+                                iconClassName, 
+                                pathEdit,
+                                pathView,
+                            }: Props) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const linkView = pathView;
+    const linkEdit = pathEdit;
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <>
+            <IconButton
+                aria-describedby={id}
+                onClick={handleClick}
+                className={`rounded-full  ${className}`}
+                size={'small'}
+            >
+                <BaseIcon
+                    className={`text-black dark:text-white ${iconClassName}`}
+                    w='w-10'
+                    h='h-10'
+                    size={24}
+                    path={mdiDotsVertical}
+                />
+            </IconButton>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
+            >
+                <div className={'flex  flex-col'}>
+                    <Button
+                        startIcon={<BaseIcon path={mdiEye} size={24} />}
+                        className='w-full MuiButton-colorInherit'
+                        href={linkView}
+                        sx={{ justifyContent: "start" }}
+                    >
+                        View
+                    </Button>
+                    {hasUpdatePermission && (
+                        <Button
+                            startIcon={<BaseIcon path={mdiPencilOutline} size={24} />}
+                            className='w-full MuiButton-colorInherit'
+                            href={linkEdit}
+                            sx={{ justifyContent: "start" }}
+                        >
+                            Edit
+                        </Button>
+                    )}
+                    {hasUpdatePermission && (
+                        <Button
+                            startIcon={<BaseIcon path={mdiTrashCan} size={24} />}
+                            className='MuiButton-colorInherit'
+                            onClick={() => {
+                                handleClose();
+                                onDelete(itemId);
+                            }}
+                            sx={{ justifyContent: "start" }}
+                        >
+                            Delete
+                        </Button>
+                    )}
+                </div>
+            </Popover>
+        </>
+    );
+};
+
+export default ListActionsPopover;
diff --git a/frontend/src/components/LoadingSpinner.tsx b/frontend/src/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..6f288a0
--- /dev/null
+++ b/frontend/src/components/LoadingSpinner.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const LoadingSpinner = () => {
+  return (
+    <div className='flex items-center justify-center h-40'>
+      <div className='relative w-12'>
+        <div
+          className='w-12 h-12 rounded-full absolute border-4 border-solid border-gray-200 dark:border-slate-800'
+        ></div>
+        <div
+          className="w-12 h-12 rounded-full animate-spin absolute border-4 border-solid  border-blue-500 dark:border-blue-500 border-t-transparent"
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;
\ No newline at end of file
diff --git a/frontend/src/components/Logo/index.tsx b/frontend/src/components/Logo/index.tsx
new file mode 100644
index 0000000..a582e29
--- /dev/null
+++ b/frontend/src/components/Logo/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export default function Logo({ className = '' }: Props) {
+  return (
+    <img
+      src={"https://flatlogic.com/logo.svg"}
+      className={className}
+      alt={'Flatlogic logo'}>
+    </img>
+  )
+}
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
new file mode 100644
index 0000000..c270ae0
--- /dev/null
+++ b/frontend/src/components/NavBar.tsx
@@ -0,0 +1,57 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { mdiClose, mdiDotsVertical } from '@mdi/js'
+import { containerMaxW } from '../config'
+import BaseIcon from './BaseIcon'
+import NavBarItemPlain from './NavBarItemPlain'
+import NavBarMenuList from './NavBarMenuList'
+import { MenuNavBarItem } from '../interfaces'
+import {  useAppSelector } from '../stores/hooks';
+
+type Props = {
+  menu: MenuNavBarItem[]
+  className: string
+  children: ReactNode
+}
+
+export default function NavBar({ menu, className = '', children }: Props) {
+  const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY > 0;
+      setIsScrolled(scrolled);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const handleMenuNavBarToggleClick = () => {
+    setIsMenuNavBarActive(!isMenuNavBarActive)
+  }
+
+  return (
+    <nav
+      className={`${className} top-0 inset-x-0 fixed ${bgColor} h-14 z-30 transition-position w-screen lg:w-auto dark:bg-dark-800`}
+    >
+      <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled && `border-b  border-pavitra-400 dark:border-dark-700`}`}>
+        <div className="flex flex-1 items-stretch h-14">{children}</div>
+        <div className="flex-none items-stretch flex h-14 lg:hidden">
+          <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
+            <BaseIcon path={isMenuNavBarActive ? mdiClose : mdiDotsVertical} size="24" />
+          </NavBarItemPlain>
+        </div>
+        <div
+          className={`${
+            isMenuNavBarActive ? 'block' : 'hidden'
+          } flex items-center max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 ${bgColor}  shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800`}
+        >
+          <NavBarMenuList menu={menu} />
+        </div>
+      </div>
+    </nav>
+  )
+}
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
new file mode 100644
index 0000000..72935e6
--- /dev/null
+++ b/frontend/src/components/NavBarItem.tsx
@@ -0,0 +1,132 @@
+import React, {useEffect, useRef} from 'react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
+import BaseDivider from './BaseDivider'
+import BaseIcon from './BaseIcon'
+import UserAvatarCurrentUser from './UserAvatarCurrentUser'
+import NavBarMenuList from './NavBarMenuList'
+import { useAppDispatch, useAppSelector } from '../stores/hooks'
+import { MenuNavBarItem } from '../interfaces'
+import { setDarkMode } from '../stores/styleSlice'
+import { logoutUser } from '../stores/authSlice'
+import { useRouter } from 'next/router';
+import ClickOutside from "./ClickOutside";
+
+type Props = {
+  item: MenuNavBarItem
+}
+
+export default function NavBarItem({ item }: Props) {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const excludedRef = useRef(null);
+
+  const navBarItemLabelActiveColorStyle = useAppSelector(
+    (state) => state.style.navBarItemLabelActiveColorStyle
+  )
+  const navBarItemLabelStyle = useAppSelector((state) => state.style.navBarItemLabelStyle)
+  const navBarItemLabelHoverStyle = useAppSelector((state) => state.style.navBarItemLabelHoverStyle)
+
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+
+  const userName = `${currentUser?.firstName ? currentUser?.firstName : ""} ${currentUser?.lastName ? currentUser?.lastName : ""}`;
+
+  const [isDropdownActive, setIsDropdownActive] = useState(false)
+
+  useEffect(() => {
+    return () => setIsDropdownActive(false);
+  }, [router.pathname]);
+
+  const componentClass = [
+    'block lg:flex items-center relative cursor-pointer',
+    isDropdownActive
+      ? `${navBarItemLabelActiveColorStyle} dark:text-slate-400`
+      : `${navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${navBarItemLabelHoverStyle}`,
+    item.menu ? 'lg:py-2 lg:px-3' : 'py-2 px-3',
+    item.isDesktopNoLabel ? 'lg:w-16 lg:justify-center' : '',
+  ].join(' ')
+
+  const itemLabel = item.isCurrentUser ? userName : item.label
+
+  const handleMenuClick = () => {
+    if (item.menu) {
+      setIsDropdownActive(!isDropdownActive)
+    }
+
+    if (item.isToggleLightDark) {
+      dispatch(setDarkMode(null))
+    }
+
+    if(item.isLogout) {
+      dispatch(logoutUser())
+      router.push('/login')
+    }
+  }
+
+    const getItemId = (label) => {
+    switch (label) {
+      case 'Light/Dark':
+        return 'themeToggle';
+      case 'Log out':
+        return 'logout';
+      default:
+        return undefined;
+    }
+  };
+
+  const NavBarItemComponentContents = (
+    <>
+      <div
+        id={getItemId(itemLabel)}
+        className={`flex items-center ${
+          item.menu
+            ? 'bg-gray-100 dark:bg-dark-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0'
+            : 'w-full'
+        }`}
+        onClick={handleMenuClick}
+      >
+        {item.icon && <BaseIcon path={item.icon} size={22} className="transition-colors" />}
+        <span
+          className={`px-2 transition-colors w-40 grow ${
+            item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''
+          }`}
+        >
+          {itemLabel}
+        </span>
+        {item.isCurrentUser && <UserAvatarCurrentUser className="w-6 h-6 mr-3 inline-flex" />}
+        {item.menu && (
+          <BaseIcon
+            path={isDropdownActive ? mdiChevronUp : mdiChevronDown}
+            className="hidden lg:inline-flex transition-colors"
+          />
+        )}
+      </div>
+      {item.menu && (
+        <div
+          className={`${
+            !isDropdownActive ? 'lg:hidden' : ''
+          } text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-dark-900 dark:border-dark-700`}
+        >
+          <ClickOutside onClickOutside={() => setIsDropdownActive(false)} excludedElements={[excludedRef]}>
+            <NavBarMenuList menu={item.menu} />
+          </ClickOutside>
+        </div>
+      )}
+    </>
+  )
+
+  if (item.isDivider) {
+    return <BaseDivider navBar />
+  }
+
+  if (item.href) {
+    return (
+      <Link href={item.href} target={item.target} className={componentClass}>
+        {NavBarItemComponentContents}
+      </Link>
+    )
+  }
+
+  return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
+}
diff --git a/frontend/src/components/NavBarItemPlain.tsx b/frontend/src/components/NavBarItemPlain.tsx
new file mode 100644
index 0000000..5589728
--- /dev/null
+++ b/frontend/src/components/NavBarItemPlain.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react'
+import { useAppSelector } from '../stores/hooks'
+
+type Props = {
+  display?: string
+  useMargin?: boolean
+  children?: ReactNode
+  onClick?: (e: React.MouseEvent) => void
+}
+
+export default function NavBarItemPlain({
+  display = 'flex',
+  useMargin = false,
+  onClick,
+  children,
+}: Props) {
+  const navBarItemLabelStyle = useAppSelector((state) => state.style.navBarItemLabelStyle)
+  const navBarItemLabelHoverStyle = useAppSelector((state) => state.style.navBarItemLabelHoverStyle)
+
+  const classBase = 'items-center cursor-pointer dark:text-white dark:hover:text-slate-400'
+  const classAddon = `${display} ${navBarItemLabelStyle} ${navBarItemLabelHoverStyle} ${
+    useMargin ? 'my-2 mx-3' : 'py-2 px-3'
+  }`
+
+  return (
+    <div className={`${classBase} ${classAddon}`} onClick={onClick}>
+      {children}
+    </div>
+  )
+}
diff --git a/frontend/src/components/NavBarMenuList.tsx b/frontend/src/components/NavBarMenuList.tsx
new file mode 100644
index 0000000..0896428
--- /dev/null
+++ b/frontend/src/components/NavBarMenuList.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { MenuNavBarItem } from '../interfaces'
+import NavBarItem from './NavBarItem'
+
+type Props = {
+  menu: MenuNavBarItem[]
+}
+
+export default function NavBarMenuList({ menu }: Props) {
+  return (
+    <>
+      {menu.map((item, index) => (
+          <div key={index}>
+            <NavBarItem  item={item} />
+          </div>
+      ))}
+    </>
+  )
+}
diff --git a/frontend/src/components/NotificationBar.tsx b/frontend/src/components/NotificationBar.tsx
new file mode 100644
index 0000000..a3ade58
--- /dev/null
+++ b/frontend/src/components/NotificationBar.tsx
@@ -0,0 +1,57 @@
+import { mdiClose } from '@mdi/js'
+import React, { ReactNode, useState } from 'react'
+import { ColorKey } from '../interfaces'
+import { colorsBgLight, colorsOutline } from '../colors'
+import BaseButton from './BaseButton'
+import BaseIcon from './BaseIcon'
+
+type Props = {
+  color: ColorKey
+  icon?: string
+  outline?: boolean
+  children: ReactNode
+  button?: ReactNode
+}
+
+const NotificationBar = ({ outline = false, children, ...props }: Props) => {
+  const componentColorClass = outline ? colorsOutline[props.color] : colorsBgLight[props.color]
+
+  const [isDismissed, setIsDismissed] = useState(false)
+
+  const dismiss = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    setIsDismissed(true)
+  }
+
+  if (isDismissed) {
+    return null
+  }
+
+  return (
+    <div
+      className={`px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150 ${componentColorClass}`}
+    >
+      <div className="flex flex-col md:flex-row items-center justify-between">
+        <div className="flex flex-col md:flex-row items-center mb-6 md:mb-0">
+          {props.icon && (
+            <BaseIcon
+              path={props.icon}
+              w="w-10 md:w-5"
+              h="h-10 md:h-5"
+              size="24"
+              className="md:mr-2"
+            />
+          )}
+          <span className="text-center md:text-left md:py-2">{children}</span>
+        </div>
+        {props.button}
+        {!props.button && (
+          <BaseButton icon={mdiClose} color="white" onClick={dismiss} small roundedFull />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default NotificationBar
diff --git a/frontend/src/components/Organizations/CardOrganizations.tsx b/frontend/src/components/Organizations/CardOrganizations.tsx
new file mode 100644
index 0000000..45afe7d
--- /dev/null
+++ b/frontend/src/components/Organizations/CardOrganizations.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  organizations: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardOrganizations = ({
+  organizations,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ORGANIZATIONS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && organizations.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/organizations/organizations-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/organizations/organizations-edit/?id=${item.id}`}
+                  pathView={`/organizations/organizations-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && organizations.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardOrganizations;
diff --git a/frontend/src/components/Organizations/ListOrganizations.tsx b/frontend/src/components/Organizations/ListOrganizations.tsx
new file mode 100644
index 0000000..b1eeb0b
--- /dev/null
+++ b/frontend/src/components/Organizations/ListOrganizations.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    organizations: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListOrganizations = ({ organizations, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ORGANIZATIONS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && organizations.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/organizations/organizations-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Name</p>
+                                <p className={'line-clamp-2'}>{ item.name }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/organizations/organizations-edit/?id=${item.id}`}
+                              pathView={`/organizations/organizations-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && organizations.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListOrganizations
\ No newline at end of file
diff --git a/frontend/src/components/Organizations/TableOrganizations.tsx b/frontend/src/components/Organizations/TableOrganizations.tsx
new file mode 100644
index 0000000..ab0d371
--- /dev/null
+++ b/frontend/src/components/Organizations/TableOrganizations.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureOrganizationsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleOrganizations = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { organizations, loading, count, notify: organizationsNotify, refetch } = useAppSelector((state) => state.organizations)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (organizationsNotify.showNotification) {
+          notify(organizationsNotify.typeNotification, organizationsNotify.textNotification);
+      }
+  }, [organizationsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `organizations`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={organizations ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleOrganizations
diff --git a/frontend/src/components/Organizations/configureOrganizationsCols.tsx b/frontend/src/components/Organizations/configureOrganizationsCols.tsx
new file mode 100644
index 0000000..f0e7dd6
--- /dev/null
+++ b/frontend/src/components/Organizations/configureOrganizationsCols.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_ORGANIZATIONS')
+    
+    return [
+        
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/organizations/organizations-edit/?id=${params?.row?.id}`}
+                      pathView={`/organizations/organizations-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/OverlayLayer.tsx b/frontend/src/components/OverlayLayer.tsx
new file mode 100644
index 0000000..4cb9e6f
--- /dev/null
+++ b/frontend/src/components/OverlayLayer.tsx
@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react'
+import { useAppSelector } from '../stores/hooks'
+
+type Props = {
+  zIndex?: string
+  type?: string
+  children?: ReactNode
+  className?: string
+  onClick: (e: React.MouseEvent) => void
+}
+
+export default function OverlayLayer({
+  zIndex = 'z-50',
+  type = 'flex',
+  children,
+  className,
+  ...props
+}: Props) {
+  const overlayStyle = useAppSelector((state) => state.style.overlayStyle)
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    if (props.onClick) {
+      props.onClick(e)
+    }
+  }
+
+  return (
+    <div
+      className={`${type} ${zIndex} ${className} items-center flex-col justify-center overflow-hidden fixed inset-0`}
+    >
+      <div
+        className={`${overlayStyle} absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-dark-700 dark:via-dark-900 dark:to-dark-700`}
+        onClick={handleClick}
+      ></div>
+
+      {children}
+    </div>
+  )
+}
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
new file mode 100644
index 0000000..bb6f7b3
--- /dev/null
+++ b/frontend/src/components/Pagination.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import {
+  mdiChevronDoubleLeft,
+  mdiChevronDoubleRight,
+  mdiChevronLeft,
+  mdiChevronRight,
+} from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  currentPage: number;
+  numPages: number;
+  setCurrentPage: any;
+};
+
+export const Pagination = ({
+  currentPage,
+  numPages,
+  setCurrentPage,
+}: Props) => {
+  return (
+    <div className='flex items-center'>
+      {currentPage === 0 && (
+        <div className='flex'>
+          <BaseIcon
+            path={mdiChevronDoubleLeft}
+            className='mr-2 text-pavitra-600 border-2 border-pavitra-600 rounded-full'
+          />
+          <BaseIcon
+            path={mdiChevronLeft}
+            className='mr-2 text-pavitra-600 border-2 border-pavitra-600 rounded-full'
+          />
+        </div>
+      )}
+      {currentPage !== 0 && (
+        <div className='flex'>
+          <div onClick={() => setCurrentPage(0)}>
+            <BaseIcon
+              path={mdiChevronDoubleLeft}
+              className='mr-2 text-pavitra-900 cursor-pointer h-full border-2 border-pavitra-900 rounded-full'
+            />
+          </div>
+          <div onClick={() => setCurrentPage(currentPage - 1)}>
+          <BaseIcon
+              path={mdiChevronLeft}
+              className='mr-2 text-pavitra-900 cursor-pointer h-full border-2 border-pavitra-900 rounded-full'
+            />
+          </div>
+        </div>
+      )}
+      <p className='text-base text-gray-1 mt-6 md:mt-0'>
+        Page {currentPage + 1} of {numPages}
+      </p>
+      {currentPage !== numPages - 1 && (
+        <div className='flex'>
+          <div onClick={() => setCurrentPage(currentPage + 1)}>
+            <BaseIcon
+              path={mdiChevronRight}
+              className='ml-2 text-pavitra-900 cursor-pointer h-full border-2 border-pavitra-900 rounded-full'
+            />
+          </div>
+
+          <div onClick={() => setCurrentPage(numPages - 1)}>
+            <BaseIcon
+              path={mdiChevronDoubleRight}
+              className='ml-2 text-pavitra-900 cursor-pointer h-full border-2 border-pavitra-900 rounded-full'
+            />
+          </div>
+        </div>
+      )}
+      {currentPage === numPages - 1 && (
+        <div className='flex'>
+          <BaseIcon
+            path={mdiChevronRight}
+            className='ml-2 text-pavitra-600 border-2 border-pavitra-600 rounded-full'
+          />
+          <BaseIcon
+            path={mdiChevronDoubleRight}
+            className='ml-2 text-pavitra-600 border-2 border-pavitra-600 rounded-full'
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/PasswordSetOrReset.tsx b/frontend/src/components/PasswordSetOrReset.tsx
new file mode 100644
index 0000000..07749ba
--- /dev/null
+++ b/frontend/src/components/PasswordSetOrReset.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import {toast, ToastContainer} from 'react-toastify';
+
+import Head from 'next/head';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import {useRouter} from 'next/router';
+import {getPageTitle} from '../config';
+
+import {Field, Form, Formik} from 'formik';
+import FormField from '../components/FormField';
+import BaseButtons from '../components/BaseButtons';
+import BaseButton from '../components/BaseButton';
+import { passwordReset } from '../stores/authSlice';
+import {useAppDispatch} from '../stores/hooks';
+
+export default function PasswordSetOrReset() {
+    const [loading, setLoading] = React.useState(false);
+    const [isInvitation, setIsInvitation] =  React.useState(false);
+    const router = useRouter();
+    const {token, invitation} = router.query;
+
+    const notify = (type, msg) => toast(msg, {type});
+
+    const dispatch = useAppDispatch();
+    
+    React.useEffect(() => {
+        if (invitation) {
+          setIsInvitation(true);
+        }
+      }, [invitation]);
+
+    const handleSubmit = async (value) => {
+        setLoading(true);
+        if (typeof token === 'string') {
+            await dispatch(
+                passwordReset({
+                    token,
+                    password: value.password,
+                    type: isInvitation && 'invitation',
+                }),
+            );
+            await router.push('/login');
+        }
+
+        setLoading(false);
+    };
+
+    return (
+        <>
+            <Head>
+                {isInvitation && <title>{getPageTitle('Set Password')}</title>}
+                {!isInvitation && <title>{getPageTitle('Reset Password')}</title>}
+            </Head>
+
+            <SectionFullScreen bg='violet'>
+                <div className='w-full flex flex-col items-center justify-center'>
+                    <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+                        {isInvitation && <p className='text-xl mb-2'>Set Password</p>}
+                        {!isInvitation && <p className='text-xl mb-2'>Reset Password</p>}
+                        <p className='text-base mb-4'>Enter your new password</p>
+
+                        <Formik
+                            initialValues={{
+                                password: '',
+                                confirm: '',
+                            }}
+                            onSubmit={(values) => handleSubmit(values)}
+                        >
+                            {({errors, touched}) => (
+                                <Form>
+                                    <FormField
+                                    >
+                                        <Field
+                                            type='password'
+                                            name='password'
+                                            placeholder='Password'
+                                        />
+                                    </FormField>
+                                    <FormField
+                                    >
+                                        <Field
+                                            type='password'
+                                            name='confirm'
+                                            placeholder='Confirm Password'
+                                        />
+                                    </FormField>
+
+                                    <BaseButtons>
+                                        <BaseButton
+                                            className='w-full mt-3'
+                                            type='submit'
+                                            disabled={loading}
+                                            label={
+                                                loading
+                                                    ? 'Loading...'
+                                                    : isInvitation
+                                                        ? 'Set Password'
+                                                        : 'Reset Password'
+                                            }
+                                            color='info'
+                                        />
+                                    </BaseButtons>
+                                </Form>
+                            )}
+                        </Formik>
+                    </CardBox>
+                </div>
+            </SectionFullScreen>
+            <ToastContainer/>
+        </>
+    );
+}
diff --git a/frontend/src/components/Payments/CardPayments.tsx b/frontend/src/components/Payments/CardPayments.tsx
new file mode 100644
index 0000000..872d30c
--- /dev/null
+++ b/frontend/src/components/Payments/CardPayments.tsx
@@ -0,0 +1,226 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  payments: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPayments = ({
+  payments,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PAYMENTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && payments.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/payments/payments-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.payment_reference}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/payments/payments-edit/?id=${item.id}`}
+                  pathView={`/payments/payments-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PaymentReference</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.payment_reference }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Vendor</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.vendorsOneListFormatter(item.vendor) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>VendorInvoice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.vendor_invoicesOneListFormatter(item.vendor_invoice) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PaymentDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.payment_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Amount</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.amount }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Method</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.method }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ProofFiles</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.proof_files).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Notes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && payments.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPayments;
diff --git a/frontend/src/components/Payments/ListPayments.tsx b/frontend/src/components/Payments/ListPayments.tsx
new file mode 100644
index 0000000..64e5d63
--- /dev/null
+++ b/frontend/src/components/Payments/ListPayments.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    payments: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPayments = ({ payments, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PAYMENTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && payments.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/payments/payments-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PaymentReference</p>
+                                <p className={'line-clamp-2'}>{ item.payment_reference }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Vendor</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.vendorsOneListFormatter(item.vendor) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>VendorInvoice</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.vendor_invoicesOneListFormatter(item.vendor_invoice) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PaymentDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.payment_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Amount</p>
+                                <p className={'line-clamp-2'}>{ item.amount }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Method</p>
+                                <p className={'line-clamp-2'}>{ item.method }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ProofFiles</p>
+                                {dataFormatter.filesFormatter(item.proof_files).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Notes</p>
+                                <p className={'line-clamp-2'}>{ item.notes }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/payments/payments-edit/?id=${item.id}`}
+                              pathView={`/payments/payments-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && payments.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPayments
\ No newline at end of file
diff --git a/frontend/src/components/Payments/TablePayments.tsx b/frontend/src/components/Payments/TablePayments.tsx
new file mode 100644
index 0000000..ec48638
--- /dev/null
+++ b/frontend/src/components/Payments/TablePayments.tsx
@@ -0,0 +1,468 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/payments/paymentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePaymentsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import BigCalendar from "../BigCalendar";
+import { SlotInfo } from 'react-big-calendar';
+
+
+const perPage =  100 
+
+const TableSamplePayments = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { payments, loading, count, notify: paymentsNotify, refetch } = useAppSelector((state) => state.payments)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (paymentsNotify.showNotification) {
+          notify(paymentsNotify.typeNotification, paymentsNotify.textNotification);
+      }
+  }, [paymentsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `payments`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={payments ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePayments
diff --git a/frontend/src/components/Payments/configurePaymentsCols.tsx b/frontend/src/components/Payments/configurePaymentsCols.tsx
new file mode 100644
index 0000000..ffa743d
--- /dev/null
+++ b/frontend/src/components/Payments/configurePaymentsCols.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PAYMENTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'payment_reference',
+            headerName: 'PaymentReference',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'vendor',
+            headerName: 'Vendor',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('vendors'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'vendor_invoice',
+            headerName: 'VendorInvoice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('vendor_invoices'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'payment_date',
+            headerName: 'PaymentDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.payment_date),
+          
+        },
+        
+        {
+            field: 'amount',
+            headerName: 'Amount',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'method',
+            headerName: 'Method',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'proof_files',
+            headerName: 'ProofFiles',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.proof_files).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'notes',
+            headerName: 'Notes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/payments/payments-edit/?id=${params?.row?.id}`}
+                      pathView={`/payments/payments-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Permissions/CardPermissions.tsx b/frontend/src/components/Permissions/CardPermissions.tsx
new file mode 100644
index 0000000..caff22d
--- /dev/null
+++ b/frontend/src/components/Permissions/CardPermissions.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  permissions: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPermissions = ({
+  permissions,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PERMISSIONS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && permissions.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/permissions/permissions-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/permissions/permissions-edit/?id=${item.id}`}
+                  pathView={`/permissions/permissions-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && permissions.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPermissions;
diff --git a/frontend/src/components/Permissions/ListPermissions.tsx b/frontend/src/components/Permissions/ListPermissions.tsx
new file mode 100644
index 0000000..80239af
--- /dev/null
+++ b/frontend/src/components/Permissions/ListPermissions.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    permissions: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPermissions = ({ permissions, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PERMISSIONS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && permissions.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/permissions/permissions-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Name</p>
+                                <p className={'line-clamp-2'}>{ item.name }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/permissions/permissions-edit/?id=${item.id}`}
+                              pathView={`/permissions/permissions-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && permissions.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPermissions
\ No newline at end of file
diff --git a/frontend/src/components/Permissions/TablePermissions.tsx b/frontend/src/components/Permissions/TablePermissions.tsx
new file mode 100644
index 0000000..9b21466
--- /dev/null
+++ b/frontend/src/components/Permissions/TablePermissions.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/permissions/permissionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePermissionsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSamplePermissions = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { permissions, loading, count, notify: permissionsNotify, refetch } = useAppSelector((state) => state.permissions)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (permissionsNotify.showNotification) {
+          notify(permissionsNotify.typeNotification, permissionsNotify.textNotification);
+      }
+  }, [permissionsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `permissions`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={permissions ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePermissions
diff --git a/frontend/src/components/Permissions/configurePermissionsCols.tsx b/frontend/src/components/Permissions/configurePermissionsCols.tsx
new file mode 100644
index 0000000..b221e80
--- /dev/null
+++ b/frontend/src/components/Permissions/configurePermissionsCols.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PERMISSIONS')
+    
+    return [
+        
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/permissions/permissions-edit/?id=${params?.row?.id}`}
+                      pathView={`/permissions/permissions-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Product_categories/CardProduct_categories.tsx b/frontend/src/components/Product_categories/CardProduct_categories.tsx
new file mode 100644
index 0000000..bd1b8bd
--- /dev/null
+++ b/frontend/src/components/Product_categories/CardProduct_categories.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  product_categories: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardProduct_categories = ({
+  product_categories,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PRODUCT_CATEGORIES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && product_categories.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/product_categories/product_categories-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.category_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/product_categories/product_categories-edit/?id=${item.id}`}
+                  pathView={`/product_categories/product_categories-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>CategoryName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.category_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>CategoryCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.category_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && product_categories.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardProduct_categories;
diff --git a/frontend/src/components/Product_categories/ListProduct_categories.tsx b/frontend/src/components/Product_categories/ListProduct_categories.tsx
new file mode 100644
index 0000000..ec271cd
--- /dev/null
+++ b/frontend/src/components/Product_categories/ListProduct_categories.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    product_categories: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListProduct_categories = ({ product_categories, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PRODUCT_CATEGORIES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && product_categories.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/product_categories/product_categories-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>CategoryName</p>
+                                <p className={'line-clamp-2'}>{ item.category_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>CategoryCode</p>
+                                <p className={'line-clamp-2'}>{ item.category_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/product_categories/product_categories-edit/?id=${item.id}`}
+                              pathView={`/product_categories/product_categories-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && product_categories.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListProduct_categories
\ No newline at end of file
diff --git a/frontend/src/components/Product_categories/TableProduct_categories.tsx b/frontend/src/components/Product_categories/TableProduct_categories.tsx
new file mode 100644
index 0000000..ec42f58
--- /dev/null
+++ b/frontend/src/components/Product_categories/TableProduct_categories.tsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/product_categories/product_categoriesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureProduct_categoriesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import ListProduct_categories from './ListProduct_categories';
+
+
+const perPage =  10 
+
+const TableSampleProduct_categories = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { product_categories, loading, count, notify: product_categoriesNotify, refetch } = useAppSelector((state) => state.product_categories)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (product_categoriesNotify.showNotification) {
+          notify(product_categoriesNotify.typeNotification, product_categoriesNotify.textNotification);
+      }
+  }, [product_categoriesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `product_categories`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={product_categories ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {product_categories && Array.isArray(product_categories) && !showGrid && (
+            <ListProduct_categories
+                product_categories={product_categories}
+                loading={loading}
+                onDelete={handleDeleteModalAction}
+                currentPage={currentPage}
+                numPages={numPages}
+                onPageChange={onPageChange}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleProduct_categories
diff --git a/frontend/src/components/Product_categories/configureProduct_categoriesCols.tsx b/frontend/src/components/Product_categories/configureProduct_categoriesCols.tsx
new file mode 100644
index 0000000..5a592d2
--- /dev/null
+++ b/frontend/src/components/Product_categories/configureProduct_categoriesCols.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PRODUCT_CATEGORIES')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'category_name',
+            headerName: 'CategoryName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'category_code',
+            headerName: 'CategoryCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/product_categories/product_categories-edit/?id=${params?.row?.id}`}
+                      pathView={`/product_categories/product_categories-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Products/CardProducts.tsx b/frontend/src/components/Products/CardProducts.tsx
new file mode 100644
index 0000000..d34a803
--- /dev/null
+++ b/frontend/src/components/Products/CardProducts.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  products: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardProducts = ({
+  products,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PRODUCTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && products.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  md:p-0 md:block  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link
+                    href={`/products/products-view/?id=${item.id}`}
+                    className={'cursor-pointer'}
+                >
+                  <ImageField
+                    name={'Avatar'}
+                    image={item.images}
+                    className='w-12 h-12 md:w-full md:h-44 rounded-lg md:rounded-b-none overflow-hidden ring-1 ring-gray-900/10'
+                    imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
+                  />
+                  <p className={'px-6 py-2 font-semibold'}>{item.product_name}</p>
+                </Link>
+              
+
+              <div className='ml-auto  md:absolute md:top-0 md:right-0 '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/products/products-edit/?id=${item.id}`}
+                  pathView={`/products/products-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Category</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.product_categoriesOneListFormatter(item.category) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ProductName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.product_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>SKU</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.sku }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Barcode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.barcode }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ProductType</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.product_type }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>UnitofMeasure</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.uom }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>StandardCost</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.standard_cost }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PurchasePrice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.purchase_price }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>SalesPrice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.sales_price }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Images</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            <ImageField
+                                name={'Avatar'}
+                                image={item.images}
+                                className='mx-auto w-8 h-8'
+                            />
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && products.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardProducts;
diff --git a/frontend/src/components/Products/ListProducts.tsx b/frontend/src/components/Products/ListProducts.tsx
new file mode 100644
index 0000000..3bbe674
--- /dev/null
+++ b/frontend/src/components/Products/ListProducts.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    products: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListProducts = ({ products, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PRODUCTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && products.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                            <ImageField
+                                  name={'Avatar'}
+                                  image={item.images}
+                                  className='w-24 h-24 rounded-l overflow-hidden hidden md:block'
+                                  imageClassName={'rounded-l rounded-r-none h-full object-cover'}
+                            />
+                          
+                          <Link
+                              href={`/products/products-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Category</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.product_categoriesOneListFormatter(item.category) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ProductName</p>
+                                <p className={'line-clamp-2'}>{ item.product_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>SKU</p>
+                                <p className={'line-clamp-2'}>{ item.sku }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Barcode</p>
+                                <p className={'line-clamp-2'}>{ item.barcode }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ProductType</p>
+                                <p className={'line-clamp-2'}>{ item.product_type }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>UnitofMeasure</p>
+                                <p className={'line-clamp-2'}>{ item.uom }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>StandardCost</p>
+                                <p className={'line-clamp-2'}>{ item.standard_cost }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PurchasePrice</p>
+                                <p className={'line-clamp-2'}>{ item.purchase_price }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>SalesPrice</p>
+                                <p className={'line-clamp-2'}>{ item.sales_price }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Images</p>
+                                <ImageField
+                                  name={'Avatar'}
+                                  image={item.images}
+                                  className='mx-auto w-8 h-8'
+                                />
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/products/products-edit/?id=${item.id}`}
+                              pathView={`/products/products-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && products.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListProducts
\ No newline at end of file
diff --git a/frontend/src/components/Products/TableProducts.tsx b/frontend/src/components/Products/TableProducts.tsx
new file mode 100644
index 0000000..c3ddaea
--- /dev/null
+++ b/frontend/src/components/Products/TableProducts.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/products/productsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureProductsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleProducts = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { products, loading, count, notify: productsNotify, refetch } = useAppSelector((state) => state.products)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (productsNotify.showNotification) {
+          notify(productsNotify.typeNotification, productsNotify.textNotification);
+      }
+  }, [productsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `products`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={products ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleProducts
diff --git a/frontend/src/components/Products/configureProductsCols.tsx b/frontend/src/components/Products/configureProductsCols.tsx
new file mode 100644
index 0000000..80d095b
--- /dev/null
+++ b/frontend/src/components/Products/configureProductsCols.tsx
@@ -0,0 +1,287 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PRODUCTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'category',
+            headerName: 'Category',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('product_categories'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'product_name',
+            headerName: 'ProductName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'sku',
+            headerName: 'SKU',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'barcode',
+            headerName: 'Barcode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'product_type',
+            headerName: 'ProductType',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'uom',
+            headerName: 'UnitofMeasure',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'standard_cost',
+            headerName: 'StandardCost',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'purchase_price',
+            headerName: 'PurchasePrice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'sales_price',
+            headerName: 'SalesPrice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'images',
+            headerName: 'Images',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <ImageField
+                name={'Avatar'}
+                image={params?.row?.images}
+                className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
+              />
+            ),
+          
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/products/products-edit/?id=${params?.row?.id}`}
+                      pathView={`/products/products-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Purchase_order_lines/CardPurchase_order_lines.tsx b/frontend/src/components/Purchase_order_lines/CardPurchase_order_lines.tsx
new file mode 100644
index 0000000..bbee916
--- /dev/null
+++ b/frontend/src/components/Purchase_order_lines/CardPurchase_order_lines.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  purchase_order_lines: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPurchase_order_lines = ({
+  purchase_order_lines,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_ORDER_LINES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && purchase_order_lines.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.description}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/purchase_order_lines/purchase_order_lines-edit/?id=${item.id}`}
+                  pathView={`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PurchaseOrder</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Product</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.productsOneListFormatter(item.product) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Quantity</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>UnitPrice</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.unit_price }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TaxRate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tax_rate }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DiscountRate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.discount_rate }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>LineTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.line_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Warehouse</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.warehousesOneListFormatter(item.warehouse) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && purchase_order_lines.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPurchase_order_lines;
diff --git a/frontend/src/components/Purchase_order_lines/ListPurchase_order_lines.tsx b/frontend/src/components/Purchase_order_lines/ListPurchase_order_lines.tsx
new file mode 100644
index 0000000..62d628e
--- /dev/null
+++ b/frontend/src/components/Purchase_order_lines/ListPurchase_order_lines.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    purchase_order_lines: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPurchase_order_lines = ({ purchase_order_lines, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_ORDER_LINES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && purchase_order_lines.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PurchaseOrder</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Product</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.productsOneListFormatter(item.product) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Quantity</p>
+                                <p className={'line-clamp-2'}>{ item.quantity }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>UnitPrice</p>
+                                <p className={'line-clamp-2'}>{ item.unit_price }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TaxRate</p>
+                                <p className={'line-clamp-2'}>{ item.tax_rate }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DiscountRate</p>
+                                <p className={'line-clamp-2'}>{ item.discount_rate }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>LineTotal</p>
+                                <p className={'line-clamp-2'}>{ item.line_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Warehouse</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.warehousesOneListFormatter(item.warehouse) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/purchase_order_lines/purchase_order_lines-edit/?id=${item.id}`}
+                              pathView={`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && purchase_order_lines.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPurchase_order_lines
\ No newline at end of file
diff --git a/frontend/src/components/Purchase_order_lines/TablePurchase_order_lines.tsx b/frontend/src/components/Purchase_order_lines/TablePurchase_order_lines.tsx
new file mode 100644
index 0000000..9286f58
--- /dev/null
+++ b/frontend/src/components/Purchase_order_lines/TablePurchase_order_lines.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/purchase_order_lines/purchase_order_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePurchase_order_linesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSamplePurchase_order_lines = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { purchase_order_lines, loading, count, notify: purchase_order_linesNotify, refetch } = useAppSelector((state) => state.purchase_order_lines)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (purchase_order_linesNotify.showNotification) {
+          notify(purchase_order_linesNotify.typeNotification, purchase_order_linesNotify.textNotification);
+      }
+  }, [purchase_order_linesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `purchase_order_lines`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={purchase_order_lines ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePurchase_order_lines
diff --git a/frontend/src/components/Purchase_order_lines/configurePurchase_order_linesCols.tsx b/frontend/src/components/Purchase_order_lines/configurePurchase_order_linesCols.tsx
new file mode 100644
index 0000000..212e0c8
--- /dev/null
+++ b/frontend/src/components/Purchase_order_lines/configurePurchase_order_linesCols.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PURCHASE_ORDER_LINES')
+    
+    return [
+        
+        {
+            field: 'purchase_order',
+            headerName: 'PurchaseOrder',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_orders'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'product',
+            headerName: 'Product',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('products'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'quantity',
+            headerName: 'Quantity',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'unit_price',
+            headerName: 'UnitPrice',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'tax_rate',
+            headerName: 'TaxRate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'discount_rate',
+            headerName: 'DiscountRate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'line_total',
+            headerName: 'LineTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'warehouse',
+            headerName: 'Warehouse',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('warehouses'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/purchase_order_lines/purchase_order_lines-edit/?id=${params?.row?.id}`}
+                      pathView={`/purchase_order_lines/purchase_order_lines-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Purchase_orders/CardPurchase_orders.tsx b/frontend/src/components/Purchase_orders/CardPurchase_orders.tsx
new file mode 100644
index 0000000..2fce0ce
--- /dev/null
+++ b/frontend/src/components/Purchase_orders/CardPurchase_orders.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  purchase_orders: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPurchase_orders = ({
+  purchase_orders,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_ORDERS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && purchase_orders.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/purchase_orders/purchase_orders-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.po_number}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/purchase_orders/purchase_orders-edit/?id=${item.id}`}
+                  pathView={`/purchase_orders/purchase_orders-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PONumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.po_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Vendor</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.vendorsOneListFormatter(item.vendor) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Buyer</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.buyer) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>SourceRequisition</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_requisitionsOneListFormatter(item.source_requisition) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>OrderDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.order_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ExpectedDeliveryDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Currency</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.currency }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Subtotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.subtotal }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TaxTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tax_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DiscountTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.discount_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>GrandTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.grand_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Notes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Attachments</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && purchase_orders.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPurchase_orders;
diff --git a/frontend/src/components/Purchase_orders/ListPurchase_orders.tsx b/frontend/src/components/Purchase_orders/ListPurchase_orders.tsx
new file mode 100644
index 0000000..b7c4e5d
--- /dev/null
+++ b/frontend/src/components/Purchase_orders/ListPurchase_orders.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    purchase_orders: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPurchase_orders = ({ purchase_orders, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_ORDERS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && purchase_orders.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/purchase_orders/purchase_orders-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PONumber</p>
+                                <p className={'line-clamp-2'}>{ item.po_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Vendor</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.vendorsOneListFormatter(item.vendor) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Buyer</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.buyer) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>SourceRequisition</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_requisitionsOneListFormatter(item.source_requisition) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>OrderDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.order_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ExpectedDeliveryDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.expected_delivery_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Currency</p>
+                                <p className={'line-clamp-2'}>{ item.currency }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Subtotal</p>
+                                <p className={'line-clamp-2'}>{ item.subtotal }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TaxTotal</p>
+                                <p className={'line-clamp-2'}>{ item.tax_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DiscountTotal</p>
+                                <p className={'line-clamp-2'}>{ item.discount_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>GrandTotal</p>
+                                <p className={'line-clamp-2'}>{ item.grand_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Notes</p>
+                                <p className={'line-clamp-2'}>{ item.notes }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Attachments</p>
+                                {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/purchase_orders/purchase_orders-edit/?id=${item.id}`}
+                              pathView={`/purchase_orders/purchase_orders-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && purchase_orders.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPurchase_orders
\ No newline at end of file
diff --git a/frontend/src/components/Purchase_orders/TablePurchase_orders.tsx b/frontend/src/components/Purchase_orders/TablePurchase_orders.tsx
new file mode 100644
index 0000000..f04a701
--- /dev/null
+++ b/frontend/src/components/Purchase_orders/TablePurchase_orders.tsx
@@ -0,0 +1,513 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/purchase_orders/purchase_ordersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePurchase_ordersCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
+
+const perPage =  10 
+
+const TableSamplePurchase_orders = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+    const [kanbanColumns, setKanbanColumns] = useState<Array<{id: string, label: string}> | null>(null);
+    const [kanbanFilters, setKanbanFilters] = useState('');
+  
+  const { purchase_orders, loading, count, notify: purchase_ordersNotify, refetch } = useAppSelector((state) => state.purchase_orders)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (purchase_ordersNotify.showNotification) {
+          notify(purchase_ordersNotify.typeNotification, purchase_ordersNotify.textNotification);
+      }
+  }, [purchase_ordersNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+    useEffect(() => {
+      
+        
+      
+      setKanbanColumns([
+          
+          { id: "draft", label: "draft" },
+          
+          { id: "sent", label: "sent" },
+          
+          { id: "confirmed", label: "confirmed" },
+          
+          { id: "partially_received", label: "partially_received" },
+          
+          { id: "received", label: "received" },
+          
+          { id: "cancelled", label: "cancelled" },
+          
+          { id: "closed", label: "closed" },
+          
+      ]);
+      
+      
+    }, []);
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setKanbanFilters('');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+    setKanbanFilters(generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+      setKanbanFilters('');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `purchase_orders`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={purchase_orders ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+      
+      {!showGrid && kanbanColumns && (
+            <KanbanBoard
+                columnFieldName={'status'}
+                showFieldName={'po_number'}
+                entityName={'purchase_orders'}
+                filtersQuery={kanbanFilters}
+                deleteThunk={deleteItem}
+                updateThunk={update}
+                columns={kanbanColumns}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePurchase_orders
diff --git a/frontend/src/components/Purchase_orders/configurePurchase_ordersCols.tsx b/frontend/src/components/Purchase_orders/configurePurchase_ordersCols.tsx
new file mode 100644
index 0000000..55c8caf
--- /dev/null
+++ b/frontend/src/components/Purchase_orders/configurePurchase_ordersCols.tsx
@@ -0,0 +1,342 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PURCHASE_ORDERS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'po_number',
+            headerName: 'PONumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'vendor',
+            headerName: 'Vendor',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('vendors'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'buyer',
+            headerName: 'Buyer',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'source_requisition',
+            headerName: 'SourceRequisition',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_requisitions'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'order_date',
+            headerName: 'OrderDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.order_date),
+          
+        },
+        
+        {
+            field: 'expected_delivery_date',
+            headerName: 'ExpectedDeliveryDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.expected_delivery_date),
+          
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'currency',
+            headerName: 'Currency',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'subtotal',
+            headerName: 'Subtotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'tax_total',
+            headerName: 'TaxTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'discount_total',
+            headerName: 'DiscountTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'grand_total',
+            headerName: 'GrandTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'notes',
+            headerName: 'Notes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'attachments',
+            headerName: 'Attachments',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.attachments).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/purchase_orders/purchase_orders-edit/?id=${params?.row?.id}`}
+                      pathView={`/purchase_orders/purchase_orders-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Purchase_requisition_lines/CardPurchase_requisition_lines.tsx b/frontend/src/components/Purchase_requisition_lines/CardPurchase_requisition_lines.tsx
new file mode 100644
index 0000000..5444ce4
--- /dev/null
+++ b/frontend/src/components/Purchase_requisition_lines/CardPurchase_requisition_lines.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  purchase_requisition_lines: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPurchase_requisition_lines = ({
+  purchase_requisition_lines,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_REQUISITION_LINES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && purchase_requisition_lines.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.description}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/purchase_requisition_lines/purchase_requisition_lines-edit/?id=${item.id}`}
+                  pathView={`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PurchaseRequisition</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_requisitionsOneListFormatter(item.purchase_requisition) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Product</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.productsOneListFormatter(item.product) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Description</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.description }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Quantity</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.quantity }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>UnitPriceEstimate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.unit_price_estimate }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>LineTotalEstimate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.line_total_estimate }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Warehouse</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.warehousesOneListFormatter(item.warehouse) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && purchase_requisition_lines.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPurchase_requisition_lines;
diff --git a/frontend/src/components/Purchase_requisition_lines/ListPurchase_requisition_lines.tsx b/frontend/src/components/Purchase_requisition_lines/ListPurchase_requisition_lines.tsx
new file mode 100644
index 0000000..4a14ad6
--- /dev/null
+++ b/frontend/src/components/Purchase_requisition_lines/ListPurchase_requisition_lines.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    purchase_requisition_lines: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPurchase_requisition_lines = ({ purchase_requisition_lines, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_REQUISITION_LINES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && purchase_requisition_lines.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PurchaseRequisition</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_requisitionsOneListFormatter(item.purchase_requisition) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Product</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.productsOneListFormatter(item.product) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Description</p>
+                                <p className={'line-clamp-2'}>{ item.description }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Quantity</p>
+                                <p className={'line-clamp-2'}>{ item.quantity }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>UnitPriceEstimate</p>
+                                <p className={'line-clamp-2'}>{ item.unit_price_estimate }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>LineTotalEstimate</p>
+                                <p className={'line-clamp-2'}>{ item.line_total_estimate }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Warehouse</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.warehousesOneListFormatter(item.warehouse) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/purchase_requisition_lines/purchase_requisition_lines-edit/?id=${item.id}`}
+                              pathView={`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && purchase_requisition_lines.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPurchase_requisition_lines
\ No newline at end of file
diff --git a/frontend/src/components/Purchase_requisition_lines/TablePurchase_requisition_lines.tsx b/frontend/src/components/Purchase_requisition_lines/TablePurchase_requisition_lines.tsx
new file mode 100644
index 0000000..e65bfcb
--- /dev/null
+++ b/frontend/src/components/Purchase_requisition_lines/TablePurchase_requisition_lines.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePurchase_requisition_linesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSamplePurchase_requisition_lines = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { purchase_requisition_lines, loading, count, notify: purchase_requisition_linesNotify, refetch } = useAppSelector((state) => state.purchase_requisition_lines)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (purchase_requisition_linesNotify.showNotification) {
+          notify(purchase_requisition_linesNotify.typeNotification, purchase_requisition_linesNotify.textNotification);
+      }
+  }, [purchase_requisition_linesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `purchase_requisition_lines`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={purchase_requisition_lines ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePurchase_requisition_lines
diff --git a/frontend/src/components/Purchase_requisition_lines/configurePurchase_requisition_linesCols.tsx b/frontend/src/components/Purchase_requisition_lines/configurePurchase_requisition_linesCols.tsx
new file mode 100644
index 0000000..47f47e2
--- /dev/null
+++ b/frontend/src/components/Purchase_requisition_lines/configurePurchase_requisition_linesCols.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PURCHASE_REQUISITION_LINES')
+    
+    return [
+        
+        {
+            field: 'purchase_requisition',
+            headerName: 'PurchaseRequisition',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_requisitions'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'product',
+            headerName: 'Product',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('products'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'quantity',
+            headerName: 'Quantity',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'unit_price_estimate',
+            headerName: 'UnitPriceEstimate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'line_total_estimate',
+            headerName: 'LineTotalEstimate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'warehouse',
+            headerName: 'Warehouse',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('warehouses'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/purchase_requisition_lines/purchase_requisition_lines-edit/?id=${params?.row?.id}`}
+                      pathView={`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Purchase_requisitions/CardPurchase_requisitions.tsx b/frontend/src/components/Purchase_requisitions/CardPurchase_requisitions.tsx
new file mode 100644
index 0000000..5e7b1b0
--- /dev/null
+++ b/frontend/src/components/Purchase_requisitions/CardPurchase_requisitions.tsx
@@ -0,0 +1,226 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  purchase_requisitions: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardPurchase_requisitions = ({
+  purchase_requisitions,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_REQUISITIONS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && purchase_requisitions.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.requisition_number}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/purchase_requisitions/purchase_requisitions-edit/?id=${item.id}`}
+                  pathView={`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>RequisitionNumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.requisition_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>RequestedBy</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.requested_by) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Department</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.departmentsOneListFormatter(item.department) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>RequestedDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.requested_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>NeededBy</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.needed_by) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Reason</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.reason }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EstimatedTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.estimated_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Attachments</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && purchase_requisitions.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardPurchase_requisitions;
diff --git a/frontend/src/components/Purchase_requisitions/ListPurchase_requisitions.tsx b/frontend/src/components/Purchase_requisitions/ListPurchase_requisitions.tsx
new file mode 100644
index 0000000..abb93af
--- /dev/null
+++ b/frontend/src/components/Purchase_requisitions/ListPurchase_requisitions.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    purchase_requisitions: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListPurchase_requisitions = ({ purchase_requisitions, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PURCHASE_REQUISITIONS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && purchase_requisitions.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>RequisitionNumber</p>
+                                <p className={'line-clamp-2'}>{ item.requisition_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>RequestedBy</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.requested_by) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Department</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.departmentsOneListFormatter(item.department) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>RequestedDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.requested_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>NeededBy</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.needed_by) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Reason</p>
+                                <p className={'line-clamp-2'}>{ item.reason }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EstimatedTotal</p>
+                                <p className={'line-clamp-2'}>{ item.estimated_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Attachments</p>
+                                {dataFormatter.filesFormatter(item.attachments).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/purchase_requisitions/purchase_requisitions-edit/?id=${item.id}`}
+                              pathView={`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && purchase_requisitions.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListPurchase_requisitions
\ No newline at end of file
diff --git a/frontend/src/components/Purchase_requisitions/TablePurchase_requisitions.tsx b/frontend/src/components/Purchase_requisitions/TablePurchase_requisitions.tsx
new file mode 100644
index 0000000..bcfc5f7
--- /dev/null
+++ b/frontend/src/components/Purchase_requisitions/TablePurchase_requisitions.tsx
@@ -0,0 +1,511 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/purchase_requisitions/purchase_requisitionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configurePurchase_requisitionsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
+
+const perPage =  10 
+
+const TableSamplePurchase_requisitions = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+    const [kanbanColumns, setKanbanColumns] = useState<Array<{id: string, label: string}> | null>(null);
+    const [kanbanFilters, setKanbanFilters] = useState('');
+  
+  const { purchase_requisitions, loading, count, notify: purchase_requisitionsNotify, refetch } = useAppSelector((state) => state.purchase_requisitions)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (purchase_requisitionsNotify.showNotification) {
+          notify(purchase_requisitionsNotify.typeNotification, purchase_requisitionsNotify.textNotification);
+      }
+  }, [purchase_requisitionsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+    useEffect(() => {
+      
+        
+      
+      setKanbanColumns([
+          
+          { id: "draft", label: "draft" },
+          
+          { id: "submitted", label: "submitted" },
+          
+          { id: "approved", label: "approved" },
+          
+          { id: "rejected", label: "rejected" },
+          
+          { id: "cancelled", label: "cancelled" },
+          
+          { id: "converted_to_po", label: "converted_to_po" },
+          
+      ]);
+      
+      
+    }, []);
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setKanbanFilters('');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+    setKanbanFilters(generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+      setKanbanFilters('');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `purchase_requisitions`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={purchase_requisitions ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+      
+      {!showGrid && kanbanColumns && (
+            <KanbanBoard
+                columnFieldName={'status'}
+                showFieldName={'requisition_number'}
+                entityName={'purchase_requisitions'}
+                filtersQuery={kanbanFilters}
+                deleteThunk={deleteItem}
+                updateThunk={update}
+                columns={kanbanColumns}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSamplePurchase_requisitions
diff --git a/frontend/src/components/Purchase_requisitions/configurePurchase_requisitionsCols.tsx b/frontend/src/components/Purchase_requisitions/configurePurchase_requisitionsCols.tsx
new file mode 100644
index 0000000..1182790
--- /dev/null
+++ b/frontend/src/components/Purchase_requisitions/configurePurchase_requisitionsCols.tsx
@@ -0,0 +1,257 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PURCHASE_REQUISITIONS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'requisition_number',
+            headerName: 'RequisitionNumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'requested_by',
+            headerName: 'RequestedBy',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'department',
+            headerName: 'Department',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('departments'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'requested_date',
+            headerName: 'RequestedDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.requested_date),
+          
+        },
+        
+        {
+            field: 'needed_by',
+            headerName: 'NeededBy',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.needed_by),
+          
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'reason',
+            headerName: 'Reason',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'estimated_total',
+            headerName: 'EstimatedTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'attachments',
+            headerName: 'Attachments',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.attachments).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/purchase_requisitions/purchase_requisitions-edit/?id=${params?.row?.id}`}
+                      pathView={`/purchase_requisitions/purchase_requisitions-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/RichTextField.tsx b/frontend/src/components/RichTextField.tsx
new file mode 100644
index 0000000..97066b2
--- /dev/null
+++ b/frontend/src/components/RichTextField.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useId, useState } from 'react';
+import {Editor} from "@tinymce/tinymce-react";
+import { tinyKey } from '../config'
+import {useAppSelector} from "../stores/hooks";
+
+export const RichTextField = ({ options, field, form, itemRef, showField }) => {
+    const [value, setValue] = useState(null);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+
+
+    useEffect(() => {
+        if (field.value) {
+            setValue(field.value);
+        }
+    }, [field.value]);
+
+    const handleChange = (value) => {
+        form.setFieldValue(field.name, value);
+        setValue(value);
+    };
+
+    return (
+        <Editor
+            onEditorChange={handleChange}
+            value={value || ''}
+            apiKey={tinyKey}
+            init={{
+                plugins:
+                    'advlist autolink lists link image charmap print preview anchor' +
+                    'searchreplace visualblocks code fullscreen' +
+                    'insertdatetime media table paste help wordcount',
+                toolbar:
+                    'undo redo | formatselect | ' +
+                    'bold italic backcolor | alignleft aligncenter ' +
+                    'alignright alignjustify | bullist numlist outdent indent | ' +
+                    'removeformat | code',
+                
+                
+                  content_style: `${darkMode ? 'body { color: #ffffff; }' : ''}`,
+                
+            }}
+        />
+    );
+};
diff --git a/frontend/src/components/Role_permission_mappings/CardRole_permission_mappings.tsx b/frontend/src/components/Role_permission_mappings/CardRole_permission_mappings.tsx
new file mode 100644
index 0000000..39ab0be
--- /dev/null
+++ b/frontend/src/components/Role_permission_mappings/CardRole_permission_mappings.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  role_permission_mappings: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardRole_permission_mappings = ({
+  role_permission_mappings,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ROLE_PERMISSION_MAPPINGS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && role_permission_mappings.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.is_allowed}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/role_permission_mappings/role_permission_mappings-edit/?id=${item.id}`}
+                  pathView={`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Role</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.rolesOneListFormatter(item.role) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Permission</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.permissionsOneListFormatter(item.permission) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsAllowed</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_allowed) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && role_permission_mappings.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardRole_permission_mappings;
diff --git a/frontend/src/components/Role_permission_mappings/ListRole_permission_mappings.tsx b/frontend/src/components/Role_permission_mappings/ListRole_permission_mappings.tsx
new file mode 100644
index 0000000..2330819
--- /dev/null
+++ b/frontend/src/components/Role_permission_mappings/ListRole_permission_mappings.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    role_permission_mappings: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListRole_permission_mappings = ({ role_permission_mappings, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ROLE_PERMISSION_MAPPINGS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && role_permission_mappings.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Role</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.rolesOneListFormatter(item.role) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Permission</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.permissionsOneListFormatter(item.permission) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsAllowed</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_allowed) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/role_permission_mappings/role_permission_mappings-edit/?id=${item.id}`}
+                              pathView={`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && role_permission_mappings.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListRole_permission_mappings
\ No newline at end of file
diff --git a/frontend/src/components/Role_permission_mappings/TableRole_permission_mappings.tsx b/frontend/src/components/Role_permission_mappings/TableRole_permission_mappings.tsx
new file mode 100644
index 0000000..9a776ee
--- /dev/null
+++ b/frontend/src/components/Role_permission_mappings/TableRole_permission_mappings.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/role_permission_mappings/role_permission_mappingsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureRole_permission_mappingsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleRole_permission_mappings = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { role_permission_mappings, loading, count, notify: role_permission_mappingsNotify, refetch } = useAppSelector((state) => state.role_permission_mappings)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (role_permission_mappingsNotify.showNotification) {
+          notify(role_permission_mappingsNotify.typeNotification, role_permission_mappingsNotify.textNotification);
+      }
+  }, [role_permission_mappingsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `role_permission_mappings`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={role_permission_mappings ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleRole_permission_mappings
diff --git a/frontend/src/components/Role_permission_mappings/configureRole_permission_mappingsCols.tsx b/frontend/src/components/Role_permission_mappings/configureRole_permission_mappingsCols.tsx
new file mode 100644
index 0000000..eea3165
--- /dev/null
+++ b/frontend/src/components/Role_permission_mappings/configureRole_permission_mappingsCols.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_ROLE_PERMISSION_MAPPINGS')
+    
+    return [
+        
+        {
+            field: 'role',
+            headerName: 'Role',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('roles'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'permission',
+            headerName: 'Permission',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('permissions'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'is_allowed',
+            headerName: 'IsAllowed',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/role_permission_mappings/role_permission_mappings-edit/?id=${params?.row?.id}`}
+                      pathView={`/role_permission_mappings/role_permission_mappings-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Roles/CardRoles.tsx b/frontend/src/components/Roles/CardRoles.tsx
new file mode 100644
index 0000000..0f17f91
--- /dev/null
+++ b/frontend/src/components/Roles/CardRoles.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  roles: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardRoles = ({
+  roles,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ROLES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && roles.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/roles/roles-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/roles/roles-edit/?id=${item.id}`}
+                  pathView={`/roles/roles-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Permissions</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.permissionsManyListFormatter(item.permissions).join(', ')}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Global Access</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.globalAccess) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && roles.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardRoles;
diff --git a/frontend/src/components/Roles/ListRoles.tsx b/frontend/src/components/Roles/ListRoles.tsx
new file mode 100644
index 0000000..c18ec78
--- /dev/null
+++ b/frontend/src/components/Roles/ListRoles.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    roles: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListRoles = ({ roles, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ROLES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && roles.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/roles/roles-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Name</p>
+                                <p className={'line-clamp-2'}>{ item.name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Permissions</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.permissionsManyListFormatter(item.permissions).join(', ')}</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Global Access</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.globalAccess) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/roles/roles-edit/?id=${item.id}`}
+                              pathView={`/roles/roles-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && roles.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListRoles
\ No newline at end of file
diff --git a/frontend/src/components/Roles/TableRoles.tsx b/frontend/src/components/Roles/TableRoles.tsx
new file mode 100644
index 0000000..69f45f5
--- /dev/null
+++ b/frontend/src/components/Roles/TableRoles.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/roles/rolesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureRolesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleRoles = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { roles, loading, count, notify: rolesNotify, refetch } = useAppSelector((state) => state.roles)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (rolesNotify.showNotification) {
+          notify(rolesNotify.typeNotification, rolesNotify.textNotification);
+      }
+  }, [rolesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `roles`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div id="rolesTable" className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={roles ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleRoles
diff --git a/frontend/src/components/Roles/configureRolesCols.tsx b/frontend/src/components/Roles/configureRolesCols.tsx
new file mode 100644
index 0000000..c96ae5c
--- /dev/null
+++ b/frontend/src/components/Roles/configureRolesCols.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_ROLES')
+    
+    return [
+        
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'permissions',
+            headerName: 'Permissions',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            type: 'singleSelect',
+            valueFormatter: ({ value }) =>
+                dataFormatter.permissionsManyListFormatter(value).join(', '),
+            renderEditCell: (params) => (
+                <DataGridMultiSelect {...params} entityName={'permissions'}/>
+            ),
+          
+        },
+        
+        {
+            field: 'globalAccess',
+            headerName: 'Global Access',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/roles/roles-edit/?id=${params?.row?.id}`}
+                      pathView={`/roles/roles-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
new file mode 100644
index 0000000..b7beb98
--- /dev/null
+++ b/frontend/src/components/Search.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import { useAppSelector } from '../stores/hooks';
+
+const Search = () => {
+  const router = useRouter();
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const validateSearch = (value) => {
+    let error;
+    if (!value) {
+      error = 'Required';
+    } else if (value.length < 2) {
+      error = 'Minimum length: 2 characters';
+    }
+    return error;
+  };
+  return (
+    <Formik
+      initialValues={{
+        search: '',
+      }}
+      onSubmit={(values, { setSubmitting, resetForm }) => {
+        router.push(`/search?query=${values.search}`);
+        resetForm();
+        setSubmitting(false);
+      }}
+      validateOnBlur={false}
+      validateOnChange={false}
+    >
+      {({ errors, touched, values }) => (
+          <Form  style={{width: '300px'}} >
+          <Field
+            id='search'
+            name='search'
+            validate={validateSearch}
+            placeholder='Search'
+            className={` ${corners} dark:bg-dark-900 ${cardsStyle}   dark:border-dark-700 p-2 relative ml-2 w-full dark:placeholder-dark-600 ${focusRing} shadow-none`}
+          />
+          {errors.search && touched.search && values.search.length < 2 ? (
+            <div className='text-red-500 text-sm ml-2 absolute'>{errors.search}</div>
+          ) : null}
+        </Form>
+      )}
+    </Formik>
+  );
+};
+export default Search;
diff --git a/frontend/src/components/SearchResults.tsx b/frontend/src/components/SearchResults.tsx
new file mode 100644
index 0000000..4a417ca
--- /dev/null
+++ b/frontend/src/components/SearchResults.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import CardBox from './CardBox';
+import { useRouter } from 'next/router';
+import { humanize } from '../helpers/humanize';
+
+const SearchResults = ({ searchResults, searchQuery }) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <p className={'block font-bold mb-2'}>Matches with: {searchQuery}</p>
+      {Object.keys(searchResults).map((tableName) => (
+        <>
+          <p className={'block font-bold mb-2'}>{humanize(tableName)}</p>
+          <CardBox
+            className='mb-6 border border-gray-300 rounded overflow-hidden'
+            hasTable
+            key={tableName}
+          >
+            <div className='overflow-x-auto'>
+              <table>
+                <thead>
+                  <tr>
+                    {searchResults[tableName].length > 0 &&
+                      Object.keys(searchResults[tableName][0]).map((key) => {
+                        if (
+                          key !== 'tableName' &&
+                          key !== 'id' &&
+                          key !== 'matchAttribute'
+                        ) {
+                          return (
+                            <th data-label={key} key={key}>
+                              {humanize(key)}
+                            </th>
+                          );
+                        }
+                        return null;
+                      })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {searchResults[tableName].map((item, index) => (
+                    <tr key={index}>
+                      {Object.keys(item).map((key) => {
+                        if (
+                          key !== 'tableName' &&
+                          key !== 'id' &&
+                          key !== 'matchAttribute'
+                        ) {
+                          return (
+                            <td
+                              key={key}
+                              onClick={() =>
+                                router.push(
+                                  `/${tableName}/${tableName}-view/?id=${item['id']}`,
+                                )
+                              }
+                            >
+                              {item[key]}
+                            </td>
+                          );
+                        }
+                        return null;
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {!Object.keys(searchResults).length && (
+              <div className={'text-center py-4'}>No data</div>
+            )}
+          </CardBox>
+        </>
+      ))}
+      {!Object.keys(searchResults).length && (
+        <div className={'py-4'}>No matches</div>
+      )}
+    </>
+  );
+};
+
+export default SearchResults;
diff --git a/frontend/src/components/SectionFullScreen.tsx b/frontend/src/components/SectionFullScreen.tsx
new file mode 100644
index 0000000..a570d23
--- /dev/null
+++ b/frontend/src/components/SectionFullScreen.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react'
+import { BgKey } from '../interfaces'
+import {gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgViolet} from '../colors'
+import { useAppSelector } from '../stores/hooks'
+
+type Props = {
+  bg: BgKey
+  children?: ReactNode
+}
+
+export default function SectionFullScreen({ bg, children }: Props) {
+  const darkMode = useAppSelector((state) => state.style.darkMode)
+
+  let componentClass = 'flex min-h-screen items-center justify-center '
+
+  if (darkMode) {
+    componentClass += gradientBgDark
+  } else if (bg === 'violet') {
+    componentClass += gradientBgViolet
+  } else if (bg === 'purplePink') {
+    componentClass += gradientBgPurplePink
+  } else if (bg === 'pinkRed') {
+    componentClass += gradientBgPinkRed
+  }
+
+  return <div className={componentClass}>{children}</div>
+}
diff --git a/frontend/src/components/SectionMain.tsx b/frontend/src/components/SectionMain.tsx
new file mode 100644
index 0000000..2b18097
--- /dev/null
+++ b/frontend/src/components/SectionMain.tsx
@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react'
+import { containerMaxW } from '../config'
+
+type Props = {
+  children: ReactNode
+}
+
+export default function SectionMain({ children }: Props) {
+  return <section className={`p-6 ${containerMaxW}`}>{children}</section>
+}
diff --git a/frontend/src/components/SectionTitle.tsx b/frontend/src/components/SectionTitle.tsx
new file mode 100644
index 0000000..c441e9e
--- /dev/null
+++ b/frontend/src/components/SectionTitle.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  custom?: boolean
+  first?: boolean
+  last?: boolean
+  children: ReactNode
+}
+
+const SectionTitle = ({ custom = false, first = false, last = false, children }: Props) => {
+  let classAddon = '-my-6'
+
+  if (first) {
+    classAddon = '-mb-6'
+  } else if (last) {
+    classAddon = '-mt-6'
+  }
+
+  return (
+    <section className={`py-24 px-6 lg:px-0 lg:max-w-2xl lg:mx-auto text-center ${classAddon}`}>
+      {custom && children}
+      {!custom && <h1 className="text-2xl text-gray-500 dark:text-slate-400">{children}</h1>}
+    </section>
+  )
+}
+
+export default SectionTitle
diff --git a/frontend/src/components/SectionTitleLineWithButton.tsx b/frontend/src/components/SectionTitleLineWithButton.tsx
new file mode 100644
index 0000000..3d3c5ef
--- /dev/null
+++ b/frontend/src/components/SectionTitleLineWithButton.tsx
@@ -0,0 +1,29 @@
+import { mdiCog } from '@mdi/js'
+import React, { Children, ReactNode } from 'react'
+import BaseButton from './BaseButton'
+import BaseIcon from './BaseIcon'
+import IconRounded from './IconRounded'
+import { humanize } from '../helpers/humanize';
+
+type Props = {
+  icon: string
+  title: string
+  main?: boolean
+  children?: ReactNode
+}
+
+export default function SectionTitleLineWithButton({ icon, title, main = false, children }: Props) {
+  const hasChildren = !!Children.count(children)
+
+  return (
+    <section className={`${main ? '' : 'pt-6'} mb-6 flex items-center justify-between`}>
+      <div className="flex items-center justify-start">
+        {icon && main && <IconRounded icon={icon} color="light" className="mr-3" bg />}
+        {icon && !main && <BaseIcon path={icon} className="mr-2" size="20" />}
+        <h1 className={`leading-tight ${main ? 'text-3xl' : 'text-2xl'}`}>{humanize(title)}</h1>
+      </div>
+      {children}
+      {!hasChildren && <BaseButton icon={mdiCog} color="whiteDark" />}
+    </section>
+  )
+}
diff --git a/frontend/src/components/SelectField.tsx b/frontend/src/components/SelectField.tsx
new file mode 100644
index 0000000..cab0629
--- /dev/null
+++ b/frontend/src/components/SelectField.tsx
@@ -0,0 +1,53 @@
+import React, {useEffect, useId, useState} from 'react';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import axios from 'axios'
+
+export const SelectField = ({ options, field, form, itemRef, showField, disabled }) => {
+
+  const [value, setValue] = useState(null)
+  const PAGE_SIZE = 100;
+
+  useEffect(() => {
+    if(options?.id && field?.value?.id) {
+      setValue({value: field.value?.id, label: field.value[showField]})
+      form.setFieldValue(field.name, field.value?.id);
+    } else if (!field.value) {
+      setValue(null);
+    }
+  }, [options?.id, field?.value?.id, field?.value])
+
+  const mapResponseToValuesAndLabels = (data) => ({
+    value: data.id,
+    label: data.label,
+  })
+  const handleChange = (option) => {
+    form.setFieldValue(field.name, option?.value || null)
+    setValue(option)
+  }
+
+  async function callApi(inputValue: string, loadedOptions: any[]) {
+    const path = `/${itemRef}/autocomplete?limit=${PAGE_SIZE}&offset=${loadedOptions.length}${inputValue ? `&query=${inputValue}` : ''}`;
+    const { data } = await axios(path);
+    return {
+      options: data.map(mapResponseToValuesAndLabels),
+      hasMore: data.length === PAGE_SIZE,
+    }
+  }
+  return (
+      <AsyncPaginate
+          classNames={{
+            control: () => 'px-1 py-2',
+          }}
+          classNamePrefix='react-select'
+          instanceId={useId()}
+          value={value}
+          debounceTimeout={1000}
+          loadOptions={callApi}
+          onChange={handleChange}
+          defaultOptions
+          isDisabled={disabled}
+          isClearable
+      />
+  )
+}
+
diff --git a/frontend/src/components/SelectFieldMany.tsx b/frontend/src/components/SelectFieldMany.tsx
new file mode 100644
index 0000000..34268ff
--- /dev/null
+++ b/frontend/src/components/SelectFieldMany.tsx
@@ -0,0 +1,67 @@
+import React, {useEffect, useId, useState} from 'react';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import axios from 'axios';
+
+export const SelectFieldMany = ({ options, field, form, itemRef, showField }) => {
+  const [value, setValue] = useState([]);
+  const PAGE_SIZE = 100;
+
+  useEffect(() => {
+    if (field.value?.[0] && typeof field.value[0] !== 'string') {
+      form.setFieldValue(
+        field.name,
+        field.value.map((el) => el.id),
+      );
+    } else if (!field.value || field.value.length === 0) {
+      setValue([]);
+    }
+  }, [field.name, field.value, form]);
+
+  useEffect(() => {
+    if (options) {
+      setValue(options.map((el) => ({ value: el.id, label: el[showField] })));
+      form.setFieldValue(
+          field.name,
+          options.map((el) => ({ value: el.id, label: el[showField] })),
+      );
+    }
+  }, [options]);
+
+  const mapResponseToValuesAndLabels = (data) => ({
+    value: data.id,
+    label: data.label,
+  });
+
+  const handleChange = (data: any) => {
+    setValue(data)
+    form.setFieldValue(
+        field.name,
+        data.map(el => (el?.value || null)),
+    );
+  };
+
+  async function callApi(inputValue: string, loadedOptions: any[]) {
+    const path = `/${itemRef}/autocomplete?limit=${PAGE_SIZE}&offset=${loadedOptions.length}${inputValue ? `&query=${inputValue}` : ''}`;
+    const { data } = await axios(path);
+    return {
+      options: data.map(mapResponseToValuesAndLabels),
+      hasMore: data.length === PAGE_SIZE,
+    }
+  }
+  return (
+      <AsyncPaginate
+          classNames={{
+            control: () => 'px-1 py-2',
+          }}
+          classNamePrefix='react-select'
+          instanceId={useId()}
+          value={value}
+          isMulti
+          debounceTimeout={1000}
+          loadOptions={callApi}
+          onChange={handleChange}
+          defaultOptions
+          isClearable
+      />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/SmartWidget.tsx b/frontend/src/components/SmartWidget/SmartWidget.tsx
new file mode 100644
index 0000000..6f6c0e0
--- /dev/null
+++ b/frontend/src/components/SmartWidget/SmartWidget.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import BaseButton from '../BaseButton';
+import BaseIcon from '../BaseIcon';
+import * as icons from '@mdi/js';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+
+import { fetchWidgets, removeWidget } from '../../stores/roles/rolesSlice';
+import { WidgetChartType, WidgetType } from "./models/widget.model";
+import { BarChart } from "./components/BarChart";
+import { PieChart } from "./components/PieChart";
+import { AreaChart } from "./components/AreaChart";
+import { LineChart } from "./components/LineChart";
+
+export const SmartWidget = ({ widget, userId, admin, roleId }) => {
+  const dispatch = useAppDispatch();
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  
+  const deleteWidget = async () => {
+    await dispatch(
+      removeWidget({ id: userId, widgetId: widget.widget_id, roleId }),
+    );
+    await dispatch(fetchWidgets(roleId));
+  };
+
+  return (
+    <div
+      className={`${
+        corners !== 'rounded-full' ? corners : 'rounded-3xl'
+      }  dark:bg-dark-900   dark:border-dark-700 p-6  ${cardsStyle} ${
+        widget.widget_type === 'chart'
+          ? 'col-span-2'
+          : 'lg:col-span-1 col-span-2'
+      }`}
+    >
+      <div className='flex justify-between flex-col h-full'>
+        <div className='flex justify-between items-center'>
+          <div className='text-lg leading-tight  text-gray-500 dark:text-dark-600 line-clamp-2'>
+            {widget.label}
+          </div>
+
+          {admin && (
+              <BaseButton
+                  icon={icons.mdiClose}
+                  color='whiteDark'
+                  roundedFull
+                onClick={deleteWidget}
+              />
+          )}
+        </div>
+
+          <div className='flex justify-center items-center h-full'>
+              <div
+                  className={`${
+                      widget.widget_type === WidgetType.chart ? 'w-5/6 justify-center' : ''
+                  } items-center flex flex-grow justify-center`}
+              >
+            {widget.value ? (
+                widget.widget_type === WidgetType.chart ? (
+                    widget.chart_type === WidgetChartType.bar ? (
+                        <BarChart widget={widget}/>
+                    ) : widget.chart_type === WidgetChartType.line ? (
+                        <LineChart widget={widget}/>
+                    ) : widget.chart_type === WidgetChartType.pie ? (
+                        <PieChart widget={widget}/>
+                    ) : widget.chart_type === WidgetChartType.area ? (
+                        <AreaChart widget={widget}/>
+                    ) : widget.chart_type === WidgetChartType.funnel ? (
+                        <AreaChart widget={widget}/>
+                    ) : null
+                ) : (
+                    <div className='text-3xl leading-tight font-semibold truncate'>
+                      {widget.value}
+                    </div>
+                )
+            ) : (
+                <div className='text-center text-red-400'>
+                  Something went wrong, please try again or use a different query.
+                </div>
+            )}
+          </div>
+
+          {widget.type === WidgetType.scalar && widget.mdiIcon && (
+              <div className='flex justify-end w-1/4'>
+                <BaseIcon
+                    className='text-blue-500 flex-shrink-0'
+                    w='w-16'
+                    h='h-16'
+                    size={48}
+                    fill={widget.color}
+                    path={icons[widget.mdiIcon]}
+                />
+              </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/AreaChart.tsx b/frontend/src/components/SmartWidget/components/AreaChart.tsx
new file mode 100644
index 0000000..50bd5c7
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/AreaChart.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { WidgetLibName } from '../models/widget.model';
+import { ApexAreaChart } from './AreaChart/ApexAreaChart';
+import { ChartJSAreaChart } from './AreaChart/ChartJSAreaChart';
+
+export const AreaChart = ({ widget }) => {
+  return (
+    <>
+      {!widget.lib_name && <ChartJSAreaChart widget={widget} />}
+      {widget.lib_name === WidgetLibName.chartjs && (
+        <ChartJSAreaChart widget={widget} />
+      )}
+      {widget.lib_name === WidgetLibName.apex && (
+        <ApexAreaChart widget={widget} />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/AreaChart/ApexAreaChart.tsx b/frontend/src/components/SmartWidget/components/AreaChart/ApexAreaChart.tsx
new file mode 100644
index 0000000..656008a
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/AreaChart/ApexAreaChart.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { humanize } from '../../../../helpers/humanize';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+type ValueType = { [key: string]: string | number }[];
+
+export const ApexAreaChart = ({ widget }) => {
+  const dataForLineChart = (value: any[]) => {
+    if (!value?.length || value?.length > 10000)
+      return [{ name: '', data: [] }];
+
+    const valueKey = Object.keys(value[0])[1];
+    const data = value.map((el) => +el[valueKey]);
+
+    return [{ name: humanize(valueKey), data }];
+  };
+
+  const optionsForLineChart = (
+    value: ValueType,
+    chartColor: string[],
+    currency: boolean,
+  ) => {
+    const chartColors = Array.isArray(chartColor)
+      ? chartColor
+      : [chartColor || '#3751FF'];
+    const defaultOptions = {
+      xaxis: {},
+      chart: {
+        toolbar: {
+          show: true,
+          offsetX: 0,
+          offsetY: 0,
+          tools: {
+            download: true,
+            selection: true,
+            zoom: true,
+            zoomin: true,
+            zoomout: true,
+            pan: true,
+          },
+          export: {
+            csv: {
+              filename: undefined,
+              columnDelimiter: ',',
+              headerCategory: 'category',
+              headerValue: 'value',
+            },
+            svg: {
+              filename: undefined,
+            },
+            png: {
+              filename: undefined,
+            },
+          },
+        },
+      },
+      plotOptions: {
+        bar: {
+          distributed: false,
+        },
+      },
+      colors: [],
+    };
+
+    if (!value?.length || value?.length > 10000) return defaultOptions;
+
+    const key = Object.keys(value[0])[0];
+    const categories = value
+      .map((el) => el[key])
+      .map((item) =>
+        typeof item === 'string' && item?.length > 7
+          ? item?.slice(0, 7)
+          : item || '',
+      );
+
+    if (categories.length <= 3) {
+      defaultOptions.plotOptions = {
+        bar: {
+          distributed: true,
+        },
+      };
+    }
+
+    const colors = [];
+    for (let i = 0; i < categories.length; i++) {
+      colors.push(chartColors[i % chartColors.length]);
+    }
+
+    return {
+      ...defaultOptions,
+      yaxis: {
+        labels: {
+          formatter: function (value) {
+            if (currency) {
+              return '$' + value;
+            } else {
+              return value;
+            }
+          },
+        },
+      },
+      dataLabels: {
+        formatter: (val) => {
+          if (currency) {
+            return '$' + val;
+          } else {
+            return val;
+          }
+        },
+      },
+      legend: {
+        show: false,
+      },
+      xaxis: {
+        categories,
+      },
+      colors,
+    };
+  };
+
+  return (
+    <Chart
+      options={optionsForLineChart(
+        widget.value,
+        widget.color_array,
+        widget.currency,
+      )}
+      series={dataForLineChart(widget.value)}
+      type={widget.chart_type}
+      height={200}
+      style={{ width: '100%' }}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/AreaChart/ChartJSAreaChart.tsx b/frontend/src/components/SmartWidget/components/AreaChart/ChartJSAreaChart.tsx
new file mode 100644
index 0000000..5bb4cd2
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/AreaChart/ChartJSAreaChart.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import chroma from 'chroma-js';
+import { humanize } from '../../../../helpers/humanize';
+import { collectOtherData, findFirstNumericKey } from '../../widgetHelpers';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  Legend,
+  ChartData,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  Legend,
+);
+
+export const ChartJSAreaChart = ({ widget }) => {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: true,
+      },
+      x: {
+        display: true,
+      },
+    },
+    plugins: {
+      legend: {
+        display: true,
+      },
+    },
+  };
+
+  const dataForBarChart = (
+    value: any[],
+    chartColors: string[],
+  ): ChartData<'line', number[], string> => {
+    if (!value?.length) return { labels: [''], datasets: [{ data: [] }] };
+    const initColors = Array.isArray(chartColors)
+      ? chartColors
+      : [chartColors || '#3751FF'];
+
+    const valueKey = findFirstNumericKey(value[0]);
+    const label = humanize(valueKey);
+    const data = value.map((el) => +el[valueKey]);
+    const labels = value.map((el) =>
+      Object.keys(el).length <= 2
+        ? humanize(String(el[Object.keys(el)[0]]))
+        : collectOtherData(el, valueKey),
+    );
+
+    const backgroundColor =
+      labels.length > initColors.length
+        ? chroma
+            .scale([
+              chroma(initColors[0]).brighten(),
+              chroma(initColors.slice(-1)[0]).darken(),
+            ])
+            .colors(labels.length)
+        : initColors;
+
+    return {
+      labels,
+      datasets: [
+        {
+          label,
+          data,
+          backgroundColor,
+        },
+      ],
+    };
+  };
+
+  return (
+    <Line
+      data={dataForBarChart(widget.value, widget.color_array)}
+      options={options}
+      height={350}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/BarChart.tsx b/frontend/src/components/SmartWidget/components/BarChart.tsx
new file mode 100644
index 0000000..bf7a79b
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/BarChart.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ChartJSBarChart } from './BarChart/ChartJSBarChart';
+import { ApexBarChart } from './BarChart/ApexBarChart';
+import { WidgetLibName } from '../models/widget.model';
+
+export const BarChart = ({ widget }) => {
+  return (
+    <>
+      {!widget.lib_name && <ChartJSBarChart widget={widget} />}
+      {widget.lib_name === WidgetLibName.chartjs && (
+        <ChartJSBarChart widget={widget} />
+      )}
+      {widget.lib_name === WidgetLibName.apex && (
+        <ApexBarChart widget={widget} />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/BarChart/ApexBarChart.tsx b/frontend/src/components/SmartWidget/components/BarChart/ApexBarChart.tsx
new file mode 100644
index 0000000..5b3d3e7
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/BarChart/ApexBarChart.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { humanize } from '../../../../helpers/humanize';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+type ValueType = { [key: string]: string | number }[];
+
+export const ApexBarChart = ({ widget }) => {
+  const dataForBarChart = (value: any[]) => {
+    if (!value?.length || value?.length > 10000)
+      return [{ name: '', data: [] }];
+
+    const valueKey = Object.keys(value[0])[1];
+    const data = value.map((el) => +el[valueKey]);
+
+    return [{ name: humanize(valueKey), data }];
+  };
+  const optionsForBarChart = (
+    value: ValueType,
+    chartColor: string[],
+    currency: boolean,
+  ) => {
+    const chartColors = Array.isArray(chartColor)
+      ? chartColor
+      : [chartColor || '#3751FF'];
+    const defaultOptions = {
+      xaxis: {},
+      chart: {
+        toolbar: {
+          show: true,
+          offsetX: 0,
+          offsetY: 0,
+          tools: {
+            download: true,
+            selection: true,
+            zoom: true,
+          },
+          export: {
+            csv: {
+              filename: undefined,
+              columnDelimiter: ',',
+              headerCategory: 'category',
+              headerValue: 'value',
+            },
+            svg: {
+              filename: undefined,
+            },
+            png: {
+              filename: undefined,
+            },
+          },
+        },
+      },
+      plotOptions: {
+        bar: {
+          distributed: false,
+        },
+      },
+      colors: [],
+    };
+
+    if (!value?.length || value?.length > 10000) return defaultOptions;
+
+    const key = Object.keys(value[0])[0];
+    const categories = value
+      .map((el) => el[key])
+      .map((item) =>
+        typeof item === 'string' && item?.length > 20
+          ? item?.slice(0, 15)
+          : item || '',
+      );
+
+    if (categories.length <= 3) {
+      defaultOptions.plotOptions = {
+        bar: {
+          distributed: true,
+        },
+      };
+    }
+
+    const colors = [];
+    for (let i = 0; i < categories.length; i++) {
+      colors.push(chartColors[i % chartColors.length]);
+    }
+
+    return {
+      ...defaultOptions,
+      yaxis: {
+        labels: {
+          formatter: function (value) {
+            if (currency) {
+              return '$' + value;
+            } else {
+              return value;
+            }
+          },
+        },
+      },
+      dataLabels: {
+        formatter: (val) => {
+          if (currency) {
+            return '$' + val;
+          } else {
+            return val;
+          }
+        },
+      },
+      legend: {
+        show: true,
+      },
+      xaxis: {
+        categories,
+      },
+      colors,
+    };
+  };
+
+  return (
+    <Chart
+      options={optionsForBarChart(
+        widget.value,
+        widget.color_array,
+        widget.currency,
+      )}
+      series={dataForBarChart(widget.value)}
+      type={widget.chart_type}
+      height={300}
+      style={{ width: '100%' }}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/BarChart/ChartJSBarChart.tsx b/frontend/src/components/SmartWidget/components/BarChart/ChartJSBarChart.tsx
new file mode 100644
index 0000000..d6b802c
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/BarChart/ChartJSBarChart.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { humanize } from '../../../../helpers/humanize';
+import { Bar } from 'react-chartjs-2';
+import { collectOtherData, findFirstNumericKey } from '../../widgetHelpers';
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartData,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import chroma from 'chroma-js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+export const ChartJSBarChart = ({ widget }) => {
+  console.log(widget)
+  const options = () => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'top' as const,
+        },
+        title: {
+          display: true,
+          text: widget.label,
+        },
+      },
+    };
+  };
+
+  const dataForBarChart = (
+    value: any[],
+    chartColors: string[],
+  ): ChartData<'bar', number[], string> => {
+    if (!value?.length) return { labels: [''], datasets: [{ data: [] }] };
+
+    const initColors = Array.isArray(chartColors)
+      ? chartColors
+      : [chartColors || '#3751FF'];
+
+    const valueKey = findFirstNumericKey(value[0]);
+    const label = humanize(valueKey);
+    const data = value.map((el) => +el[valueKey]);
+    const labels = value.map((el) =>
+      Object.keys(el).length <= 2
+        ? humanize(String(el[Object.keys(el)[0]]))
+        : collectOtherData(el, valueKey),
+    );
+
+    const backgroundColor =
+      labels.length > initColors.length
+        ? chroma
+            .scale([
+              chroma(initColors[0]).brighten(),
+              chroma(initColors.slice(-1)[0]).darken(),
+            ])
+            .colors(labels.length)
+        : initColors;
+
+    return {
+      labels,
+      datasets: [
+        {
+          label,
+          data,
+          backgroundColor,
+        },
+      ],
+    };
+  };
+
+  return (
+    <Bar
+      data={dataForBarChart(widget.value, widget.color_array)}
+      options={options()}
+      height={350}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/FunnelChart.tsx b/frontend/src/components/SmartWidget/components/FunnelChart.tsx
new file mode 100644
index 0000000..3d91280
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/FunnelChart.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { humanize } from '../../../helpers/humanize';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+type ValueType = { [key: string]: string | number }[];
+
+export const FunnelChart = ({ widget }) => {
+  const dataForBarChart = (value: any[]) => {
+    if (!value?.length || value?.length > 10000)
+      return [{ name: '', data: [] }];
+    const valueKey = Object.keys(value[0])[1];
+    const data = value.map((el) => +el[valueKey]);
+
+    return [{ name: humanize(valueKey), data }];
+  };
+  const optionsForBarChart = (
+    value: ValueType,
+    chartColor: string[],
+    currency: boolean,
+  ) => {
+    const chartColors = Array.isArray(chartColor)
+      ? chartColor
+      : [chartColor || '#3751FF'];
+    const defaultOptions = {
+      xaxis: {},
+      chart: {
+        toolbar: {
+          show: true,
+          offsetX: 0,
+          offsetY: 0,
+          tools: {
+            download: true,
+            selection: true,
+            zoom: true,
+          },
+          export: {
+            csv: {
+              filename: undefined,
+              columnDelimiter: ',',
+              headerCategory: 'category',
+              headerValue: 'value',
+            },
+            svg: {
+              filename: undefined,
+            },
+            png: {
+              filename: undefined,
+            },
+          },
+        },
+      },
+      plotOptions: {
+        bar: {
+          distributed: false,
+          horizontal: true,
+          isFunnel: true,
+        },
+      },
+      colors: [],
+    };
+
+    if (!value?.length || value?.length > 10000) return defaultOptions;
+
+    const key = Object.keys(value[0])[0];
+    const categories = value
+      .map((el) => el[key])
+      .map((item) =>
+        typeof item === 'string' && item?.length > 20
+          ? item?.slice(0, 15)
+          : item || '',
+      );
+
+    if (categories.length <= 3) {
+      defaultOptions.plotOptions = {
+        bar: {
+          distributed: true,
+          horizontal: true,
+          isFunnel: true,
+        },
+      };
+    }
+
+    const colors = [];
+    for (let i = 0; i < categories.length; i++) {
+      colors.push(chartColors[i % chartColors.length]);
+    }
+
+    return {
+      ...defaultOptions,
+      yaxis: {
+        labels: {
+          formatter: function (value) {
+            if (currency) {
+              return '$' + value;
+            } else {
+              return value;
+            }
+          },
+        },
+      },
+      dataLabels: {
+        formatter: (val) => {
+          if (currency) {
+            return '$' + val;
+          } else {
+            return val;
+          }
+        },
+      },
+      legend: {
+        show: true,
+      },
+      xaxis: {
+        categories,
+      },
+      colors,
+    };
+  };
+
+  return (
+    <Chart
+      options={optionsForBarChart(
+        widget.value,
+        widget.color_array,
+        widget.currency,
+      )}
+      series={dataForBarChart(widget.value)}
+      type={widget.chart_type}
+      height={300}
+      style={{ width: '100%' }}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/LineChart.tsx b/frontend/src/components/SmartWidget/components/LineChart.tsx
new file mode 100644
index 0000000..3b9e7b0
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/LineChart.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { WidgetLibName } from '../models/widget.model';
+import { ApexLineChart } from './LineChart/ApexLineChart';
+import { ChartJSLineChart } from './LineChart/ChartJSLineChart';
+
+export const LineChart = ({ widget }) => {
+  return (
+    <>
+      {!widget.lib_name && <ChartJSLineChart widget={widget} />}
+      {widget.lib_name === WidgetLibName.chartjs && (
+        <ChartJSLineChart widget={widget} />
+      )}
+      {widget.lib_name === WidgetLibName.apex && (
+        <ApexLineChart widget={widget} />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/LineChart/ApexLineChart.tsx b/frontend/src/components/SmartWidget/components/LineChart/ApexLineChart.tsx
new file mode 100644
index 0000000..aa77a76
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/LineChart/ApexLineChart.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { humanize } from '../../../../helpers/humanize';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+type ValueType = { [key: string]: string | number }[];
+
+export const ApexLineChart = ({ widget }) => {
+  const dataForLineChart = (value: any[]) => {
+    if (!value?.length || value?.length > 10000)
+      return [{ name: '', data: [] }];
+
+    const valueKey = Object.keys(value[0])[1];
+    const data = value.map((el) => +el[valueKey]);
+
+    return [{ name: humanize(valueKey), data }];
+  };
+
+  const optionsForLineChart = (
+    value: ValueType,
+    chartColor: string[],
+    currency: boolean,
+  ) => {
+    const chartColors = Array.isArray(chartColor)
+      ? chartColor
+      : [chartColor || '#3751FF'];
+    const defaultOptions = {
+      xaxis: {},
+      chart: {
+        toolbar: {
+          show: true,
+          offsetX: 0,
+          offsetY: 0,
+          tools: {
+            download: true,
+            selection: true,
+            zoom: true,
+            zoomin: true,
+            zoomout: true,
+            pan: true,
+          },
+          export: {
+            csv: {
+              filename: undefined,
+              columnDelimiter: ',',
+              headerCategory: 'category',
+              headerValue: 'value',
+            },
+            svg: {
+              filename: undefined,
+            },
+            png: {
+              filename: undefined,
+            },
+          },
+        },
+      },
+      plotOptions: {
+        bar: {
+          distributed: false,
+        },
+      },
+      colors: [],
+    };
+
+    if (!value?.length || value?.length > 10000) return defaultOptions;
+
+    const key = Object.keys(value[0])[0];
+    const categories = value
+      .map((el) => el[key])
+      .map((item) =>
+        typeof item === 'string' && item?.length > 7
+          ? item?.slice(0, 7)
+          : item || '',
+      );
+
+    if (categories.length <= 3) {
+      defaultOptions.plotOptions = {
+        bar: {
+          distributed: true,
+        },
+      };
+    }
+
+    const colors = [];
+    for (let i = 0; i < categories.length; i++) {
+      colors.push(chartColors[i % chartColors.length]);
+    }
+
+    return {
+      ...defaultOptions,
+      yaxis: {
+        labels: {
+          formatter: function (value) {
+            if (currency) {
+              return '$' + value;
+            } else {
+              return value;
+            }
+          },
+        },
+      },
+      dataLabels: {
+        formatter: (val) => {
+          if (currency) {
+            return '$' + val;
+          } else {
+            return val;
+          }
+        },
+      },
+      legend: {
+        show: false,
+      },
+      xaxis: {
+        categories,
+      },
+      colors,
+    };
+  };
+
+  return (
+    <Chart
+      options={optionsForLineChart(
+        widget.value,
+        widget.color_array,
+        widget.currency,
+      )}
+      series={dataForLineChart(widget.value)}
+      type={widget.chart_type}
+      height={200}
+      style={{ width: '100%' }}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/LineChart/ChartJSLineChart.tsx b/frontend/src/components/SmartWidget/components/LineChart/ChartJSLineChart.tsx
new file mode 100644
index 0000000..a2fe5ba
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/LineChart/ChartJSLineChart.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { humanize } from '../../../../helpers/humanize';
+import { Line } from 'react-chartjs-2';
+import chroma from 'chroma-js';
+import { collectOtherData, findFirstNumericKey } from '../../widgetHelpers';
+import { Widget } from '../../models/widget.model';
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+  ChartData,
+} from 'chart.js';
+
+Chart.register(
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+);
+
+interface Props {
+  widget: Widget;
+}
+
+export const ChartJSLineChart = (props: Props) => {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: true,
+      },
+      x: {
+        display: true,
+      },
+    },
+    plugins: {
+      legend: {
+        display: true,
+      },
+    },
+  };
+
+  const dataForBarChart = (
+    value: any[],
+    chartColors: string[],
+  ): ChartData<'line', number[], string> => {
+    if (!value?.length) return { labels: [''], datasets: [{ data: [] }] };
+    const initColors = Array.isArray(chartColors)
+      ? chartColors
+      : [chartColors || '#3751FF'];
+
+    const valueKey = findFirstNumericKey(value[0]);
+    const label = humanize(valueKey);
+    const data = value.map((el) => +el[valueKey]);
+    const labels = value.map((el) =>
+      Object.keys(el).length <= 2
+        ? humanize(String(el[Object.keys(el)[0]]))
+        : collectOtherData(el, valueKey),
+    );
+
+    const backgroundColor =
+      labels.length > initColors.length
+        ? chroma
+            .scale([
+              chroma(initColors[0]).brighten(),
+              chroma(initColors.slice(-1)[0]).darken(),
+            ])
+            .colors(labels.length)
+        : initColors;
+
+    return {
+      labels,
+      datasets: [
+        {
+          label,
+          data,
+          backgroundColor,
+        },
+      ],
+    };
+  };
+
+  return (
+    <Line
+      data={dataForBarChart(props.widget.value, props.widget.color_array)}
+      options={options}
+      height={350}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/PieChart.tsx b/frontend/src/components/SmartWidget/components/PieChart.tsx
new file mode 100644
index 0000000..f6f0fd3
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/PieChart.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { WidgetLibName } from '../models/widget.model';
+import { ApexPieChart } from './PieChart/ApexPieChart';
+import { ChartJSPieChart } from './PieChart/ChartJSPieChart';
+
+export const PieChart = ({ widget }) => {
+  return (
+    <>
+      {!widget.lib_name && <ChartJSPieChart widget={widget} />}
+      {widget.lib_name === WidgetLibName.chartjs && (
+        <ChartJSPieChart widget={widget} />
+      )}
+      {widget.lib_name === WidgetLibName.apex && (
+        <ApexPieChart widget={widget} />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/PieChart/ApexPieChart.tsx b/frontend/src/components/SmartWidget/components/PieChart/ApexPieChart.tsx
new file mode 100644
index 0000000..dfe5572
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/PieChart/ApexPieChart.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import chroma from 'chroma-js';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+type ValueType = { [key: string]: string | number }[];
+
+export const ApexPieChart = ({ widget }) => {
+  const optionsForPieChart = (value: ValueType, chartColor: string) => {
+    const chartColors = Array.isArray(chartColor)
+      ? chartColor
+      : [chartColor || '#3751FF'];
+    const defaultOptions = {
+      xaxis: {},
+      toolbar: {
+        show: true,
+        offsetX: 0,
+        offsetY: 0,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          customIcons: [],
+        },
+        export: {
+          csv: {
+            filename: undefined,
+            columnDelimiter: ',',
+            headerCategory: 'category',
+            headerValue: 'value',
+          },
+          svg: {
+            filename: undefined,
+          },
+          png: {
+            filename: undefined,
+          },
+        },
+        autoSelected: 'zoom',
+      },
+      colors: [],
+    };
+
+    if (!value?.length || value?.length > 10000) return defaultOptions;
+
+    if (
+      !isNaN(Number(value[0][Object.keys(value[0])[1]])) &&
+      isFinite(Number(value[0][Object.keys(value[0])[1]]))
+    ) {
+      const labels = value
+        .map((el) => String(el[Object.keys(value[0])[0]]))
+        .reverse();
+
+      let colors: string[] | (string & any[]);
+      if (labels.length > chartColors.length) {
+        colors = chroma
+          .scale([
+            chroma(chartColors.at(0)).brighten(),
+            chroma(chartColors.at(-1)).darken(),
+          ])
+          .colors(labels.length);
+      } else {
+        colors = chartColors;
+      }
+
+      return {
+        ...defaultOptions,
+        colors,
+        labels,
+      };
+    }
+    const key = Object.keys(value[0])[1];
+    const categories = value.map((el) => String(el[key])).reverse();
+
+    return {
+      ...defaultOptions,
+      labels: categories,
+    };
+  };
+  const dataForPieChart = (value: any[]) => {
+    if (!value?.length || value?.length > 10000)
+      return [{ name: '', data: [] }];
+
+    if (
+      !isNaN(parseFloat(value[0][Object.keys(value[0])[1]])) &&
+      isFinite(value[0][Object.keys(value[0])[1]])
+    ) {
+      return value.map((el) => +el[Object.keys(value[0])[1]]).reverse();
+    }
+    const valueKey = Object.keys(value[0])[0];
+    return value.map((el) => +el[valueKey]).reverse();
+  };
+
+  return (
+    <Chart
+      options={optionsForPieChart(widget.value, widget.color_array)}
+      series={dataForPieChart(widget.value)}
+      type={widget.chart_type}
+      height={200}
+      style={{ width: '100%' }}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/components/PieChart/ChartJSPieChart.tsx b/frontend/src/components/SmartWidget/components/PieChart/ChartJSPieChart.tsx
new file mode 100644
index 0000000..2a20155
--- /dev/null
+++ b/frontend/src/components/SmartWidget/components/PieChart/ChartJSPieChart.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { humanize } from '../../../../helpers/humanize';
+import { Pie } from 'react-chartjs-2';
+import chroma from 'chroma-js';
+import { collectOtherData, findFirstNumericKey } from '../../widgetHelpers';
+
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  ChartData,
+} from 'chart.js';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+export const ChartJSPieChart = ({ widget }) => {
+  const options = () => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'right' as const,
+        },
+        title: {
+          display: true,
+          text: widget.label,
+        },
+      },
+    };
+  };
+
+  const dataForBarChart = (
+    value: any[],
+    chartColors: string[],
+  ): ChartData<'pie', number[], string> => {
+    if (!value?.length) return { labels: [''], datasets: [{ data: [] }] };
+    const initColors = Array.isArray(chartColors)
+      ? chartColors
+      : [chartColors || '#3751FF'];
+
+    const valueKey = findFirstNumericKey(value[0]);
+    const label = humanize(valueKey);
+    const data = value.map((el) => +el[valueKey]);
+    const labels = value.map((el) =>
+      Object.keys(el).length <= 2
+        ? humanize(String(el[Object.keys(el)[0]]))
+        : collectOtherData(el, valueKey),
+    );
+
+    const backgroundColor =
+      labels.length > initColors.length
+        ? chroma
+            .scale([
+              chroma(initColors[0]).brighten(),
+              chroma(initColors.slice(-1)[0]).darken(),
+            ])
+            .colors(labels.length)
+        : initColors;
+
+    return {
+      labels,
+      datasets: [
+        {
+          label,
+          data,
+          backgroundColor,
+        },
+      ],
+    };
+  };
+
+  return (
+    <Pie
+      data={dataForBarChart(widget.value, widget.color_array)}
+      options={options()}
+      height={350}
+    />
+  );
+};
diff --git a/frontend/src/components/SmartWidget/models/widget.model.ts b/frontend/src/components/SmartWidget/models/widget.model.ts
new file mode 100644
index 0000000..362d65c
--- /dev/null
+++ b/frontend/src/components/SmartWidget/models/widget.model.ts
@@ -0,0 +1,35 @@
+export enum WidgetLibName {
+  apex = 'apex',
+  chartjs = 'chartjs',
+}
+
+export enum WidgetChartType {
+  scalar = 'scalar',
+  bar = 'bar',
+  line = 'line',
+  pie = 'pie',
+  area = 'area',
+  funnel = 'funnel',
+}
+
+export enum WidgetType {
+  chart = 'chart',
+  scalar = 'scalar',
+}
+
+export interface Widget {
+  type: WidgetType;
+  chartType: WidgetChartType;
+  query: string;
+  mdiIcon: string;
+  iconColor: string;
+  label: string;
+  id: string;
+  lib?: WidgetLibName;
+  value: any[];
+  chartColors: string[];
+  options?: any;
+  prompt: string;
+  color: string;
+  color_array: string[];
+}
diff --git a/frontend/src/components/SmartWidget/widgetHelpers.tsx b/frontend/src/components/SmartWidget/widgetHelpers.tsx
new file mode 100644
index 0000000..baf7969
--- /dev/null
+++ b/frontend/src/components/SmartWidget/widgetHelpers.tsx
@@ -0,0 +1,36 @@
+import { humanize } from '../../helpers/humanize';
+
+interface DataObject {
+  [key: string]: any;
+}
+
+export const findFirstNumericKey = (obj: Record<string, any>): string | undefined => {
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === 'string') {
+      const trimmedValue = value.trim();
+
+      // Only allow numbers, and optionally a single decimal point
+      const isNumeric = /^-?\d+(\.\d+)?$/.test(trimmedValue);
+
+      if (isNumeric) {
+        // Check if the number is the same as the trimmed value
+        // This is to avoid cases like '1.0' being treated as a number
+        const numberValue = parseFloat(trimmedValue);
+        if (numberValue.toString() === trimmedValue) {
+          return key;
+        }
+      }
+    }
+  }
+  return undefined;
+};
+
+export const collectOtherData = (
+    obj: DataObject,
+    excludeKey: string,
+): string => {
+  return Object.entries(obj)
+      .filter(([key, _]) => key !== excludeKey)
+      .map(([_, value]) => humanize(value))
+      .join(' / ');
+};
diff --git a/frontend/src/components/SwitchField.tsx b/frontend/src/components/SwitchField.tsx
new file mode 100644
index 0000000..bdcaef3
--- /dev/null
+++ b/frontend/src/components/SwitchField.tsx
@@ -0,0 +1,22 @@
+import React, { useEffect, useId, useState } from 'react';
+import Switch from "react-switch";
+
+
+
+export const SwitchField = ({
+                        field,
+                        form,
+                        disabled
+                                }) => {
+    const handleChange = (data: any) => {
+        form.setFieldValue(
+            field.name,
+            data,
+        );
+    };
+
+
+    return (
+        <Switch checkedIcon={false} uncheckedIcon={false} className={'check'} onChange={handleChange}  checked={!!field?.value} disabled={disabled} />
+    );
+};
diff --git a/frontend/src/components/TableSampleClients.tsx b/frontend/src/components/TableSampleClients.tsx
new file mode 100644
index 0000000..3fb3411
--- /dev/null
+++ b/frontend/src/components/TableSampleClients.tsx
@@ -0,0 +1,141 @@
+import { mdiEye, mdiTrashCan } from '@mdi/js'
+import React, { useState } from 'react'
+import { useSampleClients } from '../hooks/sampleData'
+import { Client } from '../interfaces'
+import BaseButton from './BaseButton'
+import BaseButtons from './BaseButtons'
+import CardBoxModal from './CardBoxModal'
+import UserAvatar from './UserAvatar'
+
+const TableSampleClients = () => {
+  const { clients } = useSampleClients()
+
+  const perPage = 5
+
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const clientsPaginated = clients.slice(perPage * currentPage, perPage * (currentPage + 1))
+
+  const numPages = clients.length / perPage
+
+  const pagesList = []
+
+  for (let i = 0; i < numPages; i++) {
+    pagesList.push(i)
+  }
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  return (
+    <>
+      <CardBoxModal
+        title="Sample modal"
+        buttonColor="info"
+        buttonLabel="Done"
+        isActive={isModalInfoActive}
+        onConfirm={handleModalAction}
+        onCancel={handleModalAction}
+      >
+        <p>
+          Lorem ipsum dolor sit amet <b>adipiscing elit</b>
+        </p>
+        <p>This is sample modal</p>
+      </CardBoxModal>
+
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="danger"
+        buttonLabel="Confirm"
+        isActive={isModalTrashActive}
+        onConfirm={handleModalAction}
+        onCancel={handleModalAction}
+      >
+        <p>
+          Lorem ipsum dolor sit amet <b>adipiscing elit</b>
+        </p>
+        <p>This is sample modal</p>
+      </CardBoxModal>
+
+      <table>
+        <thead>
+          <tr>
+            <th />
+            <th>Name</th>
+            <th>Company</th>
+            <th>City</th>
+            <th>Progress</th>
+            <th>Created</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {clientsPaginated.map((client: Client) => (
+            <tr key={client.id}>
+              <td className="border-b-0 lg:w-6 before:hidden">
+                <UserAvatar username={client.name} className="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
+              </td>
+              <td data-label="Name">{client.name}</td>
+              <td data-label="Company">{client.company}</td>
+              <td data-label="City">{client.city}</td>
+              <td data-label="Progress" className="lg:w-32">
+                <progress
+                  className="flex w-2/5 self-center lg:w-full"
+                  max="100"
+                  value={client.progress}
+                >
+                  {client.progress}
+                </progress>
+              </td>
+              <td data-label="Created" className="lg:w-1 whitespace-nowrap">
+                <small className="text-gray-500 dark:text-slate-400">{client.created}</small>
+              </td>
+              <td className="before:hidden lg:w-1 whitespace-nowrap">
+                <BaseButtons type="justify-start lg:justify-end" noWrap>
+                  <BaseButton
+                    color="info"
+                    icon={mdiEye}
+                    onClick={() => setIsModalInfoActive(true)}
+                    small
+                  />
+                  <BaseButton
+                    color="danger"
+                    icon={mdiTrashCan}
+                    onClick={() => setIsModalTrashActive(true)}
+                    small
+                  />
+                </BaseButtons>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+        <div className="flex flex-col md:flex-row items-center justify-between py-3 md:py-0">
+          <BaseButtons>
+            {pagesList.map((page) => (
+              <BaseButton
+                key={page}
+                active={page === currentPage}
+                label={page + 1}
+                color={page === currentPage ? 'lightDark' : 'whiteDark'}
+                small
+                onClick={() => setCurrentPage(page)}
+              />
+            ))}
+          </BaseButtons>
+          <small className="mt-6 md:mt-0">
+            Page {currentPage + 1} of {numPages}
+          </small>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TableSampleClients
diff --git a/frontend/src/components/Ui_announcements/CardUi_announcements.tsx b/frontend/src/components/Ui_announcements/CardUi_announcements.tsx
new file mode 100644
index 0000000..341e194
--- /dev/null
+++ b/frontend/src/components/Ui_announcements/CardUi_announcements.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  ui_announcements: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardUi_announcements = ({
+  ui_announcements,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_UI_ANNOUNCEMENTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && ui_announcements.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/ui_announcements/ui_announcements-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.headline}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/ui_announcements/ui_announcements-edit/?id=${item.id}`}
+                  pathView={`/ui_announcements/ui_announcements-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Headline</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.headline }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Content</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.content }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Audience</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.audience }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PublishFrom</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.publish_from) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PublishTo</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.publish_to) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && ui_announcements.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardUi_announcements;
diff --git a/frontend/src/components/Ui_announcements/ListUi_announcements.tsx b/frontend/src/components/Ui_announcements/ListUi_announcements.tsx
new file mode 100644
index 0000000..fbca9e7
--- /dev/null
+++ b/frontend/src/components/Ui_announcements/ListUi_announcements.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    ui_announcements: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListUi_announcements = ({ ui_announcements, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_UI_ANNOUNCEMENTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && ui_announcements.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/ui_announcements/ui_announcements-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Headline</p>
+                                <p className={'line-clamp-2'}>{ item.headline }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Content</p>
+                                <p className={'line-clamp-2'}>{ item.content }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Audience</p>
+                                <p className={'line-clamp-2'}>{ item.audience }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PublishFrom</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.publish_from) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PublishTo</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.publish_to) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/ui_announcements/ui_announcements-edit/?id=${item.id}`}
+                              pathView={`/ui_announcements/ui_announcements-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && ui_announcements.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListUi_announcements
\ No newline at end of file
diff --git a/frontend/src/components/Ui_announcements/TableUi_announcements.tsx b/frontend/src/components/Ui_announcements/TableUi_announcements.tsx
new file mode 100644
index 0000000..d6185de
--- /dev/null
+++ b/frontend/src/components/Ui_announcements/TableUi_announcements.tsx
@@ -0,0 +1,489 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/ui_announcements/ui_announcementsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureUi_announcementsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import BigCalendar from "../BigCalendar";
+import { SlotInfo } from 'react-big-calendar';
+
+
+const perPage =  100 
+
+const TableSampleUi_announcements = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { ui_announcements, loading, count, notify: ui_announcementsNotify, refetch } = useAppSelector((state) => state.ui_announcements)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (ui_announcementsNotify.showNotification) {
+          notify(ui_announcementsNotify.typeNotification, ui_announcementsNotify.textNotification);
+      }
+  }, [ui_announcementsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+  const handleCreateEventAction = ({ start, end }: SlotInfo) => {
+      router.push(
+          `/ui_announcements/ui_announcements-new?dateRangeStart=${start.toISOString()}&dateRangeEnd=${end.toISOString()}`,
+      );
+  };
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `ui_announcements`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={ui_announcements ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {!showGrid && (
+            <BigCalendar
+              events={ui_announcements}
+              showField={'headline'}
+              start-data-key={'publish_from'}
+              end-data-key={'publish_to'}
+              handleDeleteAction={handleDeleteModalAction}
+              pathEdit={`/ui_announcements/ui_announcements-edit/?id=`}
+              pathView={`/ui_announcements/ui_announcements-view/?id=`}
+              handleCreateEventAction={handleCreateEventAction}
+              onDateRangeChange={(range) => {
+                  loadData(0,`&calendarStart=${range.start}&calendarEnd=${range.end}`);
+              }}
+              entityName={'ui_announcements'}
+          />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleUi_announcements
diff --git a/frontend/src/components/Ui_announcements/configureUi_announcementsCols.tsx b/frontend/src/components/Ui_announcements/configureUi_announcementsCols.tsx
new file mode 100644
index 0000000..1e82767
--- /dev/null
+++ b/frontend/src/components/Ui_announcements/configureUi_announcementsCols.tsx
@@ -0,0 +1,187 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_UI_ANNOUNCEMENTS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'headline',
+            headerName: 'Headline',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'content',
+            headerName: 'Content',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'audience',
+            headerName: 'Audience',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'publish_from',
+            headerName: 'PublishFrom',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.publish_from),
+          
+        },
+        
+        {
+            field: 'publish_to',
+            headerName: 'PublishTo',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.publish_to),
+          
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/ui_announcements/ui_announcements-edit/?id=${params?.row?.id}`}
+                      pathView={`/ui_announcements/ui_announcements-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Uploaders/FilesUploader.js b/frontend/src/components/Uploaders/FilesUploader.js
new file mode 100644
index 0000000..26a4b1a
--- /dev/null
+++ b/frontend/src/components/Uploaders/FilesUploader.js
@@ -0,0 +1,150 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from "prop-types";
+import FileUploader from "components/FormItems/uploaders/UploadService";
+import Errors from "../../../components/FormItems/error/errors";
+
+const FilesUploader = (props) => {
+  const {
+    value,
+    onChange,
+    schema,
+    path,
+    max,
+    readonly
+  } = props;
+
+  const [loading, setLoading] = useState(false);
+  const inputElement = useRef(null);
+
+  const valuesArr = () => {
+    if (!value) {
+      return [];
+    }
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const fileList = () => {
+    return valuesArr().map((item) => ({
+      uid: item.id || undefined,
+      name: item.name,
+      status: 'done',
+      url: item.publicUrl,
+    }));
+  };
+
+  const handleRemove = (id) => {
+    onChange(valuesArr().filter((item) => item.id !== id));
+  };
+
+  const handleChange = async (event) => {
+    try {
+      const files = event.target.files;
+
+      if (!files || !files.length) {
+        return;
+      }
+
+      let file = files[0];
+
+      FileUploader.validate(file, schema);
+
+      setLoading(true)
+
+      file = await FileUploader.upload(
+        path,
+        file,
+        schema,
+      );
+
+      inputElement.current.value = '';
+      setLoading(false);
+      onChange([...valuesArr(), file]);
+    } catch (error) {
+      inputElement.current.value = '';
+      console.log('error', error);
+      setLoading(false);
+      Errors.showMessage(error);
+    }
+  };
+
+  const formats = () => {
+    if (schema && schema.formats) {
+      return schema.formats
+        .map((format) => `.${format}`)
+        .join(',');
+    }
+    return undefined;
+  };
+
+  const uploadButton = (
+    <label
+      className="btn btn-outline-secondary px-4 mb-2"
+      style={{ cursor: 'pointer' }}
+    >
+      {'Upload a file'}
+      <input
+        style={{ display: 'none' }}
+        disabled={loading || readonly}
+        accept={formats()}
+        type="file"
+        onChange={handleChange}
+        ref={inputElement}
+      />
+    </label>
+  );
+
+  return (
+    <div>
+      {readonly || (max && fileList().length >= max)
+        ? null
+        : uploadButton}
+
+      {valuesArr() && valuesArr().length ? (
+        <div>
+          {valuesArr().map((item) => {
+            return (
+              <div key={item.id}>
+                <i className="la la-link text-muted mr-2"></i>
+                <a
+                  href={item.publicUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  download
+                >
+                  {item.name}
+                </a>
+
+                {!readonly && (
+                  <button
+                    className="btn btn-link"
+                    type="button"
+                    onClick={() =>
+                      handleRemove(item.id)
+                    }
+                  >
+                    <i className="la la-times"></i>
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+FilesUploader.propTypes = {
+  readonly: PropTypes.bool,
+  path: PropTypes.string,
+  max: PropTypes.number,
+  schema: PropTypes.shape({
+    image: PropTypes.bool,
+    size: PropTypes.number,
+    formats: PropTypes.arrayOf(PropTypes.string),
+  }),
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+};
+
+export default FilesUploader;
diff --git a/frontend/src/components/Uploaders/ImagesUploader.js b/frontend/src/components/Uploaders/ImagesUploader.js
new file mode 100644
index 0000000..725abe7
--- /dev/null
+++ b/frontend/src/components/Uploaders/ImagesUploader.js
@@ -0,0 +1,237 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import FileUploader from 'components/FormItems/uploaders/UploadService';
+import Errors from '../../../components/FormItems/error/errors';
+import {makeStyles} from "@mui/styles";
+
+const useStyles = makeStyles({
+  actionButtonsWrapper: {
+    position: 'relative',
+  },
+  previewContent: {
+    padding: '0px !important',
+  },
+  imageItem: {
+    '&.MuiGrid-root': {
+      margin: 10,
+      boxShadow: '2px 2px 8px 0 rgb(0 0 0 / 40%)',
+      borderRadius: 10,
+    },
+    height: '100px',
+  },
+  actionButtons: {
+    position: 'absolute',
+    bottom: 5,
+    right: 4,
+  },
+  previewContainer: {
+    '& button': {
+      position: 'absolute',
+      top: 10,
+      right: 10,
+      '& svg': {
+        height: 50,
+        width: 50,
+        fill: '#FFF',
+        stroke: '#909090',
+        strokeWidth: 0.5,
+      },
+    },
+  },
+  button: {
+    padding: '0px !important',
+    minWidth: '45px !important',
+    '& svg': {
+      height: 36,
+      width: 36,
+      fill: '#FFF',
+      stroke: '#909090',
+      strokeWidth: 0.5,
+    },
+  }
+});
+
+const ImagesUploader = (props) => {
+  const classes = useStyles();
+  const { value, onChange, schema, path, max, readonly, name } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [imageMeta, setImageMeta] = useState({
+    imageSrc: null,
+    imageAlt: null,
+  });
+  const inputElement = useRef(null);
+
+  const valuesArr = () => {
+    if (!value) {
+      return [];
+    }
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const fileList = () => {
+    return valuesArr().map((item) => ({
+      uid: item.id || undefined,
+      name: item.name,
+      status: 'done',
+      url: item.publicUrl,
+    }));
+  };
+
+  const handleRemove = (id) => {
+    onChange(valuesArr().filter((item) => item.id !== id));
+  };
+
+  const handleChange = async (event) => {
+    try {
+      const files = event.target.files;
+
+      if (!files || !files.length) {
+        return;
+      }
+
+      let file = files[0];
+
+      FileUploader.validate(file, schema);
+
+      setLoading(true);
+
+      file = await FileUploader.upload(path, file, schema);
+
+      inputElement.current.value = '';
+      setLoading(false);
+      onChange([...valuesArr(), file]);
+    } catch (error) {
+      inputElement.current.value = '';
+      console.log('error', error);
+      setLoading(false);
+      Errors.showMessage(error);
+    }
+  };
+
+  const doPreviewImage = (image) => {
+    setImageMeta({
+      imageSrc: image.publicUrl,
+      imageAlt: image.name,
+    });
+    setShowPreview(true);
+  };
+
+  const doCloseImageModal = () => {
+    setImageMeta({
+      imageSrc: null,
+      imageAlt: null,
+    });
+    setShowPreview(false);
+  };
+
+  const uploadButton = (
+    <Box>
+      <label
+        htmlFor={"button-file-" + name}
+        style={{ cursor: 'pointer' }}
+      >
+        <input
+          id={"button-file-" + name}
+          style={{ display: 'none' }}
+          disabled={loading || readonly}
+          accept='image/*'
+          type='file'
+          onChange={handleChange}
+          ref={inputElement}
+        />
+        <Button variant="contained" component="span">
+          Upload an Image
+        </Button>{" "}
+      </label>
+    </Box>
+  );
+
+  return (
+    <Box>
+      {readonly || (max && fileList().length >= max) ? null : uploadButton}
+
+      {valuesArr() && valuesArr().length ? (
+        <Grid container>
+          {valuesArr().map((item) => {
+            return (
+              <Grid
+                item
+                className={classes.imageItem}
+                key={item.id}
+              >
+                <img
+                  alt={item.name}
+                  src={item.publicUrl}
+                  style={{
+                    width: '100px',
+                    height: '100px',
+                    objectFit: 'cover',
+                    borderRadius: 10,
+                  }}
+                />
+
+                <div className={classes.actionButtonsWrapper}>
+                  <div className={classes.actionButtons}>
+                    <Button
+                      classes={{ root: classes.button }}
+                      variant="text"
+                      onClick={() => doPreviewImage(item)}
+                    >
+                      <SearchIcon />
+                    </Button>
+                    {!readonly && (
+                      <Button
+                        classes={{ root: classes.button }}
+                        variant="text"
+                        onClick={() => handleRemove(item.id)}
+                      >
+                        <CloseIcon />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </Grid>
+            );
+          })}
+        </Grid>
+      ) : null}
+      <Dialog
+        open={showPreview}
+        onClose={doCloseImageModal}
+        classes={{ root: classes.previewContainer }}
+      >
+        <Button
+          variant="text"
+          onClick={() => doCloseImageModal()}
+        >
+          <CloseIcon />
+        </Button>
+        <img src={imageMeta.imageSrc} alt={imageMeta.imageAlt} />
+      </Dialog>
+    </Box>
+  );
+};
+
+ImagesUploader.propTypes = {
+  readonly: PropTypes.bool,
+  path: PropTypes.string,
+  max: PropTypes.number,
+  schema: PropTypes.shape({
+    image: PropTypes.bool,
+    size: PropTypes.number,
+    formats: PropTypes.arrayOf(PropTypes.string),
+  }),
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  name: PropTypes.string,
+};
+
+export default ImagesUploader;
diff --git a/frontend/src/components/Uploaders/UploadService.js b/frontend/src/components/Uploaders/UploadService.js
new file mode 100644
index 0000000..33620a6
--- /dev/null
+++ b/frontend/src/components/Uploaders/UploadService.js
@@ -0,0 +1,79 @@
+import { v4 as uuidv4 } from 'uuid';
+import Axios from "axios";
+import {baseURLApi} from "../../config";
+
+function extractExtensionFrom(filename) {
+  if (!filename) {
+    return null;
+  }
+
+  const regex = /(?:\.([^.]+))?$/;
+  return regex.exec(filename)[1];
+}
+
+export default class FileUploader {
+  static validate(file, schema) {
+    if (!schema) {
+      return;
+    }
+
+    if (schema.image) {
+      if (!file.type.startsWith("image")) {
+        throw new Error("You must upload an image");
+      }
+    }
+
+    if (schema.size && file.size > schema.size) {
+      throw new Error("File is too big.");
+    }
+
+    const extension = extractExtensionFrom(file.name);
+
+    if (schema.formats && !schema.formats.includes(extension)) {
+      throw new Error("Invalid format");
+    }
+  }
+
+  static async upload(path, file, schema) {
+    try {
+      this.validate(file, schema);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+
+    const extension = extractExtensionFrom(file.name);
+    const id = uuidv4();
+    const filename = `${id}.${extension}`;
+    const privateUrl = `${path}/${filename}`;
+
+    const publicUrl = await this.uploadToServer(file, path, filename);
+
+    return {
+      id: id,
+      name: file.name,
+      sizeInBytes: file.size,
+      privateUrl,
+      publicUrl,
+      new: true,
+    };
+  }
+
+  static async uploadToServer(file, path, filename) {
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("filename", filename);
+    const uri = `/file/upload/${path}`;
+    await Axios.post(uri, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    const privateUrl = `${path}/${filename}`;
+
+    console.log("process.env.NODE_ENV in uploadToServer function", process.env.NODE_ENV);
+    console.log("baseURLApi in uploadToServer function", baseURLApi);
+
+    return `${baseURLApi}/file/download?privateUrl=${privateUrl}`;
+  }
+}
diff --git a/frontend/src/components/UserAvatar.tsx b/frontend/src/components/UserAvatar.tsx
new file mode 100644
index 0000000..257ebdb
--- /dev/null
+++ b/frontend/src/components/UserAvatar.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable @next/next/no-img-element */
+// Why disabled:
+// avatars.dicebear.com provides svg avatars
+// next/image needs dangerouslyAllowSVG option for that
+
+import React, { ReactNode } from 'react';
+import BaseIcon from "./BaseIcon";
+import {mdiAccountCircleOutline} from "@mdi/js";
+
+type Props = {
+  username: string;
+  avatar?: string | null;
+  image?: object | null;
+  api?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export default function UserAvatar({
+                                     username,
+                                     image,
+                                     avatar,
+                                     className = '',
+                                     children,
+                                   }: Props) {
+
+  const avatarImage = (image && image[0]) ? `${image[0].publicUrl}` : '#';
+
+  return (
+      <div id="profilEdit" className={className}>
+          {avatarImage === "#"
+              ? <BaseIcon
+                  path={mdiAccountCircleOutline}
+                  size={30}
+                  className={'dark:text-white dark:hover:text-slate-400 hover:text-black transition-colors'}
+              />
+              : <img
+                  src={avatarImage}
+                  alt={username}
+                  className='rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800'
+              />
+          }
+        {children}
+      </div>
+  );
+}
diff --git a/frontend/src/components/UserAvatarCurrentUser.tsx b/frontend/src/components/UserAvatarCurrentUser.tsx
new file mode 100644
index 0000000..7bfc768
--- /dev/null
+++ b/frontend/src/components/UserAvatarCurrentUser.tsx
@@ -0,0 +1,43 @@
+import React, {ReactNode, useEffect, useState} from 'react';
+import { useAppSelector } from '../stores/hooks';
+import UserAvatar from './UserAvatar';
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export default function UserAvatarCurrentUser({
+                                                className = '',
+                                                children,
+                                              }: Props) {
+  const userName = useAppSelector((state) => state.main.userName);
+  const userAvatar = useAppSelector((state) => state.main.userAvatar);
+  const { currentUser, isFetching, token } = useAppSelector(
+      (state) => state.auth,
+  );
+  const { users, loading } = useAppSelector((state) => state.users);
+
+  const [ avatar, setAvatar ] = useState(null)
+
+  useEffect(() => {
+    currentUserAvatarCheck()
+  }, []);
+
+  useEffect(() => {
+    currentUserAvatarCheck()
+  }, [currentUser?.id, users]);
+
+  const currentUserAvatarCheck = () => {
+    if (currentUser?.id) {
+      const image = currentUser?.avatar;
+      setAvatar(image);
+    }
+  }
+
+  return (
+      <UserAvatar username={userName} avatar={userAvatar} className={className} image={avatar}>
+        {children}
+      </UserAvatar>
+  );
+}
diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
new file mode 100644
index 0000000..a81e8a2
--- /dev/null
+++ b/frontend/src/components/UserCard.tsx
@@ -0,0 +1,49 @@
+import { mdiCheckDecagram } from '@mdi/js'
+import { Field, Form, Formik } from 'formik'
+import { useAppSelector } from '../stores/hooks'
+import CardBox from './CardBox'
+import FormCheckRadio from './FormCheckRadio'
+import UserAvatarCurrentUser from './UserAvatarCurrentUser'
+
+type Props = {
+  className?: string
+}
+
+const UserCard = ({ className }: Props) => {
+  const userName = useAppSelector((state) => state.main.userName)
+
+  return (
+    <CardBox className={className}>
+      <div className="flex flex-col lg:flex-row items-center justify-around lg:justify-center">
+        <UserAvatarCurrentUser className="mb-6 lg:mb-0 lg:mx-12" />
+        <div className="space-y-3 text-center md:text-left lg:mx-12">
+          <div className="flex justify-center md:block">
+            <Formik
+              initialValues={{
+                notifications: ['1'],
+              }}
+              onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
+            >
+              <Form>
+                <FormCheckRadio type="switch" label="Notifications">
+                  <Field type="checkbox" name="notifications" value={'1'} />
+                </FormCheckRadio>
+              </Form>
+            </Formik>
+          </div>
+          <h1 className="text-2xl">
+            Howdy, <b>{userName}</b>!
+          </h1>
+          <p>
+            Last login <b>12 mins ago</b> from <b>127.0.0.1</b>
+          </p>
+          <div className="flex justify-center md:block">
+            Verified
+          </div>
+        </div>
+      </div>
+    </CardBox>
+  )
+}
+
+export default UserCard
diff --git a/frontend/src/components/User_role_assignments/CardUser_role_assignments.tsx b/frontend/src/components/User_role_assignments/CardUser_role_assignments.tsx
new file mode 100644
index 0000000..7e2ec4f
--- /dev/null
+++ b/frontend/src/components/User_role_assignments/CardUser_role_assignments.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  user_role_assignments: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardUser_role_assignments = ({
+  user_role_assignments,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USER_ROLE_ASSIGNMENTS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && user_role_assignments.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/user_role_assignments/user_role_assignments-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.is_primary}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/user_role_assignments/user_role_assignments-edit/?id=${item.id}`}
+                  pathView={`/user_role_assignments/user_role_assignments-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>User</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.usersOneListFormatter(item.user) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Role</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.rolesOneListFormatter(item.role) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EffectiveFrom</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.effective_from) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>EffectiveTo</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.effective_to) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsPrimary</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_primary) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && user_role_assignments.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardUser_role_assignments;
diff --git a/frontend/src/components/User_role_assignments/ListUser_role_assignments.tsx b/frontend/src/components/User_role_assignments/ListUser_role_assignments.tsx
new file mode 100644
index 0000000..23e8777
--- /dev/null
+++ b/frontend/src/components/User_role_assignments/ListUser_role_assignments.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    user_role_assignments: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListUser_role_assignments = ({ user_role_assignments, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USER_ROLE_ASSIGNMENTS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && user_role_assignments.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/user_role_assignments/user_role_assignments-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>User</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.user) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Role</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.rolesOneListFormatter(item.role) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EffectiveFrom</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.effective_from) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>EffectiveTo</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.effective_to) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsPrimary</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_primary) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/user_role_assignments/user_role_assignments-edit/?id=${item.id}`}
+                              pathView={`/user_role_assignments/user_role_assignments-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && user_role_assignments.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListUser_role_assignments
\ No newline at end of file
diff --git a/frontend/src/components/User_role_assignments/TableUser_role_assignments.tsx b/frontend/src/components/User_role_assignments/TableUser_role_assignments.tsx
new file mode 100644
index 0000000..c187dfe
--- /dev/null
+++ b/frontend/src/components/User_role_assignments/TableUser_role_assignments.tsx
@@ -0,0 +1,489 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/user_role_assignments/user_role_assignmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureUser_role_assignmentsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import BigCalendar from "../BigCalendar";
+import { SlotInfo } from 'react-big-calendar';
+
+
+const perPage =  100 
+
+const TableSampleUser_role_assignments = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { user_role_assignments, loading, count, notify: user_role_assignmentsNotify, refetch } = useAppSelector((state) => state.user_role_assignments)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (user_role_assignmentsNotify.showNotification) {
+          notify(user_role_assignmentsNotify.typeNotification, user_role_assignmentsNotify.textNotification);
+      }
+  }, [user_role_assignmentsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+  const handleCreateEventAction = ({ start, end }: SlotInfo) => {
+      router.push(
+          `/user_role_assignments/user_role_assignments-new?dateRangeStart=${start.toISOString()}&dateRangeEnd=${end.toISOString()}`,
+      );
+  };
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `user_role_assignments`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={user_role_assignments ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {!showGrid && (
+            <BigCalendar
+              events={user_role_assignments}
+              showField={'is_primary'}
+              start-data-key={'effective_from'}
+              end-data-key={'effective_to'}
+              handleDeleteAction={handleDeleteModalAction}
+              pathEdit={`/user_role_assignments/user_role_assignments-edit/?id=`}
+              pathView={`/user_role_assignments/user_role_assignments-view/?id=`}
+              handleCreateEventAction={handleCreateEventAction}
+              onDateRangeChange={(range) => {
+                  loadData(0,`&calendarStart=${range.start}&calendarEnd=${range.end}`);
+              }}
+              entityName={'user_role_assignments'}
+          />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleUser_role_assignments
diff --git a/frontend/src/components/User_role_assignments/configureUser_role_assignmentsCols.tsx b/frontend/src/components/User_role_assignments/configureUser_role_assignmentsCols.tsx
new file mode 100644
index 0000000..d90dcbd
--- /dev/null
+++ b/frontend/src/components/User_role_assignments/configureUser_role_assignmentsCols.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_USER_ROLE_ASSIGNMENTS')
+    
+    return [
+        
+        {
+            field: 'user',
+            headerName: 'User',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('users'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'role',
+            headerName: 'Role',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('roles'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'effective_from',
+            headerName: 'EffectiveFrom',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.effective_from),
+          
+        },
+        
+        {
+            field: 'effective_to',
+            headerName: 'EffectiveTo',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.effective_to),
+          
+        },
+        
+        {
+            field: 'is_primary',
+            headerName: 'IsPrimary',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/user_role_assignments/user_role_assignments-edit/?id=${params?.row?.id}`}
+                      pathView={`/user_role_assignments/user_role_assignments-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Users/CardUsers.tsx b/frontend/src/components/Users/CardUsers.tsx
new file mode 100644
index 0000000..d8c73cc
--- /dev/null
+++ b/frontend/src/components/Users/CardUsers.tsx
@@ -0,0 +1,220 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  users: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardUsers = ({
+  users,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USERS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && users.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  md:p-0 md:block  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link
+                    href={`/users/users-view/?id=${item.id}`}
+                    className={'cursor-pointer'}
+                >
+                  <ImageField
+                    name={'Avatar'}
+                    image={item.avatar}
+                    className='w-12 h-12 md:w-full md:h-44 rounded-lg md:rounded-b-none overflow-hidden ring-1 ring-gray-900/10'
+                    imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
+                  />
+                  <p className={'px-6 py-2 font-semibold'}>{item.firstName}</p>
+                </Link>
+              
+
+              <div className='ml-auto  md:absolute md:top-0 md:right-0 '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/users/users-edit/?id=${item.id}`}
+                  pathView={`/users/users-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>First Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.firstName }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Last Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.lastName }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Phone Number</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.phoneNumber }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>E-Mail</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.email }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Disabled</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.disabled) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Avatar</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            <ImageField
+                                name={'Avatar'}
+                                image={item.avatar}
+                                className='mx-auto w-8 h-8'
+                            />
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>App Role</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.rolesOneListFormatter(item.app_role) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Custom Permissions</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.permissionsManyListFormatter(item.custom_permissions).join(', ')}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Organizations</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.organizationsOneListFormatter(item.organizations) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && users.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardUsers;
diff --git a/frontend/src/components/Users/ListUsers.tsx b/frontend/src/components/Users/ListUsers.tsx
new file mode 100644
index 0000000..377cca1
--- /dev/null
+++ b/frontend/src/components/Users/ListUsers.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    users: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListUsers = ({ users, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USERS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && users.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                            <ImageField
+                                  name={'Avatar'}
+                                  image={item.avatar}
+                                  className='w-24 h-24 rounded-l overflow-hidden hidden md:block'
+                                  imageClassName={'rounded-l rounded-r-none h-full object-cover'}
+                            />
+                          
+                          <Link
+                              href={`/users/users-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>First Name</p>
+                                <p className={'line-clamp-2'}>{ item.firstName }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Last Name</p>
+                                <p className={'line-clamp-2'}>{ item.lastName }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Phone Number</p>
+                                <p className={'line-clamp-2'}>{ item.phoneNumber }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>E-Mail</p>
+                                <p className={'line-clamp-2'}>{ item.email }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Disabled</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.disabled) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Avatar</p>
+                                <ImageField
+                                  name={'Avatar'}
+                                  image={item.avatar}
+                                  className='mx-auto w-8 h-8'
+                                />
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>App Role</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.rolesOneListFormatter(item.app_role) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Custom Permissions</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.permissionsManyListFormatter(item.custom_permissions).join(', ')}</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Organizations</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.organizationsOneListFormatter(item.organizations) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/users/users-edit/?id=${item.id}`}
+                              pathView={`/users/users-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && users.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListUsers
\ No newline at end of file
diff --git a/frontend/src/components/Users/TableUsers.tsx b/frontend/src/components/Users/TableUsers.tsx
new file mode 100644
index 0000000..bef1b7f
--- /dev/null
+++ b/frontend/src/components/Users/TableUsers.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/users/usersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureUsersCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleUsers = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { users, loading, count, notify: usersNotify, refetch } = useAppSelector((state) => state.users)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (usersNotify.showNotification) {
+          notify(usersNotify.typeNotification, usersNotify.textNotification);
+      }
+  }, [usersNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `users`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    delete data?.password;
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div id="usersTable" className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={users ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleUsers
diff --git a/frontend/src/components/Users/configureUsersCols.tsx b/frontend/src/components/Users/configureUsersCols.tsx
new file mode 100644
index 0000000..dc7e770
--- /dev/null
+++ b/frontend/src/components/Users/configureUsersCols.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_USERS')
+    
+    return [
+        
+        {
+            field: 'firstName',
+            headerName: 'First Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'lastName',
+            headerName: 'Last Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'phoneNumber',
+            headerName: 'Phone Number',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'email',
+            headerName: 'E-Mail',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'disabled',
+            headerName: 'Disabled',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'avatar',
+            headerName: 'Avatar',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <ImageField
+                name={'Avatar'}
+                image={params?.row?.avatar}
+                className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
+              />
+            ),
+          
+        },
+        
+        {
+            field: 'app_role',
+            headerName: 'App Role',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('roles'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'custom_permissions',
+            headerName: 'Custom Permissions',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            type: 'singleSelect',
+            valueFormatter: ({ value }) =>
+                dataFormatter.permissionsManyListFormatter(value).join(', '),
+            renderEditCell: (params) => (
+                <DataGridMultiSelect {...params} entityName={'permissions'}/>
+            ),
+          
+        },
+        
+        {
+            field: 'organizations',
+            headerName: 'Organizations',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('organizations'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/users/users-edit/?id=${params?.row?.id}`}
+                      pathView={`/users/users-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Vendor_invoices/CardVendor_invoices.tsx b/frontend/src/components/Vendor_invoices/CardVendor_invoices.tsx
new file mode 100644
index 0000000..e8747cd
--- /dev/null
+++ b/frontend/src/components/Vendor_invoices/CardVendor_invoices.tsx
@@ -0,0 +1,274 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  vendor_invoices: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardVendor_invoices = ({
+  vendor_invoices,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_VENDOR_INVOICES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && vendor_invoices.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/vendor_invoices/vendor_invoices-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.invoice_number}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/vendor_invoices/vendor_invoices-edit/?id=${item.id}`}
+                  pathView={`/vendor_invoices/vendor_invoices-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>InvoiceNumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.invoice_number }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Vendor</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.vendorsOneListFormatter(item.vendor) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PurchaseOrder</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>GoodsReceipt</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.goods_receiptsOneListFormatter(item.goods_receipt) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>InvoiceDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>DueDate</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.dateTimeFormatter(item.due_date) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Currency</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.currency }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Subtotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.subtotal }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>TaxTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.tax_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>GrandTotal</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.grand_total }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>InvoiceFiles</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium'>
+                            {dataFormatter.filesFormatter(item.invoice_files).map(link => (
+                                <button
+                                    key={link.publicUrl}
+                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                >
+                                    {link.name}
+                                </button>
+                            ))}
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Notes</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.notes }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && vendor_invoices.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardVendor_invoices;
diff --git a/frontend/src/components/Vendor_invoices/ListVendor_invoices.tsx b/frontend/src/components/Vendor_invoices/ListVendor_invoices.tsx
new file mode 100644
index 0000000..815297c
--- /dev/null
+++ b/frontend/src/components/Vendor_invoices/ListVendor_invoices.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    vendor_invoices: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListVendor_invoices = ({ vendor_invoices, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_VENDOR_INVOICES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && vendor_invoices.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/vendor_invoices/vendor_invoices-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>InvoiceNumber</p>
+                                <p className={'line-clamp-2'}>{ item.invoice_number }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Vendor</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.vendorsOneListFormatter(item.vendor) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PurchaseOrder</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.purchase_ordersOneListFormatter(item.purchase_order) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>GoodsReceipt</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.goods_receiptsOneListFormatter(item.goods_receipt) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>InvoiceDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.invoice_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>DueDate</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.due_date) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Currency</p>
+                                <p className={'line-clamp-2'}>{ item.currency }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Subtotal</p>
+                                <p className={'line-clamp-2'}>{ item.subtotal }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>TaxTotal</p>
+                                <p className={'line-clamp-2'}>{ item.tax_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>GrandTotal</p>
+                                <p className={'line-clamp-2'}>{ item.grand_total }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>InvoiceFiles</p>
+                                {dataFormatter.filesFormatter(item.invoice_files).map(link => (
+                                    <button
+                                        key={link.publicUrl}
+                                        onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                                    >
+                                        {link.name}
+                                    </button>
+                                ))}
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Notes</p>
+                                <p className={'line-clamp-2'}>{ item.notes }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/vendor_invoices/vendor_invoices-edit/?id=${item.id}`}
+                              pathView={`/vendor_invoices/vendor_invoices-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && vendor_invoices.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListVendor_invoices
\ No newline at end of file
diff --git a/frontend/src/components/Vendor_invoices/TableVendor_invoices.tsx b/frontend/src/components/Vendor_invoices/TableVendor_invoices.tsx
new file mode 100644
index 0000000..5469258
--- /dev/null
+++ b/frontend/src/components/Vendor_invoices/TableVendor_invoices.tsx
@@ -0,0 +1,511 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/vendor_invoices/vendor_invoicesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureVendor_invoicesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
+
+const perPage =  10 
+
+const TableSampleVendor_invoices = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+    const [kanbanColumns, setKanbanColumns] = useState<Array<{id: string, label: string}> | null>(null);
+    const [kanbanFilters, setKanbanFilters] = useState('');
+  
+  const { vendor_invoices, loading, count, notify: vendor_invoicesNotify, refetch } = useAppSelector((state) => state.vendor_invoices)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (vendor_invoicesNotify.showNotification) {
+          notify(vendor_invoicesNotify.typeNotification, vendor_invoicesNotify.textNotification);
+      }
+  }, [vendor_invoicesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+    useEffect(() => {
+      
+        
+      
+      setKanbanColumns([
+          
+          { id: "draft", label: "draft" },
+          
+          { id: "submitted", label: "submitted" },
+          
+          { id: "approved", label: "approved" },
+          
+          { id: "rejected", label: "rejected" },
+          
+          { id: "paid", label: "paid" },
+          
+          { id: "void", label: "void" },
+          
+      ]);
+      
+      
+    }, []);
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setKanbanFilters('');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+    setKanbanFilters(generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+      setKanbanFilters('');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `vendor_invoices`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={vendor_invoices ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+      
+      {!showGrid && kanbanColumns && (
+            <KanbanBoard
+                columnFieldName={'status'}
+                showFieldName={'invoice_number'}
+                entityName={'vendor_invoices'}
+                filtersQuery={kanbanFilters}
+                deleteThunk={deleteItem}
+                updateThunk={update}
+                columns={kanbanColumns}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleVendor_invoices
diff --git a/frontend/src/components/Vendor_invoices/configureVendor_invoicesCols.tsx b/frontend/src/components/Vendor_invoices/configureVendor_invoicesCols.tsx
new file mode 100644
index 0000000..cd2f4d0
--- /dev/null
+++ b/frontend/src/components/Vendor_invoices/configureVendor_invoicesCols.tsx
@@ -0,0 +1,326 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_VENDOR_INVOICES')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'invoice_number',
+            headerName: 'InvoiceNumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'vendor',
+            headerName: 'Vendor',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('vendors'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'purchase_order',
+            headerName: 'PurchaseOrder',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('purchase_orders'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'goods_receipt',
+            headerName: 'GoodsReceipt',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('goods_receipts'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'invoice_date',
+            headerName: 'InvoiceDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.invoice_date),
+          
+        },
+        
+        {
+            field: 'due_date',
+            headerName: 'DueDate',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                new Date(params.row.due_date),
+          
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'currency',
+            headerName: 'Currency',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'subtotal',
+            headerName: 'Subtotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'tax_total',
+            headerName: 'TaxTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'grand_total',
+            headerName: 'GrandTotal',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'number',
+          
+        },
+        
+        {
+            field: 'invoice_files',
+            headerName: 'InvoiceFiles',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            editable: false,
+            sortable: false,
+            renderCell: (params: GridValueGetterParams) => (
+              <>
+                {dataFormatter.filesFormatter(params.row.invoice_files).map(link => (
+                  <button
+                      key={link.publicUrl}
+                      onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))}
+              </>
+            ),
+          
+        },
+        
+        {
+            field: 'notes',
+            headerName: 'Notes',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/vendor_invoices/vendor_invoices-edit/?id=${params?.row?.id}`}
+                      pathView={`/vendor_invoices/vendor_invoices-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Vendors/CardVendors.tsx b/frontend/src/components/Vendors/CardVendors.tsx
new file mode 100644
index 0000000..c158908
--- /dev/null
+++ b/frontend/src/components/Vendors/CardVendors.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  vendors: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardVendors = ({
+  vendors,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_VENDORS')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && vendors.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/vendors/vendors-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.vendor_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/vendors/vendors-edit/?id=${item.id}`}
+                  pathView={`/vendors/vendors-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>VendorName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.vendor_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>VendorCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.vendor_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>ContactName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.contact_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Email</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.email }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Phone</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.phone }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Address</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.address }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Status</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.status }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PaymentTerms</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.payment_terms }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && vendors.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardVendors;
diff --git a/frontend/src/components/Vendors/ListVendors.tsx b/frontend/src/components/Vendors/ListVendors.tsx
new file mode 100644
index 0000000..dba6e28
--- /dev/null
+++ b/frontend/src/components/Vendors/ListVendors.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    vendors: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListVendors = ({ vendors, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_VENDORS')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && vendors.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/vendors/vendors-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>VendorName</p>
+                                <p className={'line-clamp-2'}>{ item.vendor_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>VendorCode</p>
+                                <p className={'line-clamp-2'}>{ item.vendor_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>ContactName</p>
+                                <p className={'line-clamp-2'}>{ item.contact_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Email</p>
+                                <p className={'line-clamp-2'}>{ item.email }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Phone</p>
+                                <p className={'line-clamp-2'}>{ item.phone }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Address</p>
+                                <p className={'line-clamp-2'}>{ item.address }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Status</p>
+                                <p className={'line-clamp-2'}>{ item.status }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>PaymentTerms</p>
+                                <p className={'line-clamp-2'}>{ item.payment_terms }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/vendors/vendors-edit/?id=${item.id}`}
+                              pathView={`/vendors/vendors-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && vendors.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListVendors
\ No newline at end of file
diff --git a/frontend/src/components/Vendors/TableVendors.tsx b/frontend/src/components/Vendors/TableVendors.tsx
new file mode 100644
index 0000000..f69a569
--- /dev/null
+++ b/frontend/src/components/Vendors/TableVendors.tsx
@@ -0,0 +1,463 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/vendors/vendorsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureVendorsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+
+const perPage =  10 
+
+const TableSampleVendors = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { vendors, loading, count, notify: vendorsNotify, refetch } = useAppSelector((state) => state.vendors)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (vendorsNotify.showNotification) {
+          notify(vendorsNotify.typeNotification, vendorsNotify.textNotification);
+      }
+  }, [vendorsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `vendors`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={vendors ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {dataGrid}
+      
+
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleVendors
diff --git a/frontend/src/components/Vendors/configureVendorsCols.tsx b/frontend/src/components/Vendors/configureVendorsCols.tsx
new file mode 100644
index 0000000..ae7ee55
--- /dev/null
+++ b/frontend/src/components/Vendors/configureVendorsCols.tsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_VENDORS')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'vendor_name',
+            headerName: 'VendorName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'vendor_code',
+            headerName: 'VendorCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'contact_name',
+            headerName: 'ContactName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'email',
+            headerName: 'Email',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'phone',
+            headerName: 'Phone',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'address',
+            headerName: 'Address',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'payment_terms',
+            headerName: 'PaymentTerms',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/vendors/vendors-edit/?id=${params?.row?.id}`}
+                      pathView={`/vendors/vendors-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/Warehouses/CardWarehouses.tsx b/frontend/src/components/Warehouses/CardWarehouses.tsx
new file mode 100644
index 0000000..229e0ec
--- /dev/null
+++ b/frontend/src/components/Warehouses/CardWarehouses.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import {saveFile} from "../../helpers/fileSaver";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+  warehouses: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardWarehouses = ({
+  warehouses,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+    const asideScrollbarsStyle = useAppSelector(
+        (state) => state.style.asideScrollbarsStyle,
+    );
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const corners = useAppSelector((state) => state.style.corners);
+    const focusRing = useAppSelector((state) => state.style.focusRingColor);
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_WAREHOUSES')
+    
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading && warehouses.map((item, index) => (
+          <li
+            key={item.id}
+            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+            }`}
+          >
+            
+            <div className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
+                
+                <Link href={`/warehouses/warehouses-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
+                    {item.warehouse_name}
+                </Link>
+              
+
+              <div className='ml-auto '>
+                <ListActionsPopover
+                  onDelete={onDelete}
+                  itemId={item.id}
+                  pathEdit={`/warehouses/warehouses-edit/?id=${item.id}`}
+                  pathView={`/warehouses/warehouses-view/?id=${item.id}`}
+                  
+                  hasUpdatePermission={hasUpdatePermission}
+                  
+                />
+              </div>
+            </div>
+            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Company</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.companiesOneListFormatter(item.company) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>WarehouseName</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.warehouse_name }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>WarehouseCode</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.warehouse_code }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Address</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.address }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsDefault</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_default) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+              
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='  text-gray-500  dark:text-dark-600'>IsActive</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.booleanFormatter(item.is_active) }
+                        </div>
+                    </dd>
+                </div>
+              
+
+              
+            </dl>
+          </li>
+        ))}
+        {!loading && warehouses.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardWarehouses;
diff --git a/frontend/src/components/Warehouses/ListWarehouses.tsx b/frontend/src/components/Warehouses/ListWarehouses.tsx
new file mode 100644
index 0000000..014df8a
--- /dev/null
+++ b/frontend/src/components/Warehouses/ListWarehouses.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import {saveFile} from "../../helpers/fileSaver";
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+type Props = {
+    warehouses: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListWarehouses = ({ warehouses, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    
+    const currentUser = useAppSelector((state) => state.auth.currentUser);
+    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_WAREHOUSES')
+    
+    const corners = useAppSelector((state) => state.style.corners);
+    const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+
+    return (
+        <>
+            <div className='relative overflow-x-auto p-4 space-y-4'>
+                {loading && <LoadingSpinner />}
+                {!loading && warehouses.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
+                          
+                          <Link
+                              href={`/warehouses/warehouses-view/?id=${item.id}`}
+                              className={
+                                  'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                              }
+                          >
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Company</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.companiesOneListFormatter(item.company) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>WarehouseName</p>
+                                <p className={'line-clamp-2'}>{ item.warehouse_name }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>WarehouseCode</p>
+                                <p className={'line-clamp-2'}>{ item.warehouse_code }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>Address</p>
+                                <p className={'line-clamp-2'}>{ item.address }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsDefault</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_default) }</p>
+                            </div>
+                          
+
+                          
+                          
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs   text-gray-500 '}>IsActive</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_active) }</p>
+                            </div>
+                          
+
+                          
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/warehouses/warehouses-edit/?id=${item.id}`}
+                              pathView={`/warehouses/warehouses-view/?id=${item.id}`}
+                              
+                              hasUpdatePermission={hasUpdatePermission}
+                              
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && warehouses.length === 0 && (
+                  <div className='col-span-full flex items-center justify-center h-40'>
+                      <p className=''>No data to display</p>
+                  </div>
+                )}
+            </div>
+            <div className={'flex items-center justify-center my-6'}>
+                <Pagination
+                  currentPage={currentPage}
+                  numPages={numPages}
+                  setCurrentPage={onPageChange}
+                />
+            </div>
+        </>
+    )
+};
+
+export default ListWarehouses
\ No newline at end of file
diff --git a/frontend/src/components/Warehouses/TableWarehouses.tsx b/frontend/src/components/Warehouses/TableWarehouses.tsx
new file mode 100644
index 0000000..228c905
--- /dev/null
+++ b/frontend/src/components/Warehouses/TableWarehouses.tsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton'
+import CardBoxModal from '../CardBoxModal'
+import CardBox from "../CardBox";
+import { fetch, update, deleteItem, setRefetch, deleteItemsByIds } from '../../stores/warehouses/warehousesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import { Field, Form, Formik } from "formik";
+import {
+    DataGrid,
+    GridColDef,
+} from '@mui/x-data-grid';
+import {loadColumns} from "./configureWarehousesCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+
+import CardWarehouses from './CardWarehouses';
+
+
+const perPage =  10 
+
+const TableSampleWarehouses = ({ filterItems, setFilterItems, filters, showGrid }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const pagesList = [];
+    const [id, setId] = useState(null);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [filterRequest, setFilterRequest] = React.useState('');
+    const [columns, setColumns] = useState<GridColDef[]>([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sortModel, setSortModel] = useState([
+        {
+            field: '',
+            sort: 'desc',
+        },
+    ]);
+  
+  const { warehouses, loading, count, notify: warehousesNotify, refetch } = useAppSelector((state) => state.warehouses)
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+    const numPages = Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+    for (let i = 0; i < numPages; i++) {
+        pagesList.push(i);
+    }
+
+    const loadData = async (page = currentPage, request = filterRequest) => {
+        if (page !== currentPage) setCurrentPage(page);
+        if (request !== filterRequest) setFilterRequest(request);
+        const { sort, field } = sortModel[0];
+
+      const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+      dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+      if (warehousesNotify.showNotification) {
+          notify(warehousesNotify.typeNotification, warehousesNotify.textNotification);
+      }
+  }, [warehousesNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false)
+    setIsModalTrashActive(false)
+  }
+
+  
+
+  
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+    
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+      
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `warehouses`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+  
+
+
+  const handleTableSubmit = async (id: string, data) => {
+    
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+
+  const dataGrid = (
+        <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={warehouses ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              onProcessRowUpdateError={(params) => {
+                  console.log('Error', params);
+              }}
+              processRowUpdate={async (newRow, oldRow) => {
+                const data = dataFormatter.dataGridEditFormatter(newRow);
+
+                try {
+                  await handleTableSubmit(newRow.id, data);
+                  return newRow;
+                } catch {
+                  return oldRow;
+                }
+              }}
+              sortingMode={'server'}
+              checkboxSelection
+              onRowSelectionModelChange={(ids) => {
+                setSelectedRows(ids)
+              }}
+              onSortModelChange={(params) => {
+                  params.length
+                      ? setSortModel(params)
+                      : setSortModel([{ field: '', sort: 'desc' }]);
+              }}
+              rowCount={count}
+              pageSizeOptions={[10]}
+              paginationMode={'server'}
+              loading={loading}
+              onPaginationModelChange={(params) => {
+                  onPageChange(params.page);
+              }}
+          />
+        </div>
+  )
+
+  return (
+    <>
+    {filterItems && Array.isArray( filterItems ) && filterItems.length ?
+        <CardBox>
+            <Formik
+                initialValues={{
+                    checkboxes: ['lorem'],
+                    switches: ['lorem'],
+                    radio: 'lorem',
+                }}
+                onSubmit={() => null}
+            >
+                <Form>
+                    <>
+                        {filterItems && filterItems.map((filterItem) => {
+                            return (
+                                <div key={filterItem.id} className="flex mb-4">
+                                    <div className="flex flex-col w-full mr-3">
+                                        <div className="  text-gray-500  font-bold">Filter</div>
+                                        <Field
+                                            className={controlClasses}
+                                            name='selectedField'
+                                            id='selectedField'
+                                            component='select'
+                                            value={filterItem?.fields?.selectedField || ''}
+                                            onChange={handleChange(filterItem.id)}
+                                        >
+                                            {filters.map((selectOption) => (
+                                                <option
+                                                    key={selectOption.title}
+                                                    value={`${selectOption.title}`}
+                                                >
+                                                    {selectOption.label}
+                                                </option>
+                                            ))}
+                                        </Field>
+                                    </div>
+                                    {filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.type === 'enum' ? (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="text-gray-500 font-bold">
+                                                Value
+                                            </div>
+                                            <Field
+                                                className={controlClasses}
+                                                name="filterValue"
+                                                id='filterValue'
+                                                component="select"
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            >
+                                                <option value="">Select Value</option>
+                                                {filters.find((filter) => 
+                                                    filter.title === filterItem?.fields?.selectedField
+                                                )?.options?.map((option) => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </Field>
+                                        </div>
+                                    ) : filters.find((filter) => 
+                                        filter.title === filterItem?.fields?.selectedField
+                                    )?.number ? (
+                                        <div className="flex flex-row w-full mr-3">
+                                            <div className="flex flex-col w-full mr-3">
+                                                <div className="  text-gray-500  font-bold">From</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className="flex flex-col w-full">
+                                                <div className="  text-gray-500  font-bold">To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : filters.find(
+                                        (filter) =>
+                                            filter.title ===
+                                            filterItem?.fields?.selectedField
+                                    )?.date ? (
+                                        <div className='flex flex-row w-full mr-3'>
+                                            <div className='flex flex-col w-full mr-3'>
+                                                <div className='  text-gray-500  font-bold'>
+                                                    From
+                                                </div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueFrom'
+                                                    placeholder='From'
+                                                    id='filterValueFrom'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueFrom || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                            <div className='flex flex-col w-full'>
+                                                <div className='  text-gray-500  font-bold'>To</div>
+                                                <Field
+                                                    className={controlClasses}
+                                                    name='filterValueTo'
+                                                    placeholder='to'
+                                                    id='filterValueTo'
+                                                    type='datetime-local'
+                                                    value={filterItem?.fields?.filterValueTo || ''}
+                                                    onChange={handleChange(filterItem.id)}
+                                                />
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col w-full mr-3">
+                                            <div className="  text-gray-500  font-bold">Contains</div>
+                                            <Field
+                                                className={controlClasses}
+                                                name='filterValue'
+                                                placeholder='Contained'
+                                                id='filterValue'
+                                                value={filterItem?.fields?.filterValue || ''}
+                                                onChange={handleChange(filterItem.id)}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="flex flex-col">
+                                        <div className="  text-gray-500  font-bold">Action</div>
+                                        <BaseButton
+                                            className="my-2"
+                                            type='reset'
+                                            color='danger'
+                                            label='Delete'
+                                            onClick={() => {
+                                                deleteFilter(filterItem.id)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })}
+                        <div className="flex">
+                            <BaseButton
+                                className="my-2 mr-3"
+                               color="success"  
+                                label='Apply'
+                                onClick={handleSubmit}
+                            />
+                            <BaseButton
+                                className="my-2"
+                                 color='info'  
+                                label='Cancel'
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </>
+                </Form>
+            </Formik>
+        </CardBox> : null
+    }
+      <CardBoxModal
+        title="Please confirm"
+        buttonColor="info"
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      
+        {warehouses && Array.isArray(warehouses) && !showGrid && (
+            <CardWarehouses
+                warehouses={warehouses}
+                loading={loading}
+                onDelete={handleDeleteModalAction}
+                currentPage={currentPage}
+                numPages={numPages}
+                onPageChange={onPageChange}
+            />
+        )}
+      
+
+      
+        {showGrid && dataGrid}
+      
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+      )}
+    <ToastContainer />
+    </>
+  )
+}
+
+export default TableSampleWarehouses
diff --git a/frontend/src/components/Warehouses/configureWarehousesCols.tsx b/frontend/src/components/Warehouses/configureWarehousesCols.tsx
new file mode 100644
index 0000000..1404e16
--- /dev/null
+++ b/frontend/src/components/Warehouses/configureWarehousesCols.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+    GridActionsCellItem,
+    GridRowParams,
+    GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    
+    user
+    
+) => {
+    async function callOptionsApi(entityName: string) {
+        
+        if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+        
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_WAREHOUSES')
+    
+    return [
+        
+        {
+            field: 'company',
+            headerName: 'Company',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('companies'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+          
+        },
+        
+        {
+            field: 'warehouse_name',
+            headerName: 'WarehouseName',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'warehouse_code',
+            headerName: 'WarehouseCode',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'address',
+            headerName: 'Address',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            
+        },
+        
+        {
+            field: 'is_default',
+            headerName: 'IsDefault',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'is_active',
+            headerName: 'IsActive',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+          
+            
+            editable: hasUpdatePermission,
+            
+            type: 'boolean',
+          
+        },
+        
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 30,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+                
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/warehouses/warehouses-edit/?id=${params?.row?.id}`}
+                      pathView={`/warehouses/warehouses-view/?id=${params?.row?.id}`}
+                      
+                      hasUpdatePermission={hasUpdatePermission}
+                      
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
diff --git a/frontend/src/components/WidgetCreator/RoleSelect.tsx b/frontend/src/components/WidgetCreator/RoleSelect.tsx
new file mode 100644
index 0000000..7cc095c
--- /dev/null
+++ b/frontend/src/components/WidgetCreator/RoleSelect.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useId, useState } from 'react';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import axios from 'axios';
+
+export const RoleSelect = ({ options, field, form, itemRef, disabled, currentUser }) => {
+  const [value, setValue] = useState(null);
+  const PAGE_SIZE = 100;
+
+  React.useEffect(() => {
+    if (currentUser.app_role.id) {
+      setValue({ value: currentUser.app_role.id, label: currentUser.app_role.name });
+    }
+  }, [currentUser]);
+
+  useEffect(() => {
+    if (options?.value && options?.label) {
+      setValue({ value: options.value, label: options.label });
+    }
+  }, [options?.id, field?.value?.id]);
+
+  const mapResponseToValuesAndLabels = (data) => ({
+    value: data.id,
+    label: data.label,
+  });
+  const handleChange = (option) => {
+    form.setFieldValue(field.name, option);
+    setValue(option);
+  };
+
+  async function callApi(inputValue: string, loadedOptions: any[]) {
+    const path = `/${itemRef}/autocomplete?limit=${PAGE_SIZE}&offset=${loadedOptions.length}${inputValue ? `&query=${inputValue}` : ''}`;
+    const { data } = await axios(path);
+    return {
+      options: data.map(mapResponseToValuesAndLabels),
+      hasMore: data.length === PAGE_SIZE,
+    }
+  }
+  return (
+    <AsyncPaginate
+      classNames={{
+        control: () => 'px-1 py-2',
+      }}
+      classNamePrefix={'react-select'}
+      instanceId={useId()}
+      value={value}
+      debounceTimeout={1000}
+      loadOptions={callApi}
+      onChange={handleChange}
+      defaultOptions
+      isDisabled={disabled}
+    />
+  );
+};
diff --git a/frontend/src/components/WidgetCreator/WidgetCreator.tsx b/frontend/src/components/WidgetCreator/WidgetCreator.tsx
new file mode 100644
index 0000000..80b4999
--- /dev/null
+++ b/frontend/src/components/WidgetCreator/WidgetCreator.tsx
@@ -0,0 +1,140 @@
+import CardBox from '../CardBox';
+import { mdiCog } from '@mdi/js';
+import { Field, Form, Formik } from 'formik';
+import { ToastContainer, toast } from 'react-toastify';
+import FormField from '../FormField';
+import React from 'react';
+import {
+  aiPrompt,
+  setErrorNotification,
+  resetNotify,
+} from '../../stores/openAiSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+
+import { fetchWidgets } from '../../stores/roles/rolesSlice';
+
+import BaseButton from '../BaseButton';
+import CardBoxModal from '../CardBoxModal';
+import { RoleSelect } from './RoleSelect';
+
+export const WidgetCreator = ({
+                                  currentUser,
+                                  isFetchingQuery,
+                                  setWidgetsRole,
+                                  widgetsRole,
+                              }) => {
+    const dispatch = useAppDispatch();
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const { notify: openAiNotify } = useAppSelector((state) => state.openAi);
+
+    const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
+    React.useEffect(() => {
+        if (openAiNotify.showNotification) {
+        notify(openAiNotify.typeNotification, openAiNotify.textNotification);
+        dispatch(resetNotify());
+        }
+    }, [openAiNotify.showNotification]);
+
+    const openModal = (): void => {
+        setIsModalOpen(true);
+    };
+
+    const handleCloseModal = (value = {}) => {
+        setWidgetsRole(value);
+        setIsModalOpen(false);
+    };
+    
+    const getWidgets = async () => {
+        await dispatch(fetchWidgets(widgetsRole?.role?.value || ''));
+    };
+    
+    const smartSearch = async (values: { description: string }, resetForm: any) => {
+        const description = values.description;
+        const projectId = '';
+
+        const payload = {
+            roleId: widgetsRole?.role?.value,
+            description,
+            projectId,
+            userId: currentUser?.id,
+        };
+        const { payload: responcePayload, error }: any = await dispatch(aiPrompt(payload));
+       
+        await getWidgets().then();
+        
+        resetForm({ values: { description: '' } });
+        if (responcePayload.data?.error || error) {
+        const errorMessage =
+            responcePayload.data?.error?.message || error?.message;
+        await dispatch(
+            setErrorNotification(errorMessage || 'Error with widget creation'),
+        );
+        }
+    };
+
+    return (
+        <>
+            <CardBox id="widgetCreator" className='mb-6 relative'>
+                <BaseButton
+                    className='absolute top-0 right-0 m-4'
+                    icon={mdiCog}
+                    color='whiteDark'
+                    roundedFull
+                    onClick={openModal}
+                />
+                <Formik
+                    initialValues={{
+                        description: '',
+                    }}
+                    onSubmit={(values, { resetForm }) => smartSearch(values, resetForm)}
+                >
+                    <Form>
+                        <FormField
+                            label='Create Chart or Widget'
+                            help={
+                                isFetchingQuery ?
+                                    'Loading...' :
+                                    'Describe your new widget or chart in natural language. For example: "Number of admin users" OR "red chart with number of closed contracts grouped by month"'
+                            }
+                        >
+                            <Field type='input' name='description' disabled={isFetchingQuery} />
+                        </FormField>
+                    </Form>
+                </Formik>
+            </CardBox>
+            <Formik
+                initialValues={{
+                    role: '',
+                }}
+                onSubmit={(values) => handleCloseModal(values)}
+            >
+                {({ submitForm }) => (
+                    <CardBoxModal
+                        title='Widget Creator Settings'
+                        buttonColor='info'
+                        buttonLabel='Done'
+                        isActive={isModalOpen}
+                        onConfirm={submitForm}
+                        onCancel={() => setIsModalOpen(false)}
+                    >
+                        <p>What role are we showing and creating widgets for?</p>
+
+                        <Form>
+                            <FormField>
+                                <Field
+                                    name='role'
+                                    id='role'
+                                    component={RoleSelect}
+                                    options={widgetsRole?.role || []}
+                                    itemRef={'roles'}
+                                    currentUser={currentUser}
+                                ></Field>
+                            </FormField>
+                        </Form>
+                    </CardBoxModal>
+                )}
+            </Formik>
+            <ToastContainer />
+        </>
+    );
+};
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
new file mode 100644
index 0000000..a9783c8
--- /dev/null
+++ b/frontend/src/config.ts
@@ -0,0 +1,15 @@
+export const hostApi = process.env.NODE_ENV === 'development' && !process.env.NEXT_PUBLIC_BACK_API ? 'http://localhost' : ''
+export const portApi = process.env.NODE_ENV === 'development' && !process.env.NEXT_PUBLIC_BACK_API ? 8080 : '';
+export const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}/api`
+
+export const localStorageDarkModeKey = 'darkMode'
+
+export const localStorageStyleKey = 'style'
+
+export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
+
+export const appTitle = 'created by Flatlogic generator!'
+
+export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
+
+export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
diff --git a/frontend/src/css/_app.css b/frontend/src/css/_app.css
new file mode 100644
index 0000000..affc655
--- /dev/null
+++ b/frontend/src/css/_app.css
@@ -0,0 +1,32 @@
+html {
+  @apply h-full;
+}
+
+body {
+  @apply pt-14 xl:pl-60 h-full;
+}
+
+#app {
+  @apply w-screen transition-position lg:w-auto h-full flex flex-col;
+}
+
+.dropdown {
+  @apply cursor-pointer;
+}
+
+li.stack-item:not(:last-child):after {
+  content: '/';
+  @apply inline-block pl-2;
+}
+
+.m-clipped, .m-clipped body {
+  @apply overflow-hidden lg:overflow-visible;
+}
+
+.full-screen body {
+  @apply p-0;
+}
+
+.main-navbar, .app-sidebar-brand {
+  box-shadow: 0px -1px 40px rgba(112, 144, 176, 0.2);
+}
diff --git a/frontend/src/css/_calendar.css b/frontend/src/css/_calendar.css
new file mode 100644
index 0000000..e3945b4
--- /dev/null
+++ b/frontend/src/css/_calendar.css
@@ -0,0 +1,39 @@
+.rbc-event {
+  @apply bg-blue-600  !important;
+}
+
+.rbc-show-more {
+  @apply   dark:text-white bg-transparent !important;
+}
+
+.rbc-btn-group button {
+  @apply  dark:text-white !important;
+}
+
+.rbc-btn-group button:hover {
+  @apply  text-white dark:bg-dark-700 !important;
+}
+
+.rbc-btn-group button.rbc-active {
+  @apply  text-black dark:bg-blue-600 !important;
+}
+
+.rbc-btn-group button:focus {
+  @apply  dark:bg-blue-600 !important;
+}
+
+.rbc-day-bg.rbc-off-range-bg {
+  @apply   dark:bg-dark-800 !important;
+}
+.rbc-current-time-indicator{
+  @apply h-1 !important;
+}
+.rbc-today {
+  @apply      dark:bg-dark-600/40 !important;
+}
+
+.rbc-day-bg.rbc-selected-cell {
+  @apply dark:bg-dark-500 !important;
+}
+ 
+ 
diff --git a/frontend/src/css/_checkbox-radio-switch.css b/frontend/src/css/_checkbox-radio-switch.css
new file mode 100644
index 0000000..b2dab5c
--- /dev/null
+++ b/frontend/src/css/_checkbox-radio-switch.css
@@ -0,0 +1,59 @@
+@layer components {
+  .checkbox, .radio, .switch {
+    @apply inline-flex items-center cursor-pointer relative;
+  }
+
+  .checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
+    @apply absolute left-0 opacity-0 -z-1;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
+    @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
+  }
+
+  .checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
+    @apply ring  ring-blue-700 ;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
+    @apply block w-5 h-5;
+  }
+
+  .checkbox input[type=checkbox]+.check {
+    @apply rounded;
+  }
+
+  .switch input[type=checkbox]+.check {
+    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
+  }
+
+  .radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
+    @apply rounded-full;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-no-repeat bg-center border-4;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  .radio input[type=radio]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
+  }
+
+  .switch input[type=checkbox]:checked+.check, .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-blue-600 border-blue-600  ;
+  }
+
+  .switch input[type=checkbox]+.check:before {
+    content: '';
+    @apply block w-5 h-5 bg-white border border-gray-700;
+  }
+
+  .switch input[type=checkbox]:checked+.check:before {
+    transform: translate3d(110%, 0 ,0);
+    @apply border-blue-600;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/css/_helper.css b/frontend/src/css/_helper.css
new file mode 100644
index 0000000..3444fa9
--- /dev/null
+++ b/frontend/src/css/_helper.css
@@ -0,0 +1,23 @@
+.helper-container {
+  right: 0;
+  top: 70px;
+  transform: translateX(100%);
+
+  .tab {
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  .tab:hover {
+    @apply bg-gray-900 cursor-pointer;
+  }
+}
+
+.helper-container.open {
+  transform: translateX(0);
+}
+
+.react-datepicker-wrapper, .react-datepicker-popper {
+  z-index: 10 !important;
+}
diff --git a/frontend/src/css/_progress.css b/frontend/src/css/_progress.css
new file mode 100644
index 0000000..65d6796
--- /dev/null
+++ b/frontend/src/css/_progress.css
@@ -0,0 +1,21 @@
+@layer base {
+  progress {
+    @apply h-3 rounded-full overflow-hidden;
+  }
+  
+  progress::-webkit-progress-bar {
+    @apply bg-blue-200;
+  }
+  
+  progress::-webkit-progress-value {
+    @apply bg-blue-500;
+  }
+  
+  progress::-moz-progress-bar {
+    @apply bg-blue-500;
+  }
+  
+  progress::-ms-fill {
+    @apply bg-blue-500 border-0;
+  }
+}
diff --git a/frontend/src/css/_rich-text.css b/frontend/src/css/_rich-text.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/frontend/src/css/_rich-text.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/css/_scrollbars.css b/frontend/src/css/_scrollbars.css
new file mode 100644
index 0000000..a181b84
--- /dev/null
+++ b/frontend/src/css/_scrollbars.css
@@ -0,0 +1,41 @@
+@layer base {
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+  }
+  
+  body::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  body::-webkit-scrollbar-track {
+    @apply bg-gray-50;
+  }
+  
+  body::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 rounded;
+  }
+  
+  body::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+}
+
+@layer utilities {
+  .dark-scrollbars-compat {
+    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-track {
+    @apply bg-slate-800;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb {
+    @apply bg-slate-600;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-500;
+  }
+}
diff --git a/frontend/src/css/_select-dropdown.css b/frontend/src/css/_select-dropdown.css
new file mode 100644
index 0000000..d610d8a
--- /dev/null
+++ b/frontend/src/css/_select-dropdown.css
@@ -0,0 +1,31 @@
+.react-select__control {
+  @apply      dark:bg-dark-800 dark:border-dark-700 !important;
+}
+
+.react-select__single-value {
+  @apply   dark:text-white !important;
+}
+
+.react-select__menu {
+  @apply   dark:border-dark-700
+}
+
+.react-select__menu-list {
+  @apply  dark:bg-dark-800 dark:border-dark-700 dark:rounded !important;
+}
+
+.react-select__option {
+  @apply cursor-pointer hover:bg-gray-200  dark:hover:bg-dark-700 !important;
+}
+
+.react-select__option--is-focused  {
+  @apply  dark:bg-dark-800 dark:text-white hover:dark:bg-dark-700 hover:dark:text-white !important;
+}
+
+.react-select__option--is-selected, .react-select__option--is-selected:hover {
+  @apply  dark:bg-dark-600 !important;
+}
+
+.react-select__multi-value__remove {
+  @apply  dark:bg-dark-600 dark:text-white hover:dark:bg-red-300 hover:dark:text-red-600 !important;
+}
diff --git a/frontend/src/css/_table.css b/frontend/src/css/_table.css
new file mode 100644
index 0000000..893dc89
--- /dev/null
+++ b/frontend/src/css/_table.css
@@ -0,0 +1,117 @@
+@layer base {
+  table {
+    @apply w-full;
+  }
+
+  thead {
+    @apply hidden lg:table-header-group;
+  }
+
+  tr {
+    @apply max-w-full block relative border-b-4 border-gray-100
+      lg:table-row lg:border-b-0 dark:border-slate-800;
+  }
+
+  tr:last-child {
+    @apply border-b-0;
+  }
+
+  td:not(:first-child) {
+    @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
+  }
+
+  th {
+    @apply lg:text-left lg:p-3 border-b;
+  }
+
+  th.sortable {
+    cursor: pointer;
+  }
+
+  th.sortable:hover:after {
+    transition: all 1s;
+    position: absolute;
+
+    content: "↕";
+
+    margin-left: 1rem;
+  }
+
+  th.sortable.asc:hover:after {
+    content: "↑";
+  }
+  th.sortable.desc:hover:after {
+    content: "↓";
+  }
+
+  td {
+    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
+      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800 dark:text-white;
+  }
+
+  td:last-child {
+    @apply border-b-0;
+  }
+
+  tbody tr, tbody tr:nth-child(odd) {
+    @apply lg:hover:bg-pavitra-300/70;
+  }
+
+  tbody tr:nth-child(even) {
+    @apply lg:bg-pavitra-300  dark:bg-pavitra-300/70;
+  }
+
+  td:before {
+    content: attr(data-label);
+    @apply font-semibold pr-3 text-left lg:hidden;
+  }
+
+  tbody tr td {
+    @apply text-sm font-normal text-pavitra-900  dark:text-white;
+  }
+
+  .datagrid--table, .MuiDataGrid-root {
+    @apply rounded border-none !important;
+    
+  }
+
+  .datagrid--header {
+    @apply uppercase  !important;
+  }
+
+  .datagrid--header,
+  .datagrid--header .MuiIconButton-root,
+  .datagrid--cell,
+  .datagrid--cell .MuiIconButton-root {
+    @apply  dark:text-white;
+  }
+
+  .datagrid--cell .MuiDataGrid-booleanCell {
+    @apply  dark:text-white !important;
+  }
+
+  .datagrid--cell .MuiIconButton-root:hover {
+    @apply  dark:text-white dark:bg-dark-700;
+  }
+
+  .datagrid--row {
+    @apply even:bg-gray-100 dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important;
+  }
+  
+
+  .datagrid--table .MuiTablePagination-root {
+    @apply  dark:text-white;
+  }
+
+  .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled {
+    @apply   dark:text-dark-700;
+  }
+
+  .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover {
+    @apply dark:bg-dark-700;
+  }
+
+  .MuiButton-colorInherit {
+    @apply text-blue-600  dark:text-dark-700 !important;
+  }
+}
diff --git a/frontend/src/css/_theme.css b/frontend/src/css/_theme.css
new file mode 100644
index 0000000..d07e37a
--- /dev/null
+++ b/frontend/src/css/_theme.css
@@ -0,0 +1,103 @@
+
+.theme-pink {
+.app-sidebar {
+  @apply bg-pavitra-900 text-white;
+
+.menu-title,
+.menu-item-icon,
+.menu-item-link {
+  @apply text-white;
+}
+}
+
+.app-sidebar-brand {
+  @apply bg-white;
+}
+
+.bg-blue-600 {
+  @apply bg-pavitra-800;
+}
+
+.border-blue-700 {
+  @apply border-pink-700;
+}
+
+.checkbox input[type=checkbox]:checked + .check, .radio input[type=radio]:checked + .check {
+  @apply border-pavitra-800;
+}
+
+.helper-container .tab {
+  @apply bg-pavitra-900;
+}
+
+.focus\:ring:focus {
+  --tw-ring-color: #14142A;
+}
+
+.checkbox input[type=checkbox]:focus + .check, .radio input[type=radio]:focus + .check, .switch input[type=checkbox]:focus + .check {
+  --tw-ring-color: #14142A;
+}
+
+}
+
+.theme-green {
+
+.app-sidebar {
+  @apply bg-pavitra-800 text-white;
+
+.menu-title,
+.menu-item-icon,
+.menu-item-link {
+  @apply text-white;
+}
+
+}
+
+.app-sidebar-brand {
+  @apply bg-white;
+}
+
+.bg-blue-600 {
+  @apply bg-pavitra-800;
+}
+
+.border-blue-700 {
+  @apply bg-pavitra-700;
+}
+
+.hover\:bg-blue-700:hover {
+  @apply bg-pavitra-700;
+}
+
+.text-blue-600 {
+  @apply text-pavitra-900;
+}
+
+.checkbox input[type=checkbox]:checked + .check, .radio input[type=radio]:checked + .check {
+  @apply border-pavitra-800;
+}
+
+.helper-container .tab {
+  @apply bg-pavitra-700;
+}
+
+.focus\:ring:focus {
+  --tw-ring-color: #4E4B66;
+}
+
+.checkbox input[type=checkbox]:focus + .check, .radio input[type=radio]:focus + .check, .switch input[type=checkbox]:focus + .check {
+  --tw-ring-color: #4E4B66;
+}
+
+.text-blue-500 {
+  @apply text-pavitra-800;
+}
+
+.hover\:text-blue-600:hover {
+  @apply text-pavitra-800;
+}
+
+.active\:text-blue-700:active {
+  @apply text-pavitra-800;
+}
+}
diff --git a/frontend/src/css/main.css b/frontend/src/css/main.css
new file mode 100644
index 0000000..f061e28
--- /dev/null
+++ b/frontend/src/css/main.css
@@ -0,0 +1,35 @@
+@import "tailwind/_base.css";
+@import "tailwind/_components.css";
+@import "tailwind/_utilities.css";
+@import 'intro.js/introjs.css';
+@import "_checkbox-radio-switch.css";
+@import "_progress.css";
+@import "_scrollbars.css";
+@import "_table.css";
+@import "_helper.css";
+@import '_calendar.css';
+@import '_select-dropdown.css';
+@import "_theme.css";
+@import '_rich-text.css';
+
+ 
+.introjs-tooltip {
+  @apply min-w-[400px] max-w-[480px] p-2 !important;
+}
+
+.good-img {
+  @apply -mt-96 !important;
+}
+.end-img {
+  @apply -mt-72 !important;
+}
+.introjs-button {
+  @apply bg-blue-600 text-white  !important;
+  text-shadow: none !important;
+}
+.introjs-bullets ul li a.active {
+  @apply bg-blue-600  !important;
+}
+.introjs-prevbutton{
+  @apply bg-transparent border border-blue-600 text-blue-600 !important;
+}
diff --git a/frontend/src/css/tailwind/_base.css b/frontend/src/css/tailwind/_base.css
new file mode 100644
index 0000000..2f02db5
--- /dev/null
+++ b/frontend/src/css/tailwind/_base.css
@@ -0,0 +1 @@
+@tailwind base;
diff --git a/frontend/src/css/tailwind/_components.css b/frontend/src/css/tailwind/_components.css
new file mode 100644
index 0000000..020aaba
--- /dev/null
+++ b/frontend/src/css/tailwind/_components.css
@@ -0,0 +1 @@
+@tailwind components;
diff --git a/frontend/src/css/tailwind/_utilities.css b/frontend/src/css/tailwind/_utilities.css
new file mode 100644
index 0000000..65dd5f6
--- /dev/null
+++ b/frontend/src/css/tailwind/_utilities.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/frontend/src/helpers/dataFormatter.js b/frontend/src/helpers/dataFormatter.js
new file mode 100644
index 0000000..a01925f
--- /dev/null
+++ b/frontend/src/helpers/dataFormatter.js
@@ -0,0 +1,461 @@
+import dayjs from 'dayjs';
+import _ from 'lodash';
+
+export default {
+    filesFormatter(arr) {
+        if (!arr || !arr.length) return [];
+        return arr.map((item) => item);
+    },
+    imageFormatter(arr) {
+        if (!arr || !arr.length) return []
+        return arr.map(item => ({
+            publicUrl: item.publicUrl || ''
+        }))
+    },
+    oneImageFormatter(arr) {
+        if (!arr || !arr.length) return ''
+        return arr[0].publicUrl || ''
+    },
+    dateFormatter(date) {
+        if (!date) return ''
+        return dayjs(date).format('YYYY-MM-DD')
+    },
+    dateTimeFormatter(date) {
+        if (!date) return ''
+        return dayjs(date).format('YYYY-MM-DD HH:mm')
+    },
+    booleanFormatter(val) {
+        return val ? 'Yes' : 'No'
+    },
+    dataGridEditFormatter(obj) {
+        return _.transform(obj, (result, value, key) => {
+            if (_.isArray(value)) {
+                result[key] = _.map(value, 'id');
+            } else if (_.isObject(value)) {
+                result[key] = value.id;
+            } else {
+                result[key] = value;
+            }
+        });
+    },
+    
+        
+        usersManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.firstName)
+        },
+        usersOneListFormatter(val) {
+            if (!val) return ''
+            return val.firstName
+        },
+        usersManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.firstName}
+            });
+        },
+        usersOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.firstName, id: val.id}
+        },
+        
+    
+        
+        rolesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        rolesOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        rolesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        rolesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
+        
+    
+        
+        permissionsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        permissionsOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        permissionsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        permissionsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
+        
+    
+        
+        organizationsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        organizationsOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        organizationsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        organizationsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
+        
+    
+        
+        companiesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.company_name)
+        },
+        companiesOneListFormatter(val) {
+            if (!val) return ''
+            return val.company_name
+        },
+        companiesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.company_name}
+            });
+        },
+        companiesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.company_name, id: val.id}
+        },
+        
+    
+        
+    
+        
+    
+        
+        vendorsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.vendor_name)
+        },
+        vendorsOneListFormatter(val) {
+            if (!val) return ''
+            return val.vendor_name
+        },
+        vendorsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.vendor_name}
+            });
+        },
+        vendorsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.vendor_name, id: val.id}
+        },
+        
+    
+        
+        warehousesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.warehouse_name)
+        },
+        warehousesOneListFormatter(val) {
+            if (!val) return ''
+            return val.warehouse_name
+        },
+        warehousesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.warehouse_name}
+            });
+        },
+        warehousesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.warehouse_name, id: val.id}
+        },
+        
+    
+        
+        product_categoriesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.category_name)
+        },
+        product_categoriesOneListFormatter(val) {
+            if (!val) return ''
+            return val.category_name
+        },
+        product_categoriesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.category_name}
+            });
+        },
+        product_categoriesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.category_name, id: val.id}
+        },
+        
+    
+        
+        productsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.product_name)
+        },
+        productsOneListFormatter(val) {
+            if (!val) return ''
+            return val.product_name
+        },
+        productsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.product_name}
+            });
+        },
+        productsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.product_name, id: val.id}
+        },
+        
+    
+        
+        purchase_requisitionsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.requisition_number)
+        },
+        purchase_requisitionsOneListFormatter(val) {
+            if (!val) return ''
+            return val.requisition_number
+        },
+        purchase_requisitionsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.requisition_number}
+            });
+        },
+        purchase_requisitionsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.requisition_number, id: val.id}
+        },
+        
+    
+        
+    
+        
+        purchase_ordersManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.po_number)
+        },
+        purchase_ordersOneListFormatter(val) {
+            if (!val) return ''
+            return val.po_number
+        },
+        purchase_ordersManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.po_number}
+            });
+        },
+        purchase_ordersOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.po_number, id: val.id}
+        },
+        
+    
+        
+        purchase_order_linesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.description)
+        },
+        purchase_order_linesOneListFormatter(val) {
+            if (!val) return ''
+            return val.description
+        },
+        purchase_order_linesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.description}
+            });
+        },
+        purchase_order_linesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.description, id: val.id}
+        },
+        
+    
+        
+        goods_receiptsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.grn_number)
+        },
+        goods_receiptsOneListFormatter(val) {
+            if (!val) return ''
+            return val.grn_number
+        },
+        goods_receiptsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.grn_number}
+            });
+        },
+        goods_receiptsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.grn_number, id: val.id}
+        },
+        
+    
+        
+    
+        
+        vendor_invoicesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.invoice_number)
+        },
+        vendor_invoicesOneListFormatter(val) {
+            if (!val) return ''
+            return val.invoice_number
+        },
+        vendor_invoicesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.invoice_number}
+            });
+        },
+        vendor_invoicesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.invoice_number, id: val.id}
+        },
+        
+    
+        
+    
+        
+    
+        
+        departmentsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.department_name)
+        },
+        departmentsOneListFormatter(val) {
+            if (!val) return ''
+            return val.department_name
+        },
+        departmentsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.department_name}
+            });
+        },
+        departmentsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.department_name, id: val.id}
+        },
+        
+    
+        
+        document_typesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.type_name)
+        },
+        document_typesOneListFormatter(val) {
+            if (!val) return ''
+            return val.type_name
+        },
+        document_typesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.type_name}
+            });
+        },
+        document_typesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.type_name, id: val.id}
+        },
+        
+    
+        
+        documentsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.document_number)
+        },
+        documentsOneListFormatter(val) {
+            if (!val) return ''
+            return val.document_number
+        },
+        documentsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.document_number}
+            });
+        },
+        documentsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.document_number, id: val.id}
+        },
+        
+    
+        
+    
+        
+        approval_workflowsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.workflow_name)
+        },
+        approval_workflowsOneListFormatter(val) {
+            if (!val) return ''
+            return val.workflow_name
+        },
+        approval_workflowsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.workflow_name}
+            });
+        },
+        approval_workflowsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.workflow_name, id: val.id}
+        },
+        
+    
+        
+        approval_stepsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.step_name)
+        },
+        approval_stepsOneListFormatter(val) {
+            if (!val) return ''
+            return val.step_name
+        },
+        approval_stepsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.step_name}
+            });
+        },
+        approval_stepsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.step_name, id: val.id}
+        },
+        
+    
+        
+    
+        
+    
+        
+    
+}
diff --git a/frontend/src/helpers/fileSaver.ts b/frontend/src/helpers/fileSaver.ts
new file mode 100644
index 0000000..eff647d
--- /dev/null
+++ b/frontend/src/helpers/fileSaver.ts
@@ -0,0 +1,6 @@
+import { saveAs } from "file-saver";
+
+export const saveFile = (e, url: string, name: string) => {
+    e.stopPropagation();
+    saveAs(url,name);
+};
diff --git a/frontend/src/helpers/humanize.ts b/frontend/src/helpers/humanize.ts
new file mode 100644
index 0000000..ea88c06
--- /dev/null
+++ b/frontend/src/helpers/humanize.ts
@@ -0,0 +1,11 @@
+export  function humanize(str: string) {
+    if (!str) {
+        return '';
+    }
+    return str.toString()
+      .replace(/^[\s_]+|[\s_]+$/g, '')
+      .replace(/[_\s]+/g, ' ')
+      .replace(/^[a-z]/, function (m) {
+        return m.toUpperCase();
+      });
+  }
\ No newline at end of file
diff --git a/frontend/src/helpers/notifyStateHandler.ts b/frontend/src/helpers/notifyStateHandler.ts
new file mode 100644
index 0000000..b1a247c
--- /dev/null
+++ b/frontend/src/helpers/notifyStateHandler.ts
@@ -0,0 +1,31 @@
+export const resetNotify = (state) => {
+  state.notify.showNotification = false;
+  state.notify.typeNotification = '';
+  state.notify.textNotification = '';
+};
+export const rejectNotify = (state, action) => {
+  if (typeof action.payload === 'string') {
+    state.notify.textNotification = action.payload;
+  } else if (typeof action === 'object') {
+    const obj = { ...action.payload?.errors };
+    delete obj['_errors'];
+
+    let msg = '';
+
+    for (const key in obj) {
+      msg += `${key}: ${obj[key]['_errors']}; \n `;
+    }
+
+    state.notify.textNotification = msg;
+  } else {
+    state.notify.textNotification = 'Network error';
+  }
+  state.notify.textNotification = state.notify.textNotification || 'Network error';
+  state.notify.typeNotification = 'error';
+  state.notify.showNotification = true;
+};
+export const fulfilledNotify = (state, msg) => {
+  state.notify.textNotification = msg;
+  state.notify.typeNotification = 'success';
+  state.notify.showNotification = true;
+};
diff --git a/frontend/src/helpers/pexels.ts b/frontend/src/helpers/pexels.ts
new file mode 100644
index 0000000..3789520
--- /dev/null
+++ b/frontend/src/helpers/pexels.ts
@@ -0,0 +1,76 @@
+import axios from 'axios';
+
+export async function getPexelsImage() {
+  try {
+    const response = await axios.get(`/pexels/image`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching image:', error);
+    return null;
+  }
+}
+
+export async function getPexelsVideo() {
+  try {
+    const response = await axios.get(`/pexels/video`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching video:', error);
+    return null;
+  }
+}
+
+
+let localStorageLock = false;
+
+export async function getMultiplePexelsImages(
+  queries = ['home', 'apple', 'pizza', 'mountains', 'cat'],
+) {
+  const normalizeQuery = (query) =>
+    query.trim().toLowerCase().replace(/\s+/g, '');
+
+  while (localStorageLock) {
+    await new Promise((resolve) => setTimeout(resolve, 50)); 
+  }
+  localStorageLock = true;
+
+  const cachedImages = JSON.parse(localStorage.getItem('pexelsImagesCache')) || {};
+
+
+  const isImageCached = (query) => {
+    const normalizedQuery = normalizeQuery(query);
+    const cached = cachedImages[normalizedQuery];
+    const isCached = cached && cached.src && cached.photographer && cached.photographer_url;
+    return isCached;
+  };
+
+  const missingQueries = queries.filter((query) => !isImageCached(query));
+
+  if (missingQueries.length > 0) {
+    const queryString = missingQueries.join(',');
+
+    try {
+      const response = await axios.get(`/pexels/multiple-images`, {
+        params: { queries: queryString },
+      });
+
+      missingQueries.forEach((query, index) => {
+        const normalizedQuery = normalizeQuery(query);
+        if (!cachedImages[normalizedQuery]) {
+          cachedImages[normalizedQuery] = response.data[index];
+          }
+      });
+
+      localStorage.setItem('pexelsImagesCache', JSON.stringify(cachedImages));
+
+    } catch (error) {
+      console.error(error);
+    }
+  } 
+
+  const result = queries.map((query) => cachedImages[normalizeQuery(query)]);
+
+  localStorageLock = false;
+
+  return result;
+}
\ No newline at end of file
diff --git a/frontend/src/helpers/userPermissions.ts b/frontend/src/helpers/userPermissions.ts
new file mode 100644
index 0000000..7818d38
--- /dev/null
+++ b/frontend/src/helpers/userPermissions.ts
@@ -0,0 +1,18 @@
+
+export function hasPermission(user, permission_name: string | string[]) {
+  if (!user?.app_role?.name) return false;
+  if (!permission_name) {
+    return true;
+  }
+  const permissions = new Set<string>([
+    ...(user?.custom_permissions ?? []).map((p) => p.name),
+    ...(user?.app_role_permissions ?? []).map((p) => p.name),
+  ]);
+
+  if (typeof permission_name === 'string') {
+    return permissions.has(permission_name) || user.app_role.globalAccess
+  } else {
+    return permission_name.some((permission) => permissions.has(permission));
+  }
+}
+
diff --git a/frontend/src/hooks/sampleData.ts b/frontend/src/hooks/sampleData.ts
new file mode 100644
index 0000000..7e2aeec
--- /dev/null
+++ b/frontend/src/hooks/sampleData.ts
@@ -0,0 +1,22 @@
+import useSWR from 'swr'
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+export const useSampleClients = () => {
+  const { data, error } = useSWR('/data-sources/clients.json', fetcher)
+
+  return {
+    clients: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: error,
+  }
+}
+
+export const useSampleTransactions = () => {
+  const { data, error } = useSWR('/data-sources/history.json', fetcher)
+
+  return {
+    transactions: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: error,
+  }
+}
diff --git a/frontend/src/hooks/useDevCompilationStatus.ts b/frontend/src/hooks/useDevCompilationStatus.ts
new file mode 100644
index 0000000..dd07dba
--- /dev/null
+++ b/frontend/src/hooks/useDevCompilationStatus.ts
@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+type CompilationStatus = 'ready' | 'compiling' | 'error' | 'initial';
+
+const useDevCompilationStatus = (): CompilationStatus => {
+    const router = useRouter();
+    const [status, setStatus] = useState<CompilationStatus>('initial');
+
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'development') {
+            setStatus('ready');
+            return;
+        }
+
+        const handleRouteChangeStart = () => {
+            setStatus('compiling');
+        };
+
+        const handleRouteChangeComplete = () => {
+            setTimeout(() => setStatus('ready'), 300);
+        };
+
+        const handleRouteChangeError = () => {
+            setTimeout(() => setStatus('error'), 300);
+        };
+
+        router.events.on('routeChangeStart', handleRouteChangeStart);
+        router.events.on('routeChangeComplete', handleRouteChangeComplete);
+        router.events.on('routeChangeError', handleRouteChangeError);
+
+        setStatus('ready');
+
+        return () => {
+            router.events.off('routeChangeStart', handleRouteChangeStart);
+            router.events.off('routeChangeComplete', handleRouteChangeComplete);
+            router.events.off('routeChangeError', handleRouteChangeError);
+        };
+    }, [router]);
+
+    return status;
+};
+
+export default useDevCompilationStatus;
\ No newline at end of file
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
new file mode 100644
index 0000000..2bc1e8e
--- /dev/null
+++ b/frontend/src/i18n.ts
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import HttpApi from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+    .use(HttpApi)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        fallbackLng: 'en',
+        detection: {
+            order: ['localStorage', 'navigator'],
+            lookupLocalStorage: 'app_lang_',
+            caches: ['localStorage'],
+        },
+        backend: {
+            loadPath: '/locales/{{lng}}/{{ns}}.json',
+        },
+        interpolation: { escapeValue: false },
+    });
\ No newline at end of file
diff --git a/frontend/src/interfaces/index.ts b/frontend/src/interfaces/index.ts
new file mode 100644
index 0000000..0c7dd74
--- /dev/null
+++ b/frontend/src/interfaces/index.ts
@@ -0,0 +1,109 @@
+export type UserPayloadObject = {
+  name: string
+  email: string
+  avatar: string
+}
+
+export type MenuAsideItem = {
+  label: string
+  icon?: string
+  href?: string
+  target?: string
+  color?: ColorButtonKey
+  isLogout?: boolean
+  withDevider?: boolean;
+  menu?: MenuAsideItem[]
+  permissions?: string | string[]
+}
+
+export type MenuNavBarItem = {
+  label?: string
+  icon?: string
+  href?: string
+  target?: string
+  isDivider?: boolean
+  isLogout?: boolean
+  isDesktopNoLabel?: boolean
+  isToggleLightDark?: boolean
+  isCurrentUser?: boolean
+  menu?: MenuNavBarItem[]
+}
+
+export type ColorKey = 'white' | 'light' | 'contrast' | 'success' | 'danger' | 'warning' | 'info'
+
+export type ColorButtonKey =
+  | 'white'
+  | 'whiteDark'
+  | 'lightDark'
+  | 'contrast'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'void'
+
+export type BgKey = 'purplePink' | 'pinkRed' | 'violet'
+
+export type TrendType = 'up' | 'down' | 'success' | 'danger' | 'warning' | 'info'
+
+export type TransactionType = 'withdraw' | 'deposit' | 'invoice' | 'payment'
+
+export type Transaction = {
+  id: number
+  amount: number
+  account: string
+  name: string
+  date: string
+  type: TransactionType
+  business: string
+}
+
+export type Client = {
+  id: number
+  avatar: string
+  login: string
+  name: string
+  city: string,
+  company: string
+  firstName: string
+  lastName: string
+  phoneNumber: string
+  email: string
+  progress: number,
+  role: string
+  disabled: boolean
+  created: string
+  created_mm_dd_yyyy: string
+}
+
+export interface User {
+  id: string;
+  firstName: string;
+  lastName?: any;
+  phoneNumber?: any;
+  email: string;
+  role: string;
+  disabled: boolean;
+  password: string;
+  emailVerified: boolean;
+  emailVerificationToken?: any;
+  emailVerificationTokenExpiresAt?: any;
+  passwordResetToken?: any;
+  passwordResetTokenExpiresAt?: any;
+  provider: string;
+  importHash?: any;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt?: any;
+  createdById?: any;
+  updatedById?: any;
+  avatar: any[];
+  notes: any[];
+}
+
+export type StyleKey = 'white' | 'basic'
+
+export type UserForm = {
+  name: string
+  email: string
+}
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
new file mode 100644
index 0000000..1b9907d
--- /dev/null
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -0,0 +1,129 @@
+import React, { ReactNode, useEffect } from 'react'
+import { useState } from 'react'
+import jwt from 'jsonwebtoken';
+import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
+import menuAside from '../menuAside'
+import menuNavBar from '../menuNavBar'
+import BaseIcon from '../components/BaseIcon'
+import NavBar from '../components/NavBar'
+import NavBarItemPlain from '../components/NavBarItemPlain'
+import AsideMenu from '../components/AsideMenu'
+import FooterBar from '../components/FooterBar'
+import { useAppDispatch, useAppSelector } from '../stores/hooks'
+import Search from '../components/Search';
+import { useRouter } from 'next/router'
+import {findMe, logoutUser} from "../stores/authSlice";
+
+import {hasPermission} from "../helpers/userPermissions";
+
+
+type Props = {
+  children: ReactNode
+  
+  permission?: string
+  
+}
+
+export default function LayoutAuthenticated({
+  children,
+  
+  permission
+  
+}: Props) {
+  const dispatch = useAppDispatch()
+  const router = useRouter()
+  const { token, currentUser } = useAppSelector((state) => state.auth)
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  let localToken
+  if (typeof window !== 'undefined') {
+    // Perform localStorage action
+    localToken = localStorage.getItem('token')
+  }
+
+  const isTokenValid = () => {
+    const token = localStorage.getItem('token');
+    if (!token) return;
+    const date = new Date().getTime() / 1000;
+    const data = jwt.decode(token);
+    if (!data) return;
+    return date < data.exp;
+  };
+
+  useEffect(() => {
+    dispatch(findMe());
+    if (!isTokenValid()) {
+      dispatch(logoutUser());
+      router.push('/login');
+    }
+  }, [token, localToken]);
+
+  
+  useEffect(() => {
+    if (!permission || !currentUser) return;
+
+    if (!hasPermission(currentUser, permission)) router.push('/error');
+  }, [currentUser, permission]);
+  
+
+  const darkMode = useAppSelector((state) => state.style.darkMode)
+
+  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false)
+  const [isAsideLgActive, setIsAsideLgActive] = useState(false)
+
+  useEffect(() => {
+    const handleRouteChangeStart = () => {
+      setIsAsideMobileExpanded(false)
+      setIsAsideLgActive(false)
+    }
+
+    router.events.on('routeChangeStart', handleRouteChangeStart)
+
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method:
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChangeStart)
+    }
+  }, [router.events, dispatch])
+
+
+  const layoutAsidePadding = 'xl:pl-60'
+
+  return (
+    <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
+      <div
+        className={`${layoutAsidePadding} ${
+          isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
+        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+      >
+        <NavBar
+          menu={menuNavBar}
+          className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
+        >
+          <NavBarItemPlain
+            display="flex lg:hidden"
+            onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
+          >
+            <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
+          </NavBarItemPlain>
+          <NavBarItemPlain
+            display="hidden lg:flex xl:hidden"
+            onClick={() => setIsAsideLgActive(true)}
+          >
+            <BaseIcon path={mdiMenu} size="24" />
+          </NavBarItemPlain>
+          <NavBarItemPlain useMargin>
+            <Search />
+          </NavBarItemPlain>
+        </NavBar>
+        <AsideMenu
+          isAsideMobileExpanded={isAsideMobileExpanded}
+          isAsideLgActive={isAsideLgActive}
+          menu={menuAside}
+          onAsideLgClose={() => setIsAsideLgActive(false)}
+        />
+        {children}
+        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/layouts/Guest.tsx b/frontend/src/layouts/Guest.tsx
new file mode 100644
index 0000000..657813c
--- /dev/null
+++ b/frontend/src/layouts/Guest.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+import { useAppSelector } from '../stores/hooks'
+
+type Props = {
+  children: ReactNode
+}
+
+export default function LayoutGuest({ children }: Props) {
+  const darkMode = useAppSelector((state) => state.style.darkMode)
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+
+  return (
+    <div className={darkMode ? 'dark' : ''}>
+      <div className={`${bgColor} dark:bg-slate-800 dark:text-slate-100`}>{children}</div>
+    </div>
+  )
+}
diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts
new file mode 100644
index 0000000..72aaac0
--- /dev/null
+++ b/frontend/src/menuAside.ts
@@ -0,0 +1,259 @@
+import * as icon from '@mdi/js';
+import { MenuAsideItem } from './interfaces'
+
+const menuAside: MenuAsideItem[] = [
+  {
+    href: '/dashboard',
+    icon: icon.mdiViewDashboardOutline,
+    label: 'Dashboard',
+  },
+  
+  {
+    href: '/users/users-list',
+    label: 'Users',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiAccountGroup ?? icon.mdiTable,
+    permissions: 'READ_USERS'
+  },
+  {
+    href: '/roles/roles-list',
+    label: 'Roles',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
+    permissions: 'READ_ROLES'
+  },
+  {
+    href: '/permissions/permissions-list',
+    label: 'Permissions',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
+    permissions: 'READ_PERMISSIONS'
+  },
+  {
+    href: '/organizations/organizations-list',
+    label: 'Organizations',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_ORGANIZATIONS'
+  },
+  {
+    href: '/companies/companies-list',
+    label: 'Companies',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_COMPANIES'
+  },
+  {
+    href: '/user_role_assignments/user_role_assignments-list',
+    label: 'User role assignments',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiAccountKey' in icon ? icon['mdiAccountKey' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_USER_ROLE_ASSIGNMENTS'
+  },
+  {
+    href: '/role_permission_mappings/role_permission_mappings-list',
+    label: 'Role permission mappings',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiShieldKey' in icon ? icon['mdiShieldKey' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_ROLE_PERMISSION_MAPPINGS'
+  },
+  {
+    href: '/vendors/vendors-list',
+    label: 'Vendors',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiTruck' in icon ? icon['mdiTruck' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_VENDORS'
+  },
+  {
+    href: '/warehouses/warehouses-list',
+    label: 'Warehouses',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiWarehouse' in icon ? icon['mdiWarehouse' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_WAREHOUSES'
+  },
+  {
+    href: '/product_categories/product_categories-list',
+    label: 'Product categories',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PRODUCT_CATEGORIES'
+  },
+  {
+    href: '/products/products-list',
+    label: 'Products',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiPackageVariant' in icon ? icon['mdiPackageVariant' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PRODUCTS'
+  },
+  {
+    href: '/purchase_requisitions/purchase_requisitions-list',
+    label: 'Purchase requisitions',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFileDocumentEdit' in icon ? icon['mdiFileDocumentEdit' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PURCHASE_REQUISITIONS'
+  },
+  {
+    href: '/purchase_requisition_lines/purchase_requisition_lines-list',
+    label: 'Purchase requisition lines',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFormatListBulleted' in icon ? icon['mdiFormatListBulleted' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PURCHASE_REQUISITION_LINES'
+  },
+  {
+    href: '/purchase_orders/purchase_orders-list',
+    label: 'Purchase orders',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PURCHASE_ORDERS'
+  },
+  {
+    href: '/purchase_order_lines/purchase_order_lines-list',
+    label: 'Purchase order lines',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiPlaylistEdit' in icon ? icon['mdiPlaylistEdit' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PURCHASE_ORDER_LINES'
+  },
+  {
+    href: '/goods_receipts/goods_receipts-list',
+    label: 'Goods receipts',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiTruckCheck' in icon ? icon['mdiTruckCheck' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_GOODS_RECEIPTS'
+  },
+  {
+    href: '/goods_receipt_lines/goods_receipt_lines-list',
+    label: 'Goods receipt lines',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiClipboardCheck' in icon ? icon['mdiClipboardCheck' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_GOODS_RECEIPT_LINES'
+  },
+  {
+    href: '/vendor_invoices/vendor_invoices-list',
+    label: 'Vendor invoices',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFileDocument' in icon ? icon['mdiFileDocument' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_VENDOR_INVOICES'
+  },
+  {
+    href: '/invoice_lines/invoice_lines-list',
+    label: 'Invoice lines',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiReceiptText' in icon ? icon['mdiReceiptText' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_INVOICE_LINES'
+  },
+  {
+    href: '/payments/payments-list',
+    label: 'Payments',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiCashCheck' in icon ? icon['mdiCashCheck' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_PAYMENTS'
+  },
+  {
+    href: '/departments/departments-list',
+    label: 'Departments',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiOfficeBuilding' in icon ? icon['mdiOfficeBuilding' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_DEPARTMENTS'
+  },
+  {
+    href: '/document_types/document_types-list',
+    label: 'Document types',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiShape' in icon ? icon['mdiShape' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_DOCUMENT_TYPES'
+  },
+  {
+    href: '/documents/documents-list',
+    label: 'Documents',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFolderFile' in icon ? icon['mdiFolderFile' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_DOCUMENTS'
+  },
+  {
+    href: '/document_links/document_links-list',
+    label: 'Document links',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiLinkVariant' in icon ? icon['mdiLinkVariant' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_DOCUMENT_LINKS'
+  },
+  {
+    href: '/approval_workflows/approval_workflows-list',
+    label: 'Approval workflows',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiSitemap' in icon ? icon['mdiSitemap' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_APPROVAL_WORKFLOWS'
+  },
+  {
+    href: '/approval_steps/approval_steps-list',
+    label: 'Approval steps',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiStairs' in icon ? icon['mdiStairs' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_APPROVAL_STEPS'
+  },
+  {
+    href: '/approvals/approvals-list',
+    label: 'Approvals',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiCheckDecagram' in icon ? icon['mdiCheckDecagram' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_APPROVALS'
+  },
+  {
+    href: '/activity_logs/activity_logs-list',
+    label: 'Activity logs',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiHistory' in icon ? icon['mdiHistory' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_ACTIVITY_LOGS'
+  },
+  {
+    href: '/ui_announcements/ui_announcements-list',
+    label: 'Ui announcements',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiBullhorn' in icon ? icon['mdiBullhorn' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_UI_ANNOUNCEMENTS'
+  },
+  {
+    href: '/profile',
+    label: 'Profile',
+    icon: icon.mdiAccountCircle,
+  },
+
+ 
+  {
+    href: '/api-docs',
+    target: '_blank',
+    label: 'Swagger API',
+    icon: icon.mdiFileCode,
+    permissions: 'READ_API_DOCS'
+  },
+]
+
+export default menuAside
diff --git a/frontend/src/menuNavBar.ts b/frontend/src/menuNavBar.ts
new file mode 100644
index 0000000..a5dd956
--- /dev/null
+++ b/frontend/src/menuNavBar.ts
@@ -0,0 +1,53 @@
+import {
+  mdiMenu,
+  mdiClockOutline,
+  mdiCloud,
+  mdiCrop,
+  mdiAccount,
+  mdiCogOutline,
+  mdiEmail,
+  mdiLogout,
+  mdiThemeLightDark,
+  mdiGithub,
+  mdiVuejs,
+} from '@mdi/js'
+import { MenuNavBarItem } from './interfaces'
+
+const menuNavBar: MenuNavBarItem[] = [
+  {
+    isCurrentUser: true,
+    menu: [
+      {
+        icon: mdiAccount,
+        label: 'My Profile',
+        href: '/profile',
+      },
+      {
+        isDivider: true,
+      },
+      {
+        icon: mdiLogout,
+        label: 'Log Out',
+        isLogout: true,
+      },
+    ],
+  },
+  {
+    icon: mdiThemeLightDark,
+    label: 'Light/Dark',
+    isDesktopNoLabel: true,
+    isToggleLightDark: true,
+  },
+  {
+    icon: mdiLogout,
+    label: 'Log out',
+    isDesktopNoLabel: true,
+    isLogout: true,
+  },
+]
+
+export const webPagesNavBar = [
+    
+];
+
+export default menuNavBar
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
new file mode 100644
index 0000000..d5b4ac4
--- /dev/null
+++ b/frontend/src/pages/_app.tsx
@@ -0,0 +1,201 @@
+import React from 'react';
+import type { AppProps } from 'next/app';
+import type { ReactElement, ReactNode } from 'react';
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import { store } from '../stores/store';
+import { Provider } from 'react-redux';
+import '../css/main.css';
+import axios from 'axios';
+import { baseURLApi } from '../config';
+import { useRouter } from 'next/router';
+import ErrorBoundary from "../components/ErrorBoundary";
+import DevModeBadge from '../components/DevModeBadge';
+import 'intro.js/introjs.css';
+import { appWithTranslation } from 'next-i18next';
+import '../i18n';
+import IntroGuide from '../components/IntroGuide';
+import { appSteps,  loginSteps, usersSteps, rolesSteps } from '../stores/introSteps';
+
+// Initialize axios
+axios.defaults.baseURL = process.env.NEXT_PUBLIC_BACK_API
+    ? process.env.NEXT_PUBLIC_BACK_API
+    : baseURLApi;
+
+axios.defaults.headers.common['Content-Type'] = 'application/json';
+
+export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout
+}
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout || ((page) => page);
+  const router = useRouter();
+  const [stepsEnabled, setStepsEnabled] = React.useState(false);
+  const [stepName, setStepName] = React.useState('');
+  const [steps, setSteps] = React.useState([]);
+
+    axios.interceptors.request.use(
+        config => {
+            const token = localStorage.getItem('token');
+
+            if (token) {
+                config.headers.Authorization = `Bearer ${token}`;
+            } else {
+                delete config.headers.Authorization;
+            }
+
+            return config;
+        },
+        error => {
+            return Promise.reject(error);
+        }
+    );
+
+    // TODO: Remove this code in future releases
+    React.useEffect(() => {
+        const allowedOrigin = (() => {
+            if (!document.referrer) {
+                return null;
+            }
+            try {
+                return new URL(document.referrer).origin;
+            } catch (error) {
+                console.warn('[postMessage] Failed to parse parent origin from referrer', error);
+                return null;
+            }
+        })();
+
+        const handleMessage = async (event: MessageEvent) => {
+            if (event.data === 'getLocation') {
+                event.source?.postMessage(
+                    { iframeLocation: window.location.pathname },
+                    event.origin,
+                );
+                return;
+            }
+
+            if (event.data === 'getAuthToken') {
+                if (allowedOrigin && event.origin !== allowedOrigin) {
+                    console.warn('[postMessage] Blocked getAuthToken from origin', event.origin);
+                    return;
+                }
+                const token = localStorage.getItem('token');
+                const user = localStorage.getItem('user');
+                event.source?.postMessage(
+                    { iframeAuthToken: token, iframeAuthUser: user },
+                    event.origin,
+                );
+                return;
+            }
+
+            if (event.data === 'getScreenshot') {
+                try {
+                    const html2canvas = (await import('html2canvas')).default;
+                    const canvas = await html2canvas(document.body, { useCORS: true });
+                    const url = canvas.toDataURL('image/jpeg', 0.8);
+                    event.source?.postMessage({ iframeScreenshot: url }, event.origin);
+                } catch (e) {
+                    console.error('html2canvas failed', e);
+                    event.source?.postMessage({ iframeScreenshot: null }, event.origin);
+                }
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+  React.useEffect(() => {
+    // Tour is disabled by default in generated projects.
+    return;
+    const isCompleted = (stepKey: string) => {
+      return localStorage.getItem(`completed_${stepKey}`) === 'true';
+    };
+     if (router.pathname === '/login' && !isCompleted('loginSteps')) {
+      setSteps(loginSteps);
+      setStepName('loginSteps');
+      setStepsEnabled(true); 
+    }else if (router.pathname === '/dashboard' && !isCompleted('appSteps')) {
+      setTimeout(() => {
+        setSteps(appSteps);
+        setStepName('appSteps');
+        setStepsEnabled(true); 
+      }, 1000);
+    } else if (router.pathname === '/users/users-list' && !isCompleted('usersSteps')) {
+      setTimeout(() => {
+        setSteps(usersSteps);
+        setStepName('usersSteps');
+        setStepsEnabled(true); 
+      }, 1000);
+    } else if (router.pathname === '/roles/roles-list' && !isCompleted('rolesSteps')) {
+      setTimeout(() => {
+        setSteps(rolesSteps);
+        setStepName('rolesSteps');
+        setStepsEnabled(true); 
+      }, 1000);
+    } else {
+      setSteps([]);
+      setStepsEnabled(false); 
+    }
+  }, [router.pathname]);
+
+  const handleExit = () => {
+    setStepsEnabled(false);
+  };
+
+  const title = 'Modern ERP Redesign'
+  const description = "Modern redesign of an ERP with improved navigation and a smooth Purchase Order to Document workflow."
+  const url = "https://flatlogic.com/"
+  const image = "https://project-screens.s3.amazonaws.com/screenshots/39416/app-hero-20260331-115422.png"
+  const imageWidth = '1920'
+  const imageHeight = '960'
+
+  return (
+    <Provider store={store}>
+      {getLayout(
+        <>
+          <Head>
+            <meta name="description" content={description} />
+
+            <meta property="og:url" content={url} />
+            <meta property="og:site_name" content="https://flatlogic.com/" />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:image" content={image} />
+            <meta property="og:image:type" content="image/png" />
+            <meta property="og:image:width" content={imageWidth} />
+            <meta property="og:image:height" content={imageHeight} />
+
+            <meta property="twitter:card" content="summary_large_image" />
+            <meta property="twitter:title" content={title} />
+            <meta property="twitter:description" content={description} />
+            <meta property="twitter:image:src" content={image} />
+            <meta property="twitter:image:width" content={imageWidth} />
+            <meta property="twitter:image:height" content={imageHeight} />
+
+            <link rel="icon" href="/favicon.svg" />
+          </Head>
+
+          <ErrorBoundary>
+            <Component {...pageProps} />
+          </ErrorBoundary>
+          <IntroGuide
+            steps={steps}
+            stepsName={stepName}
+            stepsEnabled={stepsEnabled}
+            onExit={handleExit}
+          />
+            {(process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev_stage') && <DevModeBadge />}
+        </>
+      )}
+    </Provider>
+  )
+}
+
+export default appWithTranslation(MyApp);
diff --git a/frontend/src/pages/activity_logs/[activity_logsId].tsx b/frontend/src/pages/activity_logs/[activity_logsId].tsx
new file mode 100644
index 0000000..45fd16f
--- /dev/null
+++ b/frontend/src/pages/activity_logs/[activity_logsId].tsx
@@ -0,0 +1,811 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/activity_logs/activity_logsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditActivity_logs = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    actor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    entity_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'entity_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    action: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    event_time: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    message: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'ip_address': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { activity_logs } = useAppSelector((state) => state.activity_logs)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { activity_logsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: activity_logsId }))
+  }, [activity_logsId])
+
+  useEffect(() => {
+    if (typeof activity_logs === 'object') {
+      setInitialValues(activity_logs)
+    }
+  }, [activity_logs])
+
+  useEffect(() => {
+      if (typeof activity_logs === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (activity_logs)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [activity_logs])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: activity_logsId, data }))
+    await router.push('/activity_logs/activity_logs-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit activity_logs')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit activity_logs'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Actor' labelFor='actor'>
+        <Field
+            name='actor'
+            id='actor'
+            component={SelectField}
+            options={initialValues.actor}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="EntityType" labelFor="entity_type">
+        <Field name="entity_type" id="entity_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="goods_receipt">goods_receipt</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="payment">payment</option>
+          
+            <option value="document">document</option>
+          
+            <option value="product">product</option>
+          
+            <option value="vendor">vendor</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="EntityReference"
+    >
+        <Field
+            name="entity_reference"
+            placeholder="EntityReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Action" labelFor="action">
+        <Field name="action" id="action" component="select">
+          
+            <option value="created">created</option>
+          
+            <option value="updated">updated</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="sent">sent</option>
+          
+            <option value="posted">posted</option>
+          
+            <option value="received">received</option>
+          
+            <option value="paid">paid</option>
+          
+            <option value="archived">archived</option>
+          
+            <option value="commented">commented</option>
+          
+            <option value="attached_file">attached_file</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EventTime"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.event_time ?
+                  new Date(
+                      dayjs(initialValues.event_time).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'event_time': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Message" hasTextareaHeight>
+        <Field name="message" as="textarea" placeholder="Message" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="IPAddress"
+    >
+        <Field
+            name="ip_address"
+            placeholder="IPAddress"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/activity_logs/activity_logs-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditActivity_logs.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditActivity_logs
diff --git a/frontend/src/pages/activity_logs/activity_logs-edit.tsx b/frontend/src/pages/activity_logs/activity_logs-edit.tsx
new file mode 100644
index 0000000..c662a63
--- /dev/null
+++ b/frontend/src/pages/activity_logs/activity_logs-edit.tsx
@@ -0,0 +1,808 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/activity_logs/activity_logsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditActivity_logsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    actor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    entity_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'entity_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    action: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    event_time: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    message: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'ip_address': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { activity_logs } = useAppSelector((state) => state.activity_logs)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof activity_logs === 'object') {
+      setInitialValues(activity_logs)
+    }
+  }, [activity_logs])
+
+  useEffect(() => {
+      if (typeof activity_logs === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (activity_logs)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [activity_logs])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/activity_logs/activity_logs-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit activity_logs')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit activity_logs'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Actor' labelFor='actor'>
+        <Field
+            name='actor'
+            id='actor'
+            component={SelectField}
+            options={initialValues.actor}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="EntityType" labelFor="entity_type">
+        <Field name="entity_type" id="entity_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="goods_receipt">goods_receipt</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="payment">payment</option>
+          
+            <option value="document">document</option>
+          
+            <option value="product">product</option>
+          
+            <option value="vendor">vendor</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="EntityReference"
+    >
+        <Field
+            name="entity_reference"
+            placeholder="EntityReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Action" labelFor="action">
+        <Field name="action" id="action" component="select">
+          
+            <option value="created">created</option>
+          
+            <option value="updated">updated</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="sent">sent</option>
+          
+            <option value="posted">posted</option>
+          
+            <option value="received">received</option>
+          
+            <option value="paid">paid</option>
+          
+            <option value="archived">archived</option>
+          
+            <option value="commented">commented</option>
+          
+            <option value="attached_file">attached_file</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EventTime"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.event_time ?
+                  new Date(
+                      dayjs(initialValues.event_time).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'event_time': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Message" hasTextareaHeight>
+        <Field name="message" as="textarea" placeholder="Message" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="IPAddress"
+    >
+        <Field
+            name="ip_address"
+            placeholder="IPAddress"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/activity_logs/activity_logs-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditActivity_logsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditActivity_logsPage
diff --git a/frontend/src/pages/activity_logs/activity_logs-list.tsx b/frontend/src/pages/activity_logs/activity_logs-list.tsx
new file mode 100644
index 0000000..4d2afae
--- /dev/null
+++ b/frontend/src/pages/activity_logs/activity_logs-list.tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableActivity_logs from '../../components/Activity_logs/TableActivity_logs'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/activity_logs/activity_logsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Activity_logsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'EntityReference', title: 'entity_reference'},{label: 'Message', title: 'message'},{label: 'IPAddress', title: 'ip_address'},
+          
+          
+          {label: 'EventTime', title: 'event_time', date: 'true'},
+    
+    
+    {label: 'Actor', title: 'actor'},
+    
+    
+          
+          {label: 'EntityType', title: 'entity_type', type: 'enum', options: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment','document','product','vendor']},{label: 'Action', title: 'action', type: 'enum', options: ['created','updated','submitted','approved','rejected','sent','posted','received','paid','archived','commented','attached_file']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ACTIVITY_LOGS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getActivity_logsCSV = async () => {
+        const response = await axios({url: '/activity_logs?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'activity_logsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Activity_logs')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Activity_logs" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/activity_logs/activity_logs-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getActivity_logsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableActivity_logs
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Activity_logsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Activity_logsTablesPage
diff --git a/frontend/src/pages/activity_logs/activity_logs-new.tsx b/frontend/src/pages/activity_logs/activity_logs-new.tsx
new file mode 100644
index 0000000..1c6f1ac
--- /dev/null
+++ b/frontend/src/pages/activity_logs/activity_logs-new.tsx
@@ -0,0 +1,522 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/activity_logs/activity_logsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    actor: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    entity_type: 'purchase_requisition',
+    
+    
+    
+    
+    
+    
+    
+    entity_reference: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    action: 'created',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    event_time: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    message: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    ip_address: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Activity_logsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/activity_logs/activity_logs-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Actor" labelFor="actor">
+      <Field name="actor" id="actor" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="EntityType" labelFor="entity_type">
+      <Field name="entity_type" id="entity_type" component="select">
+      
+        <option value="purchase_requisition">purchase_requisition</option>
+      
+        <option value="purchase_order">purchase_order</option>
+      
+        <option value="goods_receipt">goods_receipt</option>
+      
+        <option value="vendor_invoice">vendor_invoice</option>
+      
+        <option value="payment">payment</option>
+      
+        <option value="document">document</option>
+      
+        <option value="product">product</option>
+      
+        <option value="vendor">vendor</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="EntityReference"
+  >
+      <Field
+          name="entity_reference"
+          placeholder="EntityReference"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Action" labelFor="action">
+      <Field name="action" id="action" component="select">
+      
+        <option value="created">created</option>
+      
+        <option value="updated">updated</option>
+      
+        <option value="submitted">submitted</option>
+      
+        <option value="approved">approved</option>
+      
+        <option value="rejected">rejected</option>
+      
+        <option value="sent">sent</option>
+      
+        <option value="posted">posted</option>
+      
+        <option value="received">received</option>
+      
+        <option value="paid">paid</option>
+      
+        <option value="archived">archived</option>
+      
+        <option value="commented">commented</option>
+      
+        <option value="attached_file">attached_file</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="EventTime"
+  >
+      <Field
+          type="datetime-local"
+          name="event_time"
+          placeholder="EventTime"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Message" hasTextareaHeight>
+        <Field name="message" as="textarea" placeholder="Message" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="IPAddress"
+  >
+      <Field
+          name="ip_address"
+          placeholder="IPAddress"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/activity_logs/activity_logs-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Activity_logsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Activity_logsNew
diff --git a/frontend/src/pages/activity_logs/activity_logs-table.tsx b/frontend/src/pages/activity_logs/activity_logs-table.tsx
new file mode 100644
index 0000000..720bf45
--- /dev/null
+++ b/frontend/src/pages/activity_logs/activity_logs-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableActivity_logs from '../../components/Activity_logs/TableActivity_logs'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/activity_logs/activity_logsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Activity_logsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'EntityReference', title: 'entity_reference'},{label: 'Message', title: 'message'},{label: 'IPAddress', title: 'ip_address'},
+          
+          
+          {label: 'EventTime', title: 'event_time', date: 'true'},
+    
+    
+    {label: 'Actor', title: 'actor'},
+    
+    
+              
+          {label: 'EntityType', title: 'entity_type', type: 'enum', options: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment','document','product','vendor']},{label: 'Action', title: 'action', type: 'enum', options: ['created','updated','submitted','approved','rejected','sent','posted','received','paid','archived','commented','attached_file']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ACTIVITY_LOGS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getActivity_logsCSV = async () => {
+        const response = await axios({url: '/activity_logs?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'activity_logsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Activity_logs')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Activity_logs" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/activity_logs/activity_logs-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getActivity_logsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/activity_logs/activity_logs-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableActivity_logs
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Activity_logsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Activity_logsTablesPage
diff --git a/frontend/src/pages/activity_logs/activity_logs-view.tsx b/frontend/src/pages/activity_logs/activity_logs-view.tsx
new file mode 100644
index 0000000..6ea8ca7
--- /dev/null
+++ b/frontend/src/pages/activity_logs/activity_logs-view.tsx
@@ -0,0 +1,505 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/activity_logs/activity_logsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Activity_logsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { activity_logs } = useAppSelector((state) => state.activity_logs)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View activity_logs')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View activity_logs')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/activity_logs/activity_logs-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Actor</p>
+                    
+                    
+                        <p>{activity_logs?.actor?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>EntityType</p>
+                    <p>{activity_logs?.entity_type ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>EntityReference</p>
+                    <p>{activity_logs?.entity_reference}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Action</p>
+                    <p>{activity_logs?.action ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='EventTime'>
+                    {activity_logs.event_time ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={activity_logs.event_time ?
+                        new Date(
+                          dayjs(activity_logs.event_time).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No EventTime</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={activity_logs?.message} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>IPAddress</p>
+                    <p>{activity_logs?.ip_address}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{activity_logs?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/activity_logs/activity_logs-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Activity_logsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ACTIVITY_LOGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Activity_logsView;
\ No newline at end of file
diff --git a/frontend/src/pages/api/hello.js b/frontend/src/pages/api/hello.js
new file mode 100644
index 0000000..f163396
--- /dev/null
+++ b/frontend/src/pages/api/hello.js
@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function helloAPI(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/frontend/src/pages/api/logError.ts b/frontend/src/pages/api/logError.ts
new file mode 100644
index 0000000..d72b3fd
--- /dev/null
+++ b/frontend/src/pages/api/logError.ts
@@ -0,0 +1,83 @@
+import fsPromises from 'fs/promises';
+import path from 'path';
+
+const dataFilePath = path.join(process.cwd(), 'json/runtimeError.json');
+
+export default async function handler(req, res) {
+  // Ensure directory exists
+  try {
+    await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+  } catch (error) {
+    // Ignore if directory already exists
+  }
+
+  if (req.method === 'GET') {
+    try {
+      // Check if file exists
+      try {
+        await fsPromises.access(dataFilePath);
+      } catch (error) {
+        // File doesn't exist, return empty object
+        return res.status(200).json({});
+      }
+
+      // Read the existing data from the JSON file
+      const jsonData = await fsPromises.readFile(dataFilePath, 'utf-8');
+
+      // Handle empty file
+      if (!jsonData || jsonData.trim() === '') {
+        // Write empty JSON object to file
+        await fsPromises.writeFile(dataFilePath, '{}', 'utf-8');
+        return res.status(200).json({});
+      }
+
+      // Parse JSON data
+      try {
+        const objectData = JSON.parse(jsonData);
+        return res.status(200).json(objectData);
+      } catch (parseError) {
+        console.error('Error parsing JSON from file:', parseError);
+        // Reset the file with valid JSON if parsing fails
+        await fsPromises.writeFile(dataFilePath, '{}', 'utf-8');
+        return res.status(200).json({});
+      }
+    } catch (error) {
+      console.error('Error in GET handler:', error);
+      return res.status(200).json({}); // Return empty object instead of error
+    }
+  } else if (req.method === 'POST') {
+    try {
+      const updatedData = JSON.stringify(req.body);
+
+      // Create directory if it doesn't exist
+      await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+
+      // Write the updated data to the JSON file
+      await fsPromises.writeFile(dataFilePath, updatedData);
+
+      // Send a success response
+      res.status(200).json({ message: 'Data stored successfully' });
+    } catch (error) {
+      console.error('Error in POST handler:', error);
+      // Send an error response
+      res.status(500).json({ message: 'Error storing data' });
+    }
+  } else if (req.method === 'DELETE') {
+    try {
+      // Create directory if it doesn't exist
+      await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+
+      // Write empty JSON object to file
+      await fsPromises.writeFile(dataFilePath, '{}');
+
+      // Send a success response
+      res.status(200).json({message: 'Data deleted successfully'});
+    } catch (error) {
+      console.error('Error in DELETE handler:', error);
+      // Send an error response
+      res.status(500).json({message: 'Error deleting data'});
+    }
+  } else {
+    res.status(405).json({ message: 'Method not allowed' });
+  }
+}
diff --git a/frontend/src/pages/approval_steps/[approval_stepsId].tsx b/frontend/src/pages/approval_steps/[approval_stepsId].tsx
new file mode 100644
index 0000000..84b299b
--- /dev/null
+++ b/frontend/src/pages/approval_steps/[approval_stepsId].tsx
@@ -0,0 +1,843 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approval_steps/approval_stepsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApproval_steps = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_workflow: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+    step_order: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'step_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approver_role: null,
+    
+
+    
+    
+    
+    'min_amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'max_amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_required: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approval_steps } = useAppSelector((state) => state.approval_steps)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { approval_stepsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: approval_stepsId }))
+  }, [approval_stepsId])
+
+  useEffect(() => {
+    if (typeof approval_steps === 'object') {
+      setInitialValues(approval_steps)
+    }
+  }, [approval_steps])
+
+  useEffect(() => {
+      if (typeof approval_steps === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approval_steps)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [approval_steps])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: approval_stepsId, data }))
+    await router.push('/approval_steps/approval_steps-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approval_steps')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approval_steps'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalWorkflow' labelFor='approval_workflow'>
+        <Field
+            name='approval_workflow'
+            id='approval_workflow'
+            component={SelectField}
+            options={initialValues.approval_workflow}
+            itemRef={'approval_workflows'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'workflow_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="StepOrder"
+    >
+        <Field
+            type="number"
+            name="step_order"
+            placeholder="StepOrder"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="StepName"
+    >
+        <Field
+            name="step_name"
+            placeholder="StepName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApproverRole' labelFor='approver_role'>
+        <Field
+            name='approver_role'
+            id='approver_role'
+            component={SelectField}
+            options={initialValues.approver_role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="MinAmount"
+    >
+        <Field
+            type="number"
+            name="min_amount"
+            placeholder="MinAmount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="MaxAmount"
+    >
+        <Field
+            type="number"
+            name="max_amount"
+            placeholder="MaxAmount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsRequired' labelFor='is_required'>
+        <Field
+            name='is_required'
+            id='is_required'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_steps/approval_steps-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApproval_steps.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApproval_steps
diff --git a/frontend/src/pages/approval_steps/approval_steps-edit.tsx b/frontend/src/pages/approval_steps/approval_steps-edit.tsx
new file mode 100644
index 0000000..b125372
--- /dev/null
+++ b/frontend/src/pages/approval_steps/approval_steps-edit.tsx
@@ -0,0 +1,840 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approval_steps/approval_stepsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApproval_stepsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_workflow: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+    step_order: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'step_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approver_role: null,
+    
+
+    
+    
+    
+    'min_amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'max_amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_required: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approval_steps } = useAppSelector((state) => state.approval_steps)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof approval_steps === 'object') {
+      setInitialValues(approval_steps)
+    }
+  }, [approval_steps])
+
+  useEffect(() => {
+      if (typeof approval_steps === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approval_steps)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [approval_steps])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/approval_steps/approval_steps-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approval_steps')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approval_steps'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalWorkflow' labelFor='approval_workflow'>
+        <Field
+            name='approval_workflow'
+            id='approval_workflow'
+            component={SelectField}
+            options={initialValues.approval_workflow}
+            itemRef={'approval_workflows'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'workflow_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="StepOrder"
+    >
+        <Field
+            type="number"
+            name="step_order"
+            placeholder="StepOrder"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="StepName"
+    >
+        <Field
+            name="step_name"
+            placeholder="StepName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApproverRole' labelFor='approver_role'>
+        <Field
+            name='approver_role'
+            id='approver_role'
+            component={SelectField}
+            options={initialValues.approver_role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="MinAmount"
+    >
+        <Field
+            type="number"
+            name="min_amount"
+            placeholder="MinAmount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="MaxAmount"
+    >
+        <Field
+            type="number"
+            name="max_amount"
+            placeholder="MaxAmount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsRequired' labelFor='is_required'>
+        <Field
+            name='is_required'
+            id='is_required'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_steps/approval_steps-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApproval_stepsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApproval_stepsPage
diff --git a/frontend/src/pages/approval_steps/approval_steps-list.tsx b/frontend/src/pages/approval_steps/approval_steps-list.tsx
new file mode 100644
index 0000000..126dbe8
--- /dev/null
+++ b/frontend/src/pages/approval_steps/approval_steps-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApproval_steps from '../../components/Approval_steps/TableApproval_steps'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approval_steps/approval_stepsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Approval_stepsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'StepName', title: 'step_name'},
+          {label: 'StepOrder', title: 'step_order', number: 'true'},
+          {label: 'MinAmount', title: 'min_amount', number: 'true'},{label: 'MaxAmount', title: 'max_amount', number: 'true'},
+          
+    
+    
+    {label: 'ApprovalWorkflow', title: 'approval_workflow'},
+    
+    
+    
+    {label: 'ApproverRole', title: 'approver_role'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVAL_STEPS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApproval_stepsCSV = async () => {
+        const response = await axios({url: '/approval_steps?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approval_stepsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approval_steps')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approval_steps" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approval_steps/approval_steps-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApproval_stepsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableApproval_steps
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Approval_stepsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_stepsTablesPage
diff --git a/frontend/src/pages/approval_steps/approval_steps-new.tsx b/frontend/src/pages/approval_steps/approval_steps-new.tsx
new file mode 100644
index 0000000..9ad21cb
--- /dev/null
+++ b/frontend/src/pages/approval_steps/approval_steps-new.tsx
@@ -0,0 +1,487 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/approval_steps/approval_stepsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    approval_workflow: '',
+    
+    
+    
+    
+    
+    
+    
+    step_order: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    step_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    approver_role: '',
+    
+    
+    
+    
+    min_amount: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    max_amount: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_required: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Approval_stepsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/approval_steps/approval_steps-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ApprovalWorkflow" labelFor="approval_workflow">
+      <Field name="approval_workflow" id="approval_workflow" component={SelectField} options={[]} itemRef={'approval_workflows'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="StepOrder"
+    >
+        <Field
+            type="number"
+            name="step_order"
+            placeholder="StepOrder"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="StepName"
+  >
+      <Field
+          name="step_name"
+          placeholder="StepName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ApproverRole" labelFor="approver_role">
+      <Field name="approver_role" id="approver_role" component={SelectField} options={[]} itemRef={'roles'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="MinAmount"
+    >
+        <Field
+            type="number"
+            name="min_amount"
+            placeholder="MinAmount"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="MaxAmount"
+    >
+        <Field
+            type="number"
+            name="max_amount"
+            placeholder="MaxAmount"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsRequired' labelFor='is_required'>
+      <Field
+          name='is_required'
+          id='is_required'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_steps/approval_steps-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Approval_stepsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_stepsNew
diff --git a/frontend/src/pages/approval_steps/approval_steps-table.tsx b/frontend/src/pages/approval_steps/approval_steps-table.tsx
new file mode 100644
index 0000000..4507ca5
--- /dev/null
+++ b/frontend/src/pages/approval_steps/approval_steps-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApproval_steps from '../../components/Approval_steps/TableApproval_steps'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approval_steps/approval_stepsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Approval_stepsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'StepName', title: 'step_name'},
+          {label: 'StepOrder', title: 'step_order', number: 'true'},
+          {label: 'MinAmount', title: 'min_amount', number: 'true'},{label: 'MaxAmount', title: 'max_amount', number: 'true'},
+          
+    
+    
+    {label: 'ApprovalWorkflow', title: 'approval_workflow'},
+    
+    
+    
+    {label: 'ApproverRole', title: 'approver_role'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVAL_STEPS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApproval_stepsCSV = async () => {
+        const response = await axios({url: '/approval_steps?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approval_stepsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approval_steps')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approval_steps" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approval_steps/approval_steps-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApproval_stepsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/approval_steps/approval_steps-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableApproval_steps
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Approval_stepsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_stepsTablesPage
diff --git a/frontend/src/pages/approval_steps/approval_steps-view.tsx b/frontend/src/pages/approval_steps/approval_steps-view.tsx
new file mode 100644
index 0000000..4ec6e9f
--- /dev/null
+++ b/frontend/src/pages/approval_steps/approval_steps-view.tsx
@@ -0,0 +1,666 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/approval_steps/approval_stepsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Approval_stepsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { approval_steps } = useAppSelector((state) => state.approval_steps)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View approval_steps')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View approval_steps')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/approval_steps/approval_steps-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ApprovalWorkflow</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approval_steps?.approval_workflow?.workflow_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>StepOrder</p>
+                  <p>{approval_steps?.step_order || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>StepName</p>
+                    <p>{approval_steps?.step_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ApproverRole</p>
+                    
+                    
+                    
+                    
+                        <p>{approval_steps?.approver_role?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>MinAmount</p>
+                  <p>{approval_steps?.min_amount || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>MaxAmount</p>
+                  <p>{approval_steps?.max_amount || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsRequired'>
+                    <SwitchField
+                      field={{name: 'is_required', value: approval_steps?.is_required}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approval_steps?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approvals ApprovalStep</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>RequestedAt</th>
+                                
+                                
+                                
+                                <th>DecidedAt</th>
+                                
+                                
+                                
+                                <th>DecisionNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {approval_steps.approvals_approval_step && Array.isArray(approval_steps.approvals_approval_step) &&
+                              approval_steps.approvals_approval_step.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="requested_at">
+                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decided_at">
+                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decision_notes">
+                                        { item.decision_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!approval_steps?.approvals_approval_step?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/approval_steps/approval_steps-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Approval_stepsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_STEPS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Approval_stepsView;
\ No newline at end of file
diff --git a/frontend/src/pages/approval_workflows/[approval_workflowsId].tsx b/frontend/src/pages/approval_workflows/[approval_workflowsId].tsx
new file mode 100644
index 0000000..f2e56ac
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/[approval_workflowsId].tsx
@@ -0,0 +1,645 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approval_workflows/approval_workflowsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApproval_workflows = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'workflow_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    applies_to: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approval_workflows } = useAppSelector((state) => state.approval_workflows)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { approval_workflowsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: approval_workflowsId }))
+  }, [approval_workflowsId])
+
+  useEffect(() => {
+    if (typeof approval_workflows === 'object') {
+      setInitialValues(approval_workflows)
+    }
+  }, [approval_workflows])
+
+  useEffect(() => {
+      if (typeof approval_workflows === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approval_workflows)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [approval_workflows])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: approval_workflowsId, data }))
+    await router.push('/approval_workflows/approval_workflows-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approval_workflows')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approval_workflows'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WorkflowName"
+    >
+        <Field
+            name="workflow_name"
+            placeholder="WorkflowName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="AppliesTo" labelFor="applies_to">
+        <Field name="applies_to" id="applies_to" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="document">document</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_workflows/approval_workflows-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApproval_workflows.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApproval_workflows
diff --git a/frontend/src/pages/approval_workflows/approval_workflows-edit.tsx b/frontend/src/pages/approval_workflows/approval_workflows-edit.tsx
new file mode 100644
index 0000000..08fc0e5
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/approval_workflows-edit.tsx
@@ -0,0 +1,642 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approval_workflows/approval_workflowsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApproval_workflowsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'workflow_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    applies_to: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approval_workflows } = useAppSelector((state) => state.approval_workflows)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof approval_workflows === 'object') {
+      setInitialValues(approval_workflows)
+    }
+  }, [approval_workflows])
+
+  useEffect(() => {
+      if (typeof approval_workflows === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approval_workflows)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [approval_workflows])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/approval_workflows/approval_workflows-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approval_workflows')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approval_workflows'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WorkflowName"
+    >
+        <Field
+            name="workflow_name"
+            placeholder="WorkflowName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="AppliesTo" labelFor="applies_to">
+        <Field name="applies_to" id="applies_to" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="document">document</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_workflows/approval_workflows-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApproval_workflowsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApproval_workflowsPage
diff --git a/frontend/src/pages/approval_workflows/approval_workflows-list.tsx b/frontend/src/pages/approval_workflows/approval_workflows-list.tsx
new file mode 100644
index 0000000..bc63f15
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/approval_workflows-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApproval_workflows from '../../components/Approval_workflows/TableApproval_workflows'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approval_workflows/approval_workflowsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Approval_workflowsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'WorkflowName', title: 'workflow_name'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          {label: 'AppliesTo', title: 'applies_to', type: 'enum', options: ['purchase_requisition','purchase_order','vendor_invoice','document']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVAL_WORKFLOWS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApproval_workflowsCSV = async () => {
+        const response = await axios({url: '/approval_workflows?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approval_workflowsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approval_workflows')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approval_workflows" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approval_workflows/approval_workflows-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApproval_workflowsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/approval_workflows/approval_workflows-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableApproval_workflows
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Approval_workflowsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_workflowsTablesPage
diff --git a/frontend/src/pages/approval_workflows/approval_workflows-new.tsx b/frontend/src/pages/approval_workflows/approval_workflows-new.tsx
new file mode 100644
index 0000000..3a50fe6
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/approval_workflows-new.tsx
@@ -0,0 +1,388 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/approval_workflows/approval_workflowsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    workflow_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    applies_to: 'purchase_requisition',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Approval_workflowsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/approval_workflows/approval_workflows-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="WorkflowName"
+  >
+      <Field
+          name="workflow_name"
+          placeholder="WorkflowName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="AppliesTo" labelFor="applies_to">
+      <Field name="applies_to" id="applies_to" component="select">
+      
+        <option value="purchase_requisition">purchase_requisition</option>
+      
+        <option value="purchase_order">purchase_order</option>
+      
+        <option value="vendor_invoice">vendor_invoice</option>
+      
+        <option value="document">document</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approval_workflows/approval_workflows-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Approval_workflowsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_workflowsNew
diff --git a/frontend/src/pages/approval_workflows/approval_workflows-table.tsx b/frontend/src/pages/approval_workflows/approval_workflows-table.tsx
new file mode 100644
index 0000000..5a87ff7
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/approval_workflows-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApproval_workflows from '../../components/Approval_workflows/TableApproval_workflows'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approval_workflows/approval_workflowsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Approval_workflowsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'WorkflowName', title: 'workflow_name'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          {label: 'AppliesTo', title: 'applies_to', type: 'enum', options: ['purchase_requisition','purchase_order','vendor_invoice','document']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVAL_WORKFLOWS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApproval_workflowsCSV = async () => {
+        const response = await axios({url: '/approval_workflows?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approval_workflowsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approval_workflows')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approval_workflows" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approval_workflows/approval_workflows-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApproval_workflowsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/approval_workflows/approval_workflows-list'}>
+                Back to <span className='capitalize'>list</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableApproval_workflows
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Approval_workflowsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Approval_workflowsTablesPage
diff --git a/frontend/src/pages/approval_workflows/approval_workflows-view.tsx b/frontend/src/pages/approval_workflows/approval_workflows-view.tsx
new file mode 100644
index 0000000..45ab2ea
--- /dev/null
+++ b/frontend/src/pages/approval_workflows/approval_workflows-view.tsx
@@ -0,0 +1,624 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/approval_workflows/approval_workflowsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Approval_workflowsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { approval_workflows } = useAppSelector((state) => state.approval_workflows)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View approval_workflows')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View approval_workflows')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/approval_workflows/approval_workflows-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approval_workflows?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>WorkflowName</p>
+                    <p>{approval_workflows?.workflow_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>AppliesTo</p>
+                    <p>{approval_workflows?.applies_to ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: approval_workflows?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={approval_workflows?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approval_workflows?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approval_steps ApprovalWorkflow</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>StepOrder</th>
+                                
+                                
+                                
+                                <th>StepName</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>MinAmount</th>
+                                
+                                
+                                
+                                <th>MaxAmount</th>
+                                
+                                
+                                
+                                <th>IsRequired</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {approval_workflows.approval_steps_approval_workflow && Array.isArray(approval_workflows.approval_steps_approval_workflow) &&
+                              approval_workflows.approval_steps_approval_workflow.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approval_steps/approval_steps-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="step_order">
+                                        { item.step_order }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="step_name">
+                                        { item.step_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="min_amount">
+                                        { item.min_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="max_amount">
+                                        { item.max_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_required">
+                                        { dataFormatter.booleanFormatter(item.is_required) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!approval_workflows?.approval_steps_approval_workflow?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approvals ApprovalWorkflow</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>RequestedAt</th>
+                                
+                                
+                                
+                                <th>DecidedAt</th>
+                                
+                                
+                                
+                                <th>DecisionNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {approval_workflows.approvals_approval_workflow && Array.isArray(approval_workflows.approvals_approval_workflow) &&
+                              approval_workflows.approvals_approval_workflow.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="requested_at">
+                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decided_at">
+                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decision_notes">
+                                        { item.decision_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!approval_workflows?.approvals_approval_workflow?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/approval_workflows/approval_workflows-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Approval_workflowsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVAL_WORKFLOWS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Approval_workflowsView;
\ No newline at end of file
diff --git a/frontend/src/pages/approvals/[approvalsId].tsx b/frontend/src/pages/approvals/[approvalsId].tsx
new file mode 100644
index 0000000..b6d734e
--- /dev/null
+++ b/frontend/src/pages/approvals/[approvalsId].tsx
@@ -0,0 +1,1183 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approvals/approvalsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApprovals = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_workflow: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_step: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    entity_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'entity_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    assigned_to: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_at: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    decided_at: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    decision_notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approvals } = useAppSelector((state) => state.approvals)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { approvalsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: approvalsId }))
+  }, [approvalsId])
+
+  useEffect(() => {
+    if (typeof approvals === 'object') {
+      setInitialValues(approvals)
+    }
+  }, [approvals])
+
+  useEffect(() => {
+      if (typeof approvals === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approvals)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [approvals])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: approvalsId, data }))
+    await router.push('/approvals/approvals-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approvals')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approvals'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalWorkflow' labelFor='approval_workflow'>
+        <Field
+            name='approval_workflow'
+            id='approval_workflow'
+            component={SelectField}
+            options={initialValues.approval_workflow}
+            itemRef={'approval_workflows'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'workflow_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalStep' labelFor='approval_step'>
+        <Field
+            name='approval_step'
+            id='approval_step'
+            component={SelectField}
+            options={initialValues.approval_step}
+            itemRef={'approval_steps'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'step_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="EntityType" labelFor="entity_type">
+        <Field name="entity_type" id="entity_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="document">document</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="EntityReference"
+    >
+        <Field
+            name="entity_reference"
+            placeholder="EntityReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='RequestedBy' labelFor='requested_by'>
+        <Field
+            name='requested_by'
+            id='requested_by'
+            component={SelectField}
+            options={initialValues.requested_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='AssignedTo' labelFor='assigned_to'>
+        <Field
+            name='assigned_to'
+            id='assigned_to'
+            component={SelectField}
+            options={initialValues.assigned_to}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="pending">pending</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="RequestedAt"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.requested_at ?
+                  new Date(
+                      dayjs(initialValues.requested_at).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'requested_at': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DecidedAt"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.decided_at ?
+                  new Date(
+                      dayjs(initialValues.decided_at).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'decided_at': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="DecisionNotes" hasTextareaHeight>
+        <Field name="decision_notes" as="textarea" placeholder="DecisionNotes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approvals/approvals-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApprovals.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApprovals
diff --git a/frontend/src/pages/approvals/approvals-edit.tsx b/frontend/src/pages/approvals/approvals-edit.tsx
new file mode 100644
index 0000000..572b7fa
--- /dev/null
+++ b/frontend/src/pages/approvals/approvals-edit.tsx
@@ -0,0 +1,1180 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/approvals/approvalsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditApprovalsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_workflow: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    approval_step: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    entity_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'entity_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    assigned_to: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_at: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    decided_at: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    decision_notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { approvals } = useAppSelector((state) => state.approvals)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof approvals === 'object') {
+      setInitialValues(approvals)
+    }
+  }, [approvals])
+
+  useEffect(() => {
+      if (typeof approvals === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (approvals)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [approvals])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/approvals/approvals-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit approvals')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit approvals'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalWorkflow' labelFor='approval_workflow'>
+        <Field
+            name='approval_workflow'
+            id='approval_workflow'
+            component={SelectField}
+            options={initialValues.approval_workflow}
+            itemRef={'approval_workflows'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'workflow_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ApprovalStep' labelFor='approval_step'>
+        <Field
+            name='approval_step'
+            id='approval_step'
+            component={SelectField}
+            options={initialValues.approval_step}
+            itemRef={'approval_steps'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'step_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="EntityType" labelFor="entity_type">
+        <Field name="entity_type" id="entity_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="document">document</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="EntityReference"
+    >
+        <Field
+            name="entity_reference"
+            placeholder="EntityReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='RequestedBy' labelFor='requested_by'>
+        <Field
+            name='requested_by'
+            id='requested_by'
+            component={SelectField}
+            options={initialValues.requested_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='AssignedTo' labelFor='assigned_to'>
+        <Field
+            name='assigned_to'
+            id='assigned_to'
+            component={SelectField}
+            options={initialValues.assigned_to}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="pending">pending</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="RequestedAt"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.requested_at ?
+                  new Date(
+                      dayjs(initialValues.requested_at).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'requested_at': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DecidedAt"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.decided_at ?
+                  new Date(
+                      dayjs(initialValues.decided_at).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'decided_at': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="DecisionNotes" hasTextareaHeight>
+        <Field name="decision_notes" as="textarea" placeholder="DecisionNotes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approvals/approvals-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditApprovalsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditApprovalsPage
diff --git a/frontend/src/pages/approvals/approvals-list.tsx b/frontend/src/pages/approvals/approvals-list.tsx
new file mode 100644
index 0000000..778babe
--- /dev/null
+++ b/frontend/src/pages/approvals/approvals-list.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApprovals from '../../components/Approvals/TableApprovals'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approvals/approvalsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const ApprovalsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'EntityReference', title: 'entity_reference'},{label: 'DecisionNotes', title: 'decision_notes'},
+          
+          
+          {label: 'RequestedAt', title: 'requested_at', date: 'true'},{label: 'DecidedAt', title: 'decided_at', date: 'true'},
+    
+    
+    {label: 'ApprovalWorkflow', title: 'approval_workflow'},
+    
+    
+    
+    {label: 'ApprovalStep', title: 'approval_step'},
+    
+    
+    
+    {label: 'RequestedBy', title: 'requested_by'},
+    
+    
+    
+    {label: 'AssignedTo', title: 'assigned_to'},
+    
+    
+          
+          {label: 'EntityType', title: 'entity_type', type: 'enum', options: ['purchase_requisition','purchase_order','vendor_invoice','document']},{label: 'Status', title: 'status', type: 'enum', options: ['pending','approved','rejected','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVALS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApprovalsCSV = async () => {
+        const response = await axios({url: '/approvals?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approvalsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approvals')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approvals" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approvals/approvals-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApprovalsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/approvals/approvals-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+          <TableApprovals
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+ApprovalsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ApprovalsTablesPage
diff --git a/frontend/src/pages/approvals/approvals-new.tsx b/frontend/src/pages/approvals/approvals-new.tsx
new file mode 100644
index 0000000..0b6a848
--- /dev/null
+++ b/frontend/src/pages/approvals/approvals-new.tsx
@@ -0,0 +1,637 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/approvals/approvalsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    approval_workflow: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    approval_step: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    entity_type: 'purchase_requisition',
+    
+    
+    
+    
+    
+    
+    
+    entity_reference: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    requested_by: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    assigned_to: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'pending',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    requested_at: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    decided_at: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    decision_notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const ApprovalsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/approvals/approvals-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ApprovalWorkflow" labelFor="approval_workflow">
+      <Field name="approval_workflow" id="approval_workflow" component={SelectField} options={[]} itemRef={'approval_workflows'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ApprovalStep" labelFor="approval_step">
+      <Field name="approval_step" id="approval_step" component={SelectField} options={[]} itemRef={'approval_steps'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="EntityType" labelFor="entity_type">
+      <Field name="entity_type" id="entity_type" component="select">
+      
+        <option value="purchase_requisition">purchase_requisition</option>
+      
+        <option value="purchase_order">purchase_order</option>
+      
+        <option value="vendor_invoice">vendor_invoice</option>
+      
+        <option value="document">document</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="EntityReference"
+  >
+      <Field
+          name="entity_reference"
+          placeholder="EntityReference"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="RequestedBy" labelFor="requested_by">
+      <Field name="requested_by" id="requested_by" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="AssignedTo" labelFor="assigned_to">
+      <Field name="assigned_to" id="assigned_to" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="pending">pending</option>
+      
+        <option value="approved">approved</option>
+      
+        <option value="rejected">rejected</option>
+      
+        <option value="cancelled">cancelled</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="RequestedAt"
+  >
+      <Field
+          type="datetime-local"
+          name="requested_at"
+          placeholder="RequestedAt"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DecidedAt"
+  >
+      <Field
+          type="datetime-local"
+          name="decided_at"
+          placeholder="DecidedAt"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="DecisionNotes" hasTextareaHeight>
+        <Field name="decision_notes" as="textarea" placeholder="DecisionNotes" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/approvals/approvals-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+ApprovalsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ApprovalsNew
diff --git a/frontend/src/pages/approvals/approvals-table.tsx b/frontend/src/pages/approvals/approvals-table.tsx
new file mode 100644
index 0000000..9091e38
--- /dev/null
+++ b/frontend/src/pages/approvals/approvals-table.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableApprovals from '../../components/Approvals/TableApprovals'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/approvals/approvalsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const ApprovalsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'EntityReference', title: 'entity_reference'},{label: 'DecisionNotes', title: 'decision_notes'},
+          
+          
+          {label: 'RequestedAt', title: 'requested_at', date: 'true'},{label: 'DecidedAt', title: 'decided_at', date: 'true'},
+    
+    
+    {label: 'ApprovalWorkflow', title: 'approval_workflow'},
+    
+    
+    
+    {label: 'ApprovalStep', title: 'approval_step'},
+    
+    
+    
+    {label: 'RequestedBy', title: 'requested_by'},
+    
+    
+    
+    {label: 'AssignedTo', title: 'assigned_to'},
+    
+    
+              
+          {label: 'EntityType', title: 'entity_type', type: 'enum', options: ['purchase_requisition','purchase_order','vendor_invoice','document']},{label: 'Status', title: 'status', type: 'enum', options: ['pending','approved','rejected','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_APPROVALS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getApprovalsCSV = async () => {
+        const response = await axios({url: '/approvals?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'approvalsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Approvals')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Approvals" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/approvals/approvals-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getApprovalsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/approvals/approvals-list'}>
+                Back to <span className='capitalize'>kanban</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableApprovals
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+ApprovalsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ApprovalsTablesPage
diff --git a/frontend/src/pages/approvals/approvals-view.tsx b/frontend/src/pages/approvals/approvals-view.tsx
new file mode 100644
index 0000000..f0c88e8
--- /dev/null
+++ b/frontend/src/pages/approvals/approvals-view.tsx
@@ -0,0 +1,795 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/approvals/approvalsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const ApprovalsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { approvals } = useAppSelector((state) => state.approvals)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View approvals')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View approvals')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/approvals/approvals-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ApprovalWorkflow</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approvals?.approval_workflow?.workflow_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ApprovalStep</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approvals?.approval_step?.step_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>EntityType</p>
+                    <p>{approvals?.entity_type ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>EntityReference</p>
+                    <p>{approvals?.entity_reference}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>RequestedBy</p>
+                    
+                    
+                        <p>{approvals?.requested_by?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>AssignedTo</p>
+                    
+                    
+                        <p>{approvals?.assigned_to?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{approvals?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='RequestedAt'>
+                    {approvals.requested_at ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={approvals.requested_at ?
+                        new Date(
+                          dayjs(approvals.requested_at).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No RequestedAt</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='DecidedAt'>
+                    {approvals.decided_at ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={approvals.decided_at ?
+                        new Date(
+                          dayjs(approvals.decided_at).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No DecidedAt</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={approvals?.decision_notes} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{approvals?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/approvals/approvals-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+ApprovalsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_APPROVALS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default ApprovalsView;
\ No newline at end of file
diff --git a/frontend/src/pages/companies/[companiesId].tsx b/frontend/src/pages/companies/[companiesId].tsx
new file mode 100644
index 0000000..147ea75
--- /dev/null
+++ b/frontend/src/pages/companies/[companiesId].tsx
@@ -0,0 +1,1172 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/companies/companiesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditCompanies = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'company_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'legal_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'website': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phone': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'address_line1': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'address_line2': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'city': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'state': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'postal_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'country': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    logo: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { companies } = useAppSelector((state) => state.companies)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { companiesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: companiesId }))
+  }, [companiesId])
+
+  useEffect(() => {
+    if (typeof companies === 'object') {
+      setInitialValues(companies)
+    }
+  }, [companies])
+
+  useEffect(() => {
+      if (typeof companies === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (companies)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [companies])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: companiesId, data }))
+    await router.push('/companies/companies-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit companies')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit companies'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="CompanyName"
+    >
+        <Field
+            name="company_name"
+            placeholder="CompanyName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="LegalName"
+    >
+        <Field
+            name="legal_name"
+            placeholder="LegalName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="TaxNumber"
+    >
+        <Field
+            name="tax_number"
+            placeholder="TaxNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Website"
+    >
+        <Field
+            name="website"
+            placeholder="Website"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone"
+    >
+        <Field
+            name="phone"
+            placeholder="Phone"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="AddressLine1"
+    >
+        <Field
+            name="address_line1"
+            placeholder="AddressLine1"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="AddressLine2"
+    >
+        <Field
+            name="address_line2"
+            placeholder="AddressLine2"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="City"
+    >
+        <Field
+            name="city"
+            placeholder="City"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="State/Province"
+    >
+        <Field
+            name="state"
+            placeholder="State/Province"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PostalCode"
+    >
+        <Field
+            name="postal_code"
+            placeholder="PostalCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Country"
+    >
+        <Field
+            name="country"
+            placeholder="Country"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Logo'
+                color='info'
+                icon={mdiUpload}
+                path={'companies/logo'}
+                name='logo'
+                id='logo'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/companies/companies-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditCompanies.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditCompanies
diff --git a/frontend/src/pages/companies/companies-edit.tsx b/frontend/src/pages/companies/companies-edit.tsx
new file mode 100644
index 0000000..2bb90d0
--- /dev/null
+++ b/frontend/src/pages/companies/companies-edit.tsx
@@ -0,0 +1,1169 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/companies/companiesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditCompaniesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'company_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'legal_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'website': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phone': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'address_line1': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'address_line2': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'city': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'state': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'postal_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'country': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    logo: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { companies } = useAppSelector((state) => state.companies)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof companies === 'object') {
+      setInitialValues(companies)
+    }
+  }, [companies])
+
+  useEffect(() => {
+      if (typeof companies === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (companies)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [companies])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/companies/companies-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit companies')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit companies'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="CompanyName"
+    >
+        <Field
+            name="company_name"
+            placeholder="CompanyName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="LegalName"
+    >
+        <Field
+            name="legal_name"
+            placeholder="LegalName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="TaxNumber"
+    >
+        <Field
+            name="tax_number"
+            placeholder="TaxNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Website"
+    >
+        <Field
+            name="website"
+            placeholder="Website"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone"
+    >
+        <Field
+            name="phone"
+            placeholder="Phone"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="AddressLine1"
+    >
+        <Field
+            name="address_line1"
+            placeholder="AddressLine1"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="AddressLine2"
+    >
+        <Field
+            name="address_line2"
+            placeholder="AddressLine2"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="City"
+    >
+        <Field
+            name="city"
+            placeholder="City"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="State/Province"
+    >
+        <Field
+            name="state"
+            placeholder="State/Province"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PostalCode"
+    >
+        <Field
+            name="postal_code"
+            placeholder="PostalCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Country"
+    >
+        <Field
+            name="country"
+            placeholder="Country"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Logo'
+                color='info'
+                icon={mdiUpload}
+                path={'companies/logo'}
+                name='logo'
+                id='logo'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/companies/companies-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditCompaniesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditCompaniesPage
diff --git a/frontend/src/pages/companies/companies-list.tsx b/frontend/src/pages/companies/companies-list.tsx
new file mode 100644
index 0000000..6c7b815
--- /dev/null
+++ b/frontend/src/pages/companies/companies-list.tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableCompanies from '../../components/Companies/TableCompanies'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/companies/companiesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const CompaniesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'CompanyName', title: 'company_name'},{label: 'LegalName', title: 'legal_name'},{label: 'TaxNumber', title: 'tax_number'},{label: 'Website', title: 'website'},{label: 'Phone', title: 'phone'},{label: 'Email', title: 'email'},{label: 'AddressLine1', title: 'address_line1'},{label: 'AddressLine2', title: 'address_line2'},{label: 'City', title: 'city'},{label: 'State/Province', title: 'state'},{label: 'PostalCode', title: 'postal_code'},{label: 'Country', title: 'country'},
+          
+          
+          
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_COMPANIES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getCompaniesCSV = async () => {
+        const response = await axios({url: '/companies?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'companiesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Companies')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Companies" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/companies/companies-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getCompaniesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/companies/companies-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableCompanies
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+CompaniesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default CompaniesTablesPage
diff --git a/frontend/src/pages/companies/companies-new.tsx b/frontend/src/pages/companies/companies-new.tsx
new file mode 100644
index 0000000..2623361
--- /dev/null
+++ b/frontend/src/pages/companies/companies-new.tsx
@@ -0,0 +1,858 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/companies/companiesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    company_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    legal_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    tax_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    website: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    phone: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    email: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    address_line1: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    address_line2: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    city: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    state: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    postal_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    country: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    logo: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const CompaniesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/companies/companies-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="CompanyName"
+  >
+      <Field
+          name="company_name"
+          placeholder="CompanyName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="LegalName"
+  >
+      <Field
+          name="legal_name"
+          placeholder="LegalName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="TaxNumber"
+  >
+      <Field
+          name="tax_number"
+          placeholder="TaxNumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Website"
+  >
+      <Field
+          name="website"
+          placeholder="Website"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Phone"
+  >
+      <Field
+          name="phone"
+          placeholder="Phone"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Email"
+  >
+      <Field
+          name="email"
+          placeholder="Email"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="AddressLine1"
+  >
+      <Field
+          name="address_line1"
+          placeholder="AddressLine1"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="AddressLine2"
+  >
+      <Field
+          name="address_line2"
+          placeholder="AddressLine2"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="City"
+  >
+      <Field
+          name="city"
+          placeholder="City"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="State/Province"
+  >
+      <Field
+          name="state"
+          placeholder="State/Province"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PostalCode"
+  >
+      <Field
+          name="postal_code"
+          placeholder="PostalCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Country"
+  >
+      <Field
+          name="country"
+          placeholder="Country"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Logo'
+          color='info'
+          icon={mdiUpload}
+          path={'companies/logo'}
+          name='logo'
+          id='logo'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormImagePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/companies/companies-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+CompaniesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default CompaniesNew
diff --git a/frontend/src/pages/companies/companies-table.tsx b/frontend/src/pages/companies/companies-table.tsx
new file mode 100644
index 0000000..7f5149f
--- /dev/null
+++ b/frontend/src/pages/companies/companies-table.tsx
@@ -0,0 +1,164 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableCompanies from '../../components/Companies/TableCompanies'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/companies/companiesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const CompaniesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'CompanyName', title: 'company_name'},{label: 'LegalName', title: 'legal_name'},{label: 'TaxNumber', title: 'tax_number'},{label: 'Website', title: 'website'},{label: 'Phone', title: 'phone'},{label: 'Email', title: 'email'},{label: 'AddressLine1', title: 'address_line1'},{label: 'AddressLine2', title: 'address_line2'},{label: 'City', title: 'city'},{label: 'State/Province', title: 'state'},{label: 'PostalCode', title: 'postal_code'},{label: 'Country', title: 'country'},
+          
+          
+          
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_COMPANIES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getCompaniesCSV = async () => {
+        const response = await axios({url: '/companies?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'companiesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Companies')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Companies" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/companies/companies-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getCompaniesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/companies/companies-list'}>
+                Back to <span className='capitalize'>card</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableCompanies
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+CompaniesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default CompaniesTablesPage
diff --git a/frontend/src/pages/companies/companies-view.tsx b/frontend/src/pages/companies/companies-view.tsx
new file mode 100644
index 0000000..580f76a
--- /dev/null
+++ b/frontend/src/pages/companies/companies-view.tsx
@@ -0,0 +1,2045 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/companies/companiesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const CompaniesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { companies } = useAppSelector((state) => state.companies)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View companies')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View companies')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/companies/companies-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>CompanyName</p>
+                    <p>{companies?.company_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>LegalName</p>
+                    <p>{companies?.legal_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>TaxNumber</p>
+                    <p>{companies?.tax_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Website</p>
+                    <p>{companies?.website}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Phone</p>
+                    <p>{companies?.phone}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Email</p>
+                    <p>{companies?.email}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>AddressLine1</p>
+                    <p>{companies?.address_line1}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>AddressLine2</p>
+                    <p>{companies?.address_line2}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>City</p>
+                    <p>{companies?.city}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>State/Province</p>
+                    <p>{companies?.state}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PostalCode</p>
+                    <p>{companies?.postal_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Country</p>
+                    <p>{companies?.country}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Logo</p>
+                    {companies?.logo?.length
+                      ? (
+                        <ImageField
+                          name={'logo'}
+                          image={companies?.logo}
+                          className='w-20 h-20'
+                        />
+                      ) : <p>No Logo</p>
+                    }
+                </div>
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: companies?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{companies?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>User_role_assignments Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EffectiveFrom</th>
+                                
+                                
+                                
+                                <th>EffectiveTo</th>
+                                
+                                
+                                
+                                <th>IsPrimary</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.user_role_assignments_company && Array.isArray(companies.user_role_assignments_company) &&
+                              companies.user_role_assignments_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/user_role_assignments/user_role_assignments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="effective_from">
+                                        { dataFormatter.dateTimeFormatter(item.effective_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="effective_to">
+                                        { dataFormatter.dateTimeFormatter(item.effective_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_primary">
+                                        { dataFormatter.booleanFormatter(item.is_primary) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.user_role_assignments_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendors Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>VendorName</th>
+                                
+                                
+                                
+                                <th>VendorCode</th>
+                                
+                                
+                                
+                                <th>ContactName</th>
+                                
+                                
+                                
+                                <th>Email</th>
+                                
+                                
+                                
+                                <th>Phone</th>
+                                
+                                
+                                
+                                <th>Address</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>PaymentTerms</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.vendors_company && Array.isArray(companies.vendors_company) &&
+                              companies.vendors_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendors/vendors-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="vendor_name">
+                                        { item.vendor_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="vendor_code">
+                                        { item.vendor_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="contact_name">
+                                        { item.contact_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="phone">
+                                        { item.phone }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address">
+                                        { item.address }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="payment_terms">
+                                        { item.payment_terms }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.vendors_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Warehouses Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>WarehouseName</th>
+                                
+                                
+                                
+                                <th>WarehouseCode</th>
+                                
+                                
+                                
+                                <th>Address</th>
+                                
+                                
+                                
+                                <th>IsDefault</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.warehouses_company && Array.isArray(companies.warehouses_company) &&
+                              companies.warehouses_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/warehouses/warehouses-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="warehouse_name">
+                                        { item.warehouse_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="warehouse_code">
+                                        { item.warehouse_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address">
+                                        { item.address }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_default">
+                                        { dataFormatter.booleanFormatter(item.is_default) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.warehouses_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Product_categories Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>CategoryName</th>
+                                
+                                
+                                
+                                <th>CategoryCode</th>
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.product_categories_company && Array.isArray(companies.product_categories_company) &&
+                              companies.product_categories_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/product_categories/product_categories-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="category_name">
+                                        { item.category_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="category_code">
+                                        { item.category_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.product_categories_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Products Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ProductName</th>
+                                
+                                
+                                
+                                <th>SKU</th>
+                                
+                                
+                                
+                                <th>Barcode</th>
+                                
+                                
+                                
+                                <th>ProductType</th>
+                                
+                                
+                                
+                                <th>UnitofMeasure</th>
+                                
+                                
+                                
+                                <th>StandardCost</th>
+                                
+                                
+                                
+                                <th>PurchasePrice</th>
+                                
+                                
+                                
+                                <th>SalesPrice</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.products_company && Array.isArray(companies.products_company) &&
+                              companies.products_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/products/products-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="product_name">
+                                        { item.product_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sku">
+                                        { item.sku }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="barcode">
+                                        { item.barcode }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="product_type">
+                                        { item.product_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="uom">
+                                        { item.uom }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="standard_cost">
+                                        { item.standard_cost }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="purchase_price">
+                                        { item.purchase_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sales_price">
+                                        { item.sales_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.products_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisitions Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>RequisitionNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>RequestedDate</th>
+                                
+                                
+                                
+                                <th>NeededBy</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Reason</th>
+                                
+                                
+                                
+                                <th>EstimatedTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.purchase_requisitions_company && Array.isArray(companies.purchase_requisitions_company) &&
+                              companies.purchase_requisitions_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requisition_number">
+                                        { item.requisition_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requested_date">
+                                        { dataFormatter.dateTimeFormatter(item.requested_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="needed_by">
+                                        { dataFormatter.dateTimeFormatter(item.needed_by) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="reason">
+                                        { item.reason }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="estimated_total">
+                                        { item.estimated_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.purchase_requisitions_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_orders Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PONumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>OrderDate</th>
+                                
+                                
+                                
+                                <th>ExpectedDeliveryDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>DiscountTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.purchase_orders_company && Array.isArray(companies.purchase_orders_company) &&
+                              companies.purchase_orders_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_orders/purchase_orders-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="po_number">
+                                        { item.po_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="order_date">
+                                        { dataFormatter.dateTimeFormatter(item.order_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="expected_delivery_date">
+                                        { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_total">
+                                        { item.discount_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.purchase_orders_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipts Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>GRNNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ReceiptDate</th>
+                                
+                                
+                                
+                                <th>PostedDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Remarks</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.goods_receipts_company && Array.isArray(companies.goods_receipts_company) &&
+                              companies.goods_receipts_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipts/goods_receipts-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="grn_number">
+                                        { item.grn_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="receipt_date">
+                                        { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="posted_date">
+                                        { dataFormatter.dateTimeFormatter(item.posted_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="remarks">
+                                        { item.remarks }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.goods_receipts_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendor_invoices Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>InvoiceNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>InvoiceDate</th>
+                                
+                                
+                                
+                                <th>DueDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.vendor_invoices_company && Array.isArray(companies.vendor_invoices_company) &&
+                              companies.vendor_invoices_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendor_invoices/vendor_invoices-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_number">
+                                        { item.invoice_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_date">
+                                        { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="due_date">
+                                        { dataFormatter.dateTimeFormatter(item.due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.vendor_invoices_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Payments Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PaymentReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>PaymentDate</th>
+                                
+                                
+                                
+                                <th>Amount</th>
+                                
+                                
+                                
+                                <th>Method</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.payments_company && Array.isArray(companies.payments_company) &&
+                              companies.payments_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_reference">
+                                        { item.payment_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_date">
+                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="amount">
+                                        { item.amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="method">
+                                        { item.method }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.payments_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Departments Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>DepartmentName</th>
+                                
+                                
+                                
+                                <th>DepartmentCode</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.departments_company && Array.isArray(companies.departments_company) &&
+                              companies.departments_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/departments/departments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="department_name">
+                                        { item.department_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="department_code">
+                                        { item.department_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.departments_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Documents Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentNumber</th>
+                                
+                                
+                                
+                                <th>Title</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Priority</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentDate</th>
+                                
+                                
+                                
+                                <th>ReviewDueDate</th>
+                                
+                                
+                                
+                                <th>Summary</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Tags</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.documents_company && Array.isArray(companies.documents_company) &&
+                              companies.documents_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_number">
+                                        { item.document_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="title">
+                                        { item.title }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="priority">
+                                        { item.priority }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_date">
+                                        { dataFormatter.dateTimeFormatter(item.document_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="review_due_date">
+                                        { dataFormatter.dateTimeFormatter(item.review_due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="summary">
+                                        { item.summary }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="tags">
+                                        { item.tags }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.documents_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approval_workflows Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>WorkflowName</th>
+                                
+                                
+                                
+                                <th>AppliesTo</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.approval_workflows_company && Array.isArray(companies.approval_workflows_company) &&
+                              companies.approval_workflows_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approval_workflows/approval_workflows-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="workflow_name">
+                                        { item.workflow_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="applies_to">
+                                        { item.applies_to }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.approval_workflows_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Ui_announcements Company</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>Headline</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Audience</th>
+                                
+                                
+                                
+                                <th>PublishFrom</th>
+                                
+                                
+                                
+                                <th>PublishTo</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {companies.ui_announcements_company && Array.isArray(companies.ui_announcements_company) &&
+                              companies.ui_announcements_company.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/ui_announcements/ui_announcements-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="headline">
+                                        { item.headline }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="audience">
+                                        { item.audience }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="publish_from">
+                                        { dataFormatter.dateTimeFormatter(item.publish_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="publish_to">
+                                        { dataFormatter.dateTimeFormatter(item.publish_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!companies?.ui_announcements_company?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/companies/companies-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+CompaniesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_COMPANIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default CompaniesView;
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
new file mode 100644
index 0000000..d71526a
--- /dev/null
+++ b/frontend/src/pages/dashboard.tsx
@@ -0,0 +1,992 @@
+import * as icon from '@mdi/js';
+import Head from 'next/head'
+import React from 'react'
+import axios from 'axios';
+import type { ReactElement } from 'react'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import BaseIcon from "../components/BaseIcon";
+import { getPageTitle } from '../config'
+import Link from "next/link";
+
+import { hasPermission } from "../helpers/userPermissions";
+import { fetchWidgets } from '../stores/roles/rolesSlice';
+import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
+import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+const Dashboard = () => {
+    const dispatch = useAppDispatch();
+    const iconsColor = useAppSelector((state) => state.style.iconsColor);
+    const corners = useAppSelector((state) => state.style.corners);
+    const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+
+    const loadingMessage = 'Loading...';
+
+    
+    const [users, setUsers] = React.useState(loadingMessage);
+    const [roles, setRoles] = React.useState(loadingMessage);
+    const [permissions, setPermissions] = React.useState(loadingMessage);
+    const [organizations, setOrganizations] = React.useState(loadingMessage);
+    const [companies, setCompanies] = React.useState(loadingMessage);
+    const [user_role_assignments, setUser_role_assignments] = React.useState(loadingMessage);
+    const [role_permission_mappings, setRole_permission_mappings] = React.useState(loadingMessage);
+    const [vendors, setVendors] = React.useState(loadingMessage);
+    const [warehouses, setWarehouses] = React.useState(loadingMessage);
+    const [product_categories, setProduct_categories] = React.useState(loadingMessage);
+    const [products, setProducts] = React.useState(loadingMessage);
+    const [purchase_requisitions, setPurchase_requisitions] = React.useState(loadingMessage);
+    const [purchase_requisition_lines, setPurchase_requisition_lines] = React.useState(loadingMessage);
+    const [purchase_orders, setPurchase_orders] = React.useState(loadingMessage);
+    const [purchase_order_lines, setPurchase_order_lines] = React.useState(loadingMessage);
+    const [goods_receipts, setGoods_receipts] = React.useState(loadingMessage);
+    const [goods_receipt_lines, setGoods_receipt_lines] = React.useState(loadingMessage);
+    const [vendor_invoices, setVendor_invoices] = React.useState(loadingMessage);
+    const [invoice_lines, setInvoice_lines] = React.useState(loadingMessage);
+    const [payments, setPayments] = React.useState(loadingMessage);
+    const [departments, setDepartments] = React.useState(loadingMessage);
+    const [document_types, setDocument_types] = React.useState(loadingMessage);
+    const [documents, setDocuments] = React.useState(loadingMessage);
+    const [document_links, setDocument_links] = React.useState(loadingMessage);
+    const [approval_workflows, setApproval_workflows] = React.useState(loadingMessage);
+    const [approval_steps, setApproval_steps] = React.useState(loadingMessage);
+    const [approvals, setApprovals] = React.useState(loadingMessage);
+    const [activity_logs, setActivity_logs] = React.useState(loadingMessage);
+    const [ui_announcements, setUi_announcements] = React.useState(loadingMessage);
+
+    
+    const [widgetsRole, setWidgetsRole] = React.useState({
+        role: { value: '', label: '' },
+    });
+    const { currentUser } = useAppSelector((state) => state.auth);
+    const { isFetchingQuery } = useAppSelector((state) => state.openAi);
+    
+    const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
+    
+    
+    const organizationId = currentUser?.organizations?.id;
+    
+    async function loadData() {
+        const entities = ['users','roles','permissions','organizations','companies','user_role_assignments','role_permission_mappings','vendors','warehouses','product_categories','products','purchase_requisitions','purchase_requisition_lines','purchase_orders','purchase_order_lines','goods_receipts','goods_receipt_lines','vendor_invoices','invoice_lines','payments','departments','document_types','documents','document_links','approval_workflows','approval_steps','approvals','activity_logs','ui_announcements',];
+        const fns = [setUsers,setRoles,setPermissions,setOrganizations,setCompanies,setUser_role_assignments,setRole_permission_mappings,setVendors,setWarehouses,setProduct_categories,setProducts,setPurchase_requisitions,setPurchase_requisition_lines,setPurchase_orders,setPurchase_order_lines,setGoods_receipts,setGoods_receipt_lines,setVendor_invoices,setInvoice_lines,setPayments,setDepartments,setDocument_types,setDocuments,setDocument_links,setApproval_workflows,setApproval_steps,setApprovals,setActivity_logs,setUi_announcements,];
+
+        const requests = entities.map((entity, index) => {
+          
+          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
+            return axios.get(`/${entity.toLowerCase()}/count`);
+          } else {
+            fns[index](null);
+            return Promise.resolve({data: {count: null}});
+          }
+          
+        });
+
+        Promise.allSettled(requests).then((results) => {
+            results.forEach((result, i) => {
+                if (result.status === 'fulfilled') {
+                    fns[i](result.value.data.count);
+                } else {
+                    fns[i](result.reason.message);
+                }
+            });
+        });
+    }
+  
+    async function getWidgets(roleId) {
+        await dispatch(fetchWidgets(roleId));
+    }
+    React.useEffect(() => {
+        if (!currentUser) return;
+        loadData().then();
+        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
+    }, [currentUser]);
+
+    React.useEffect(() => {
+        if (!currentUser || !widgetsRole?.role?.value) return;
+        getWidgets(widgetsRole?.role?.value || '').then();
+    }, [widgetsRole?.role?.value]);
+  
+  return (
+    <>
+      <Head>
+        <title>
+            {getPageTitle('Overview')}
+        </title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+            icon={icon.mdiChartTimelineVariant}
+            title='Overview'
+            main>
+          {''}
+        </SectionTitleLineWithButton>
+        
+        {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
+            currentUser={currentUser}
+            isFetchingQuery={isFetchingQuery}
+            setWidgetsRole={setWidgetsRole}
+            widgetsRole={widgetsRole}
+        />}
+        {!!rolesWidgets.length &&
+            hasPermission(currentUser, 'CREATE_ROLES') && (
+                <p className='  text-gray-500 dark:text-gray-400 mb-4'>
+                    {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
+                </p>
+            )}
+
+        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
+            {(isFetchingQuery || loading) && (
+                <div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
+                    <BaseIcon
+                        className={`${iconsColor} animate-spin mr-5`}
+                        w='w-16'
+                        h='h-16'
+                        size={48}
+                        path={icon.mdiLoading}
+                    />{' '}
+                    Loading widgets...
+                </div>
+            )}
+
+            { rolesWidgets &&
+                rolesWidgets.map((widget) => (
+                    <SmartWidget
+                        key={widget.id}
+                        userId={currentUser?.id}
+                        widget={widget}
+                        roleId={widgetsRole?.role?.value || ''}
+                        admin={hasPermission(currentUser, 'CREATE_ROLES')}
+                    />
+            ))}
+        </div>
+
+        {!!rolesWidgets.length && <hr className='my-6  ' />}
+        
+        <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
+        
+          
+            {hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Users
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {users}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={icon.mdiAccountGroup || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Roles
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {roles}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Permissions
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {permissions}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={icon.mdiShieldAccountOutline || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_ORGANIZATIONS') && <Link href={'/organizations/organizations-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Organizations
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {organizations}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_COMPANIES') && <Link href={'/companies/companies-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Companies
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {companies}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_USER_ROLE_ASSIGNMENTS') && <Link href={'/user_role_assignments/user_role_assignments-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              User role assignments
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {user_role_assignments}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiAccountKey' in icon ? icon['mdiAccountKey' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_ROLE_PERMISSION_MAPPINGS') && <Link href={'/role_permission_mappings/role_permission_mappings-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Role permission mappings
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {role_permission_mappings}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiShieldKey' in icon ? icon['mdiShieldKey' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_VENDORS') && <Link href={'/vendors/vendors-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Vendors
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {vendors}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiTruck' in icon ? icon['mdiTruck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_WAREHOUSES') && <Link href={'/warehouses/warehouses-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Warehouses
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {warehouses}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiWarehouse' in icon ? icon['mdiWarehouse' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PRODUCT_CATEGORIES') && <Link href={'/product_categories/product_categories-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Product categories
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {product_categories}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PRODUCTS') && <Link href={'/products/products-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Products
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {products}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiPackageVariant' in icon ? icon['mdiPackageVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PURCHASE_REQUISITIONS') && <Link href={'/purchase_requisitions/purchase_requisitions-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Purchase requisitions
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {purchase_requisitions}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiFileDocumentEdit' in icon ? icon['mdiFileDocumentEdit' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PURCHASE_REQUISITION_LINES') && <Link href={'/purchase_requisition_lines/purchase_requisition_lines-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Purchase requisition lines
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {purchase_requisition_lines}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiFormatListBulleted' in icon ? icon['mdiFormatListBulleted' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PURCHASE_ORDERS') && <Link href={'/purchase_orders/purchase_orders-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Purchase orders
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {purchase_orders}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PURCHASE_ORDER_LINES') && <Link href={'/purchase_order_lines/purchase_order_lines-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Purchase order lines
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {purchase_order_lines}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiPlaylistEdit' in icon ? icon['mdiPlaylistEdit' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_GOODS_RECEIPTS') && <Link href={'/goods_receipts/goods_receipts-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Goods receipts
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {goods_receipts}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiTruckCheck' in icon ? icon['mdiTruckCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_GOODS_RECEIPT_LINES') && <Link href={'/goods_receipt_lines/goods_receipt_lines-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Goods receipt lines
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {goods_receipt_lines}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiClipboardCheck' in icon ? icon['mdiClipboardCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_VENDOR_INVOICES') && <Link href={'/vendor_invoices/vendor_invoices-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Vendor invoices
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {vendor_invoices}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiFileDocument' in icon ? icon['mdiFileDocument' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_INVOICE_LINES') && <Link href={'/invoice_lines/invoice_lines-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Invoice lines
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {invoice_lines}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiReceiptText' in icon ? icon['mdiReceiptText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_PAYMENTS') && <Link href={'/payments/payments-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Payments
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {payments}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiCashCheck' in icon ? icon['mdiCashCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_DEPARTMENTS') && <Link href={'/departments/departments-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Departments
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {departments}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiOfficeBuilding' in icon ? icon['mdiOfficeBuilding' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_DOCUMENT_TYPES') && <Link href={'/document_types/document_types-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Document types
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {document_types}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiShape' in icon ? icon['mdiShape' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_DOCUMENTS') && <Link href={'/documents/documents-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Documents
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {documents}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiFolderFile' in icon ? icon['mdiFolderFile' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_DOCUMENT_LINKS') && <Link href={'/document_links/document_links-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Document links
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {document_links}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiLinkVariant' in icon ? icon['mdiLinkVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_APPROVAL_WORKFLOWS') && <Link href={'/approval_workflows/approval_workflows-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Approval workflows
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {approval_workflows}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiSitemap' in icon ? icon['mdiSitemap' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_APPROVAL_STEPS') && <Link href={'/approval_steps/approval_steps-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Approval steps
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {approval_steps}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiStairs' in icon ? icon['mdiStairs' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_APPROVALS') && <Link href={'/approvals/approvals-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Approvals
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {approvals}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiCheckDecagram' in icon ? icon['mdiCheckDecagram' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_ACTIVITY_LOGS') && <Link href={'/activity_logs/activity_logs-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Activity logs
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {activity_logs}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiHistory' in icon ? icon['mdiHistory' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+            {hasPermission(currentUser, 'READ_UI_ANNOUNCEMENTS') && <Link href={'/ui_announcements/ui_announcements-list'}>
+                <div
+                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                >
+                    <div className="flex justify-between align-center">
+                        <div>
+                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
+                              Ui announcements
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {ui_announcements}
+                            </div>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w="w-16"
+                                h="h-16"
+                                size={48}
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                path={'mdiBullhorn' in icon ? icon['mdiBullhorn' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Link>}
+          
+          
+        </div>
+      </SectionMain>
+    </>
+  )
+}
+
+Dashboard.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default Dashboard
diff --git a/frontend/src/pages/departments/[departmentsId].tsx b/frontend/src/pages/departments/[departmentsId].tsx
new file mode 100644
index 0000000..aa70aaa
--- /dev/null
+++ b/frontend/src/pages/departments/[departmentsId].tsx
@@ -0,0 +1,710 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/departments/departmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDepartments = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'department_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'department_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    manager: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { departments } = useAppSelector((state) => state.departments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { departmentsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: departmentsId }))
+  }, [departmentsId])
+
+  useEffect(() => {
+    if (typeof departments === 'object') {
+      setInitialValues(departments)
+    }
+  }, [departments])
+
+  useEffect(() => {
+      if (typeof departments === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (departments)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [departments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: departmentsId, data }))
+    await router.push('/departments/departments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit departments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit departments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DepartmentName"
+    >
+        <Field
+            name="department_name"
+            placeholder="DepartmentName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DepartmentCode"
+    >
+        <Field
+            name="department_code"
+            placeholder="DepartmentCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Manager' labelFor='manager'>
+        <Field
+            name='manager'
+            id='manager'
+            component={SelectField}
+            options={initialValues.manager}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/departments/departments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDepartments.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDepartments
diff --git a/frontend/src/pages/departments/departments-edit.tsx b/frontend/src/pages/departments/departments-edit.tsx
new file mode 100644
index 0000000..0bdb82a
--- /dev/null
+++ b/frontend/src/pages/departments/departments-edit.tsx
@@ -0,0 +1,707 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/departments/departmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDepartmentsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'department_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'department_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    manager: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { departments } = useAppSelector((state) => state.departments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof departments === 'object') {
+      setInitialValues(departments)
+    }
+  }, [departments])
+
+  useEffect(() => {
+      if (typeof departments === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (departments)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [departments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/departments/departments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit departments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit departments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DepartmentName"
+    >
+        <Field
+            name="department_name"
+            placeholder="DepartmentName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DepartmentCode"
+    >
+        <Field
+            name="department_code"
+            placeholder="DepartmentCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Manager' labelFor='manager'>
+        <Field
+            name='manager'
+            id='manager'
+            component={SelectField}
+            options={initialValues.manager}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/departments/departments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDepartmentsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDepartmentsPage
diff --git a/frontend/src/pages/departments/departments-list.tsx b/frontend/src/pages/departments/departments-list.tsx
new file mode 100644
index 0000000..927aea4
--- /dev/null
+++ b/frontend/src/pages/departments/departments-list.tsx
@@ -0,0 +1,174 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDepartments from '../../components/Departments/TableDepartments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/departments/departmentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const DepartmentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'DepartmentName', title: 'department_name'},{label: 'DepartmentCode', title: 'department_code'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Manager', title: 'manager'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DEPARTMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDepartmentsCSV = async () => {
+        const response = await axios({url: '/departments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'departmentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Departments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Departments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/departments/departments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDepartmentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/departments/departments-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableDepartments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+DepartmentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DepartmentsTablesPage
diff --git a/frontend/src/pages/departments/departments-new.tsx b/frontend/src/pages/departments/departments-new.tsx
new file mode 100644
index 0000000..9834826
--- /dev/null
+++ b/frontend/src/pages/departments/departments-new.tsx
@@ -0,0 +1,382 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/departments/departmentsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    department_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    department_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    manager: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const DepartmentsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/departments/departments-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DepartmentName"
+  >
+      <Field
+          name="department_name"
+          placeholder="DepartmentName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DepartmentCode"
+  >
+      <Field
+          name="department_code"
+          placeholder="DepartmentCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Manager" labelFor="manager">
+      <Field name="manager" id="manager" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/departments/departments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+DepartmentsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DepartmentsNew
diff --git a/frontend/src/pages/departments/departments-table.tsx b/frontend/src/pages/departments/departments-table.tsx
new file mode 100644
index 0000000..9e48bf1
--- /dev/null
+++ b/frontend/src/pages/departments/departments-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDepartments from '../../components/Departments/TableDepartments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/departments/departmentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const DepartmentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'DepartmentName', title: 'department_name'},{label: 'DepartmentCode', title: 'department_code'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Manager', title: 'manager'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DEPARTMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDepartmentsCSV = async () => {
+        const response = await axios({url: '/departments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'departmentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Departments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Departments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/departments/departments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDepartmentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/departments/departments-list'}>
+                Back to <span className='capitalize'>list</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableDepartments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+DepartmentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DepartmentsTablesPage
diff --git a/frontend/src/pages/departments/departments-view.tsx b/frontend/src/pages/departments/departments-view.tsx
new file mode 100644
index 0000000..ec660f4
--- /dev/null
+++ b/frontend/src/pages/departments/departments-view.tsx
@@ -0,0 +1,602 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/departments/departmentsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const DepartmentsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { departments } = useAppSelector((state) => state.departments)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View departments')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View departments')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/departments/departments-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{departments?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>DepartmentName</p>
+                    <p>{departments?.department_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>DepartmentCode</p>
+                    <p>{departments?.department_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Manager</p>
+                    
+                    
+                        <p>{departments?.manager?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: departments?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{departments?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisitions Department</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>RequisitionNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>RequestedDate</th>
+                                
+                                
+                                
+                                <th>NeededBy</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Reason</th>
+                                
+                                
+                                
+                                <th>EstimatedTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {departments.purchase_requisitions_department && Array.isArray(departments.purchase_requisitions_department) &&
+                              departments.purchase_requisitions_department.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requisition_number">
+                                        { item.requisition_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requested_date">
+                                        { dataFormatter.dateTimeFormatter(item.requested_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="needed_by">
+                                        { dataFormatter.dateTimeFormatter(item.needed_by) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="reason">
+                                        { item.reason }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="estimated_total">
+                                        { item.estimated_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!departments?.purchase_requisitions_department?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/departments/departments-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+DepartmentsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DEPARTMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default DepartmentsView;
\ No newline at end of file
diff --git a/frontend/src/pages/document_links/[document_linksId].tsx b/frontend/src/pages/document_links/[document_linksId].tsx
new file mode 100644
index 0000000..f42c946
--- /dev/null
+++ b/frontend/src/pages/document_links/[document_linksId].tsx
@@ -0,0 +1,583 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/document_links/document_linksSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocument_links = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    source_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'source_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { document_links } = useAppSelector((state) => state.document_links)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { document_linksId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: document_linksId }))
+  }, [document_linksId])
+
+  useEffect(() => {
+    if (typeof document_links === 'object') {
+      setInitialValues(document_links)
+    }
+  }, [document_links])
+
+  useEffect(() => {
+      if (typeof document_links === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (document_links)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [document_links])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: document_linksId, data }))
+    await router.push('/document_links/document_links-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit document_links')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit document_links'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Document' labelFor='document'>
+        <Field
+            name='document'
+            id='document'
+            component={SelectField}
+            options={initialValues.document}
+            itemRef={'documents'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'document_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="SourceType" labelFor="source_type">
+        <Field name="source_type" id="source_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="goods_receipt">goods_receipt</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="payment">payment</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="SourceReference"
+    >
+        <Field
+            name="source_reference"
+            placeholder="SourceReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_links/document_links-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocument_links.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocument_links
diff --git a/frontend/src/pages/document_links/document_links-edit.tsx b/frontend/src/pages/document_links/document_links-edit.tsx
new file mode 100644
index 0000000..c32dead
--- /dev/null
+++ b/frontend/src/pages/document_links/document_links-edit.tsx
@@ -0,0 +1,580 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/document_links/document_linksSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocument_linksPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    source_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'source_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { document_links } = useAppSelector((state) => state.document_links)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof document_links === 'object') {
+      setInitialValues(document_links)
+    }
+  }, [document_links])
+
+  useEffect(() => {
+      if (typeof document_links === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (document_links)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [document_links])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/document_links/document_links-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit document_links')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit document_links'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Document' labelFor='document'>
+        <Field
+            name='document'
+            id='document'
+            component={SelectField}
+            options={initialValues.document}
+            itemRef={'documents'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'document_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="SourceType" labelFor="source_type">
+        <Field name="source_type" id="source_type" component="select">
+          
+            <option value="purchase_requisition">purchase_requisition</option>
+          
+            <option value="purchase_order">purchase_order</option>
+          
+            <option value="goods_receipt">goods_receipt</option>
+          
+            <option value="vendor_invoice">vendor_invoice</option>
+          
+            <option value="payment">payment</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="SourceReference"
+    >
+        <Field
+            name="source_reference"
+            placeholder="SourceReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_links/document_links-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocument_linksPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocument_linksPage
diff --git a/frontend/src/pages/document_links/document_links-list.tsx b/frontend/src/pages/document_links/document_links-list.tsx
new file mode 100644
index 0000000..ef2a3a5
--- /dev/null
+++ b/frontend/src/pages/document_links/document_links-list.tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocument_links from '../../components/Document_links/TableDocument_links'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/document_links/document_linksSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Document_linksTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'SourceReference', title: 'source_reference'},{label: 'Notes', title: 'notes'},
+          
+          
+          
+    
+    
+    {label: 'Document', title: 'document'},
+    
+    
+          
+          {label: 'SourceType', title: 'source_type', type: 'enum', options: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENT_LINKS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocument_linksCSV = async () => {
+        const response = await axios({url: '/document_links?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'document_linksCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Document_links')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Document_links" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/document_links/document_links-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocument_linksCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableDocument_links
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Document_linksTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_linksTablesPage
diff --git a/frontend/src/pages/document_links/document_links-new.tsx b/frontend/src/pages/document_links/document_links-new.tsx
new file mode 100644
index 0000000..6533da7
--- /dev/null
+++ b/frontend/src/pages/document_links/document_links-new.tsx
@@ -0,0 +1,340 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/document_links/document_linksSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    document: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    source_type: 'purchase_requisition',
+    
+    
+    
+    
+    
+    
+    
+    source_reference: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Document_linksNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/document_links/document_links-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Document" labelFor="document">
+      <Field name="document" id="document" component={SelectField} options={[]} itemRef={'documents'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="SourceType" labelFor="source_type">
+      <Field name="source_type" id="source_type" component="select">
+      
+        <option value="purchase_requisition">purchase_requisition</option>
+      
+        <option value="purchase_order">purchase_order</option>
+      
+        <option value="goods_receipt">goods_receipt</option>
+      
+        <option value="vendor_invoice">vendor_invoice</option>
+      
+        <option value="payment">payment</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="SourceReference"
+  >
+      <Field
+          name="source_reference"
+          placeholder="SourceReference"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_links/document_links-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Document_linksNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_linksNew
diff --git a/frontend/src/pages/document_links/document_links-table.tsx b/frontend/src/pages/document_links/document_links-table.tsx
new file mode 100644
index 0000000..f03b812
--- /dev/null
+++ b/frontend/src/pages/document_links/document_links-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocument_links from '../../components/Document_links/TableDocument_links'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/document_links/document_linksSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Document_linksTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'SourceReference', title: 'source_reference'},{label: 'Notes', title: 'notes'},
+          
+          
+          
+    
+    
+    {label: 'Document', title: 'document'},
+    
+    
+              
+          {label: 'SourceType', title: 'source_type', type: 'enum', options: ['purchase_requisition','purchase_order','goods_receipt','vendor_invoice','payment']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENT_LINKS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocument_linksCSV = async () => {
+        const response = await axios({url: '/document_links?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'document_linksCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Document_links')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Document_links" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/document_links/document_links-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocument_linksCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/document_links/document_links-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableDocument_links
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Document_linksTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_linksTablesPage
diff --git a/frontend/src/pages/document_links/document_links-view.tsx b/frontend/src/pages/document_links/document_links-view.tsx
new file mode 100644
index 0000000..c3f0154
--- /dev/null
+++ b/frontend/src/pages/document_links/document_links-view.tsx
@@ -0,0 +1,401 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/document_links/document_linksSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Document_linksView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { document_links } = useAppSelector((state) => state.document_links)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View document_links')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View document_links')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/document_links/document_links-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Document</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{document_links?.document?.document_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>SourceType</p>
+                    <p>{document_links?.source_type ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>SourceReference</p>
+                    <p>{document_links?.source_reference}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={document_links?.notes} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{document_links?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/document_links/document_links-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Document_linksView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_LINKS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Document_linksView;
\ No newline at end of file
diff --git a/frontend/src/pages/document_types/[document_typesId].tsx b/frontend/src/pages/document_types/[document_typesId].tsx
new file mode 100644
index 0000000..52b0d59
--- /dev/null
+++ b/frontend/src/pages/document_types/[document_typesId].tsx
@@ -0,0 +1,580 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/document_types/document_typesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocument_types = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'type_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'type_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    module: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { document_types } = useAppSelector((state) => state.document_types)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { document_typesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: document_typesId }))
+  }, [document_typesId])
+
+  useEffect(() => {
+    if (typeof document_types === 'object') {
+      setInitialValues(document_types)
+    }
+  }, [document_types])
+
+  useEffect(() => {
+      if (typeof document_types === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (document_types)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [document_types])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: document_typesId, data }))
+    await router.push('/document_types/document_types-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit document_types')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit document_types'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="TypeName"
+    >
+        <Field
+            name="type_name"
+            placeholder="TypeName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="TypeCode"
+    >
+        <Field
+            name="type_code"
+            placeholder="TypeCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Module" labelFor="module">
+        <Field name="module" id="module" component="select">
+          
+            <option value="procurement">procurement</option>
+          
+            <option value="inventory">inventory</option>
+          
+            <option value="finance">finance</option>
+          
+            <option value="general">general</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_types/document_types-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocument_types.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocument_types
diff --git a/frontend/src/pages/document_types/document_types-edit.tsx b/frontend/src/pages/document_types/document_types-edit.tsx
new file mode 100644
index 0000000..685b9ab
--- /dev/null
+++ b/frontend/src/pages/document_types/document_types-edit.tsx
@@ -0,0 +1,577 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/document_types/document_typesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocument_typesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'type_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'type_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    module: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { document_types } = useAppSelector((state) => state.document_types)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof document_types === 'object') {
+      setInitialValues(document_types)
+    }
+  }, [document_types])
+
+  useEffect(() => {
+      if (typeof document_types === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (document_types)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [document_types])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/document_types/document_types-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit document_types')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit document_types'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="TypeName"
+    >
+        <Field
+            name="type_name"
+            placeholder="TypeName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="TypeCode"
+    >
+        <Field
+            name="type_code"
+            placeholder="TypeCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Module" labelFor="module">
+        <Field name="module" id="module" component="select">
+          
+            <option value="procurement">procurement</option>
+          
+            <option value="inventory">inventory</option>
+          
+            <option value="finance">finance</option>
+          
+            <option value="general">general</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_types/document_types-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocument_typesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocument_typesPage
diff --git a/frontend/src/pages/document_types/document_types-list.tsx b/frontend/src/pages/document_types/document_types-list.tsx
new file mode 100644
index 0000000..291b67d
--- /dev/null
+++ b/frontend/src/pages/document_types/document_types-list.tsx
@@ -0,0 +1,162 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocument_types from '../../components/Document_types/TableDocument_types'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/document_types/document_typesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Document_typesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'TypeName', title: 'type_name'},{label: 'TypeCode', title: 'type_code'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+          
+          {label: 'Module', title: 'module', type: 'enum', options: ['procurement','inventory','finance','general']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENT_TYPES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocument_typesCSV = async () => {
+        const response = await axios({url: '/document_types?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'document_typesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Document_types')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Document_types" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/document_types/document_types-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocument_typesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableDocument_types
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Document_typesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_typesTablesPage
diff --git a/frontend/src/pages/document_types/document_types-new.tsx b/frontend/src/pages/document_types/document_types-new.tsx
new file mode 100644
index 0000000..a6384c8
--- /dev/null
+++ b/frontend/src/pages/document_types/document_types-new.tsx
@@ -0,0 +1,393 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/document_types/document_typesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    type_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    type_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    module: 'procurement',
+    
+    
+    
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Document_typesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/document_types/document_types-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="TypeName"
+  >
+      <Field
+          name="type_name"
+          placeholder="TypeName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="TypeCode"
+  >
+      <Field
+          name="type_code"
+          placeholder="TypeCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Module" labelFor="module">
+      <Field name="module" id="module" component="select">
+      
+        <option value="procurement">procurement</option>
+      
+        <option value="inventory">inventory</option>
+      
+        <option value="finance">finance</option>
+      
+        <option value="general">general</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/document_types/document_types-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Document_typesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_typesNew
diff --git a/frontend/src/pages/document_types/document_types-table.tsx b/frontend/src/pages/document_types/document_types-table.tsx
new file mode 100644
index 0000000..7083816
--- /dev/null
+++ b/frontend/src/pages/document_types/document_types-table.tsx
@@ -0,0 +1,164 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocument_types from '../../components/Document_types/TableDocument_types'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/document_types/document_typesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Document_typesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'TypeName', title: 'type_name'},{label: 'TypeCode', title: 'type_code'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+              
+          {label: 'Module', title: 'module', type: 'enum', options: ['procurement','inventory','finance','general']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENT_TYPES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocument_typesCSV = async () => {
+        const response = await axios({url: '/document_types?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'document_typesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Document_types')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Document_types" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/document_types/document_types-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocument_typesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/document_types/document_types-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableDocument_types
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Document_typesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Document_typesTablesPage
diff --git a/frontend/src/pages/document_types/document_types-view.tsx b/frontend/src/pages/document_types/document_types-view.tsx
new file mode 100644
index 0000000..5a9ba9d
--- /dev/null
+++ b/frontend/src/pages/document_types/document_types-view.tsx
@@ -0,0 +1,497 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/document_types/document_typesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Document_typesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { document_types } = useAppSelector((state) => state.document_types)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View document_types')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View document_types')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/document_types/document_types-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>TypeName</p>
+                    <p>{document_types?.type_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>TypeCode</p>
+                    <p>{document_types?.type_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Module</p>
+                    <p>{document_types?.module ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={document_types?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: document_types?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{document_types?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Documents DocumentType</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentNumber</th>
+                                
+                                
+                                
+                                <th>Title</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Priority</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentDate</th>
+                                
+                                
+                                
+                                <th>ReviewDueDate</th>
+                                
+                                
+                                
+                                <th>Summary</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Tags</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {document_types.documents_document_type && Array.isArray(document_types.documents_document_type) &&
+                              document_types.documents_document_type.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_number">
+                                        { item.document_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="title">
+                                        { item.title }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="priority">
+                                        { item.priority }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_date">
+                                        { dataFormatter.dateTimeFormatter(item.document_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="review_due_date">
+                                        { dataFormatter.dateTimeFormatter(item.review_due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="summary">
+                                        { item.summary }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="tags">
+                                        { item.tags }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!document_types?.documents_document_type?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/document_types/document_types-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Document_typesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENT_TYPES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Document_typesView;
\ No newline at end of file
diff --git a/frontend/src/pages/documents/[documentsId].tsx b/frontend/src/pages/documents/[documentsId].tsx
new file mode 100644
index 0000000..e6a54cc
--- /dev/null
+++ b/frontend/src/pages/documents/[documentsId].tsx
@@ -0,0 +1,1257 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/documents/documentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocuments = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document_type: null,
+    
+
+    
+    
+    
+    'document_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'title': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    priority: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    owner: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    review_due_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    summary: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+    'tags': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { documents } = useAppSelector((state) => state.documents)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { documentsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: documentsId }))
+  }, [documentsId])
+
+  useEffect(() => {
+    if (typeof documents === 'object') {
+      setInitialValues(documents)
+    }
+  }, [documents])
+
+  useEffect(() => {
+      if (typeof documents === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (documents)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [documents])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: documentsId, data }))
+    await router.push('/documents/documents-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit documents'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='DocumentType' labelFor='document_type'>
+        <Field
+            name='document_type'
+            id='document_type'
+            component={SelectField}
+            options={initialValues.document_type}
+            itemRef={'document_types'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'type_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DocumentNumber"
+    >
+        <Field
+            name="document_number"
+            placeholder="DocumentNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Title"
+    >
+        <Field
+            name="title"
+            placeholder="Title"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="in_review">in_review</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="archived">archived</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Priority" labelFor="priority">
+        <Field name="priority" id="priority" component="select">
+          
+            <option value="low">low</option>
+          
+            <option value="normal">normal</option>
+          
+            <option value="high">high</option>
+          
+            <option value="urgent">urgent</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Owner' labelFor='owner'>
+        <Field
+            name='owner'
+            id='owner'
+            component={SelectField}
+            options={initialValues.owner}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DocumentDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.document_date ?
+                  new Date(
+                      dayjs(initialValues.document_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'document_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ReviewDueDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.review_due_date ?
+                  new Date(
+                      dayjs(initialValues.review_due_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'review_due_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Summary" hasTextareaHeight>
+        <Field name="summary" as="textarea" placeholder="Summary" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Files'
+            color='info'
+            icon={mdiUpload}
+            path={'documents/files'}
+            name='files'
+            id='files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+    <FormField
+        label="Tags"
+    >
+        <Field
+            name="tags"
+            placeholder="Tags"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/documents/documents-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocuments.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocuments
diff --git a/frontend/src/pages/documents/documents-edit.tsx b/frontend/src/pages/documents/documents-edit.tsx
new file mode 100644
index 0000000..013ad4b
--- /dev/null
+++ b/frontend/src/pages/documents/documents-edit.tsx
@@ -0,0 +1,1254 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/documents/documentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditDocumentsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document_type: null,
+    
+
+    
+    
+    
+    'document_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'title': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    priority: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    owner: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    document_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    review_due_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    summary: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+    'tags': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { documents } = useAppSelector((state) => state.documents)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof documents === 'object') {
+      setInitialValues(documents)
+    }
+  }, [documents])
+
+  useEffect(() => {
+      if (typeof documents === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (documents)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [documents])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/documents/documents-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit documents'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='DocumentType' labelFor='document_type'>
+        <Field
+            name='document_type'
+            id='document_type'
+            component={SelectField}
+            options={initialValues.document_type}
+            itemRef={'document_types'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'type_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="DocumentNumber"
+    >
+        <Field
+            name="document_number"
+            placeholder="DocumentNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Title"
+    >
+        <Field
+            name="title"
+            placeholder="Title"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="in_review">in_review</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="archived">archived</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Priority" labelFor="priority">
+        <Field name="priority" id="priority" component="select">
+          
+            <option value="low">low</option>
+          
+            <option value="normal">normal</option>
+          
+            <option value="high">high</option>
+          
+            <option value="urgent">urgent</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Owner' labelFor='owner'>
+        <Field
+            name='owner'
+            id='owner'
+            component={SelectField}
+            options={initialValues.owner}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DocumentDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.document_date ?
+                  new Date(
+                      dayjs(initialValues.document_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'document_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ReviewDueDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.review_due_date ?
+                  new Date(
+                      dayjs(initialValues.review_due_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'review_due_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Summary" hasTextareaHeight>
+        <Field name="summary" as="textarea" placeholder="Summary" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Files'
+            color='info'
+            icon={mdiUpload}
+            path={'documents/files'}
+            name='files'
+            id='files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+    <FormField
+        label="Tags"
+    >
+        <Field
+            name="tags"
+            placeholder="Tags"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/documents/documents-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditDocumentsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditDocumentsPage
diff --git a/frontend/src/pages/documents/documents-list.tsx b/frontend/src/pages/documents/documents-list.tsx
new file mode 100644
index 0000000..90a942a
--- /dev/null
+++ b/frontend/src/pages/documents/documents-list.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocuments from '../../components/Documents/TableDocuments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/documents/documentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const DocumentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'DocumentNumber', title: 'document_number'},{label: 'Title', title: 'title'},{label: 'Summary', title: 'summary'},{label: 'Tags', title: 'tags'},
+          
+          
+          {label: 'DocumentDate', title: 'document_date', date: 'true'},{label: 'ReviewDueDate', title: 'review_due_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'DocumentType', title: 'document_type'},
+    
+    
+    
+    {label: 'Owner', title: 'owner'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','in_review','approved','rejected','archived']},{label: 'Priority', title: 'priority', type: 'enum', options: ['low','normal','high','urgent']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocumentsCSV = async () => {
+        const response = await axios({url: '/documents?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'documentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Documents" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/documents/documents-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocumentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/documents/documents-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+          <TableDocuments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+DocumentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DocumentsTablesPage
diff --git a/frontend/src/pages/documents/documents-new.tsx b/frontend/src/pages/documents/documents-new.tsx
new file mode 100644
index 0000000..a661a1e
--- /dev/null
+++ b/frontend/src/pages/documents/documents-new.tsx
@@ -0,0 +1,753 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/documents/documentsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    document_type: '',
+    
+    
+    
+    
+    document_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    title: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'draft',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    priority: 'low',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    owner: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    document_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    review_due_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    summary: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    files: [],
+    
+    
+    
+    
+    
+    
+    tags: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const DocumentsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/documents/documents-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="DocumentType" labelFor="document_type">
+      <Field name="document_type" id="document_type" component={SelectField} options={[]} itemRef={'document_types'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DocumentNumber"
+  >
+      <Field
+          name="document_number"
+          placeholder="DocumentNumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Title"
+  >
+      <Field
+          name="title"
+          placeholder="Title"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="draft">draft</option>
+      
+        <option value="in_review">in_review</option>
+      
+        <option value="approved">approved</option>
+      
+        <option value="rejected">rejected</option>
+      
+        <option value="archived">archived</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Priority" labelFor="priority">
+      <Field name="priority" id="priority" component="select">
+      
+        <option value="low">low</option>
+      
+        <option value="normal">normal</option>
+      
+        <option value="high">high</option>
+      
+        <option value="urgent">urgent</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Owner" labelFor="owner">
+      <Field name="owner" id="owner" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DocumentDate"
+  >
+      <Field
+          type="datetime-local"
+          name="document_date"
+          placeholder="DocumentDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="ReviewDueDate"
+  >
+      <Field
+          type="datetime-local"
+          name="review_due_date"
+          placeholder="ReviewDueDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Summary" hasTextareaHeight>
+        <Field name="summary" as="textarea" placeholder="Summary" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Files'
+          color='info'
+          icon={mdiUpload}
+          path={'documents/files'}
+          name='files'
+          id='files'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+  <FormField
+      label="Tags"
+  >
+      <Field
+          name="tags"
+          placeholder="Tags"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/documents/documents-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+DocumentsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DocumentsNew
diff --git a/frontend/src/pages/documents/documents-table.tsx b/frontend/src/pages/documents/documents-table.tsx
new file mode 100644
index 0000000..b8e2d6f
--- /dev/null
+++ b/frontend/src/pages/documents/documents-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableDocuments from '../../components/Documents/TableDocuments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/documents/documentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const DocumentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'DocumentNumber', title: 'document_number'},{label: 'Title', title: 'title'},{label: 'Summary', title: 'summary'},{label: 'Tags', title: 'tags'},
+          
+          
+          {label: 'DocumentDate', title: 'document_date', date: 'true'},{label: 'ReviewDueDate', title: 'review_due_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'DocumentType', title: 'document_type'},
+    
+    
+    
+    {label: 'Owner', title: 'owner'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','in_review','approved','rejected','archived']},{label: 'Priority', title: 'priority', type: 'enum', options: ['low','normal','high','urgent']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_DOCUMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getDocumentsCSV = async () => {
+        const response = await axios({url: '/documents?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'documentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Documents" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/documents/documents-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getDocumentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/documents/documents-list'}>
+                Back to <span className='capitalize'>kanban</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableDocuments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+DocumentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default DocumentsTablesPage
diff --git a/frontend/src/pages/documents/documents-view.tsx b/frontend/src/pages/documents/documents-view.tsx
new file mode 100644
index 0000000..c9974a8
--- /dev/null
+++ b/frontend/src/pages/documents/documents-view.tsx
@@ -0,0 +1,867 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/documents/documentsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const DocumentsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { documents } = useAppSelector((state) => state.documents)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View documents')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View documents')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/documents/documents-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{documents?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>DocumentType</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{documents?.document_type?.type_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>DocumentNumber</p>
+                    <p>{documents?.document_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Title</p>
+                    <p>{documents?.title}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{documents?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Priority</p>
+                    <p>{documents?.priority ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Owner</p>
+                    
+                    
+                        <p>{documents?.owner?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='DocumentDate'>
+                    {documents.document_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={documents.document_date ?
+                        new Date(
+                          dayjs(documents.document_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No DocumentDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='ReviewDueDate'>
+                    {documents.review_due_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={documents.review_due_date ?
+                        new Date(
+                          dayjs(documents.review_due_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No ReviewDueDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={documents?.summary} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Files</p>
+                    {documents?.files?.length
+                      ? dataFormatter.filesFormatter(documents.files).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No Files</p>
+                    }
+                </div>
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Tags</p>
+                    <p>{documents?.tags}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{documents?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Document_links Document</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>SourceType</th>
+                                
+                                
+                                
+                                <th>SourceReference</th>
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {documents.document_links_document && Array.isArray(documents.document_links_document) &&
+                              documents.document_links_document.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/document_links/document_links-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="source_type">
+                                        { item.source_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="source_reference">
+                                        { item.source_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!documents?.document_links_document?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/documents/documents-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+DocumentsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_DOCUMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default DocumentsView;
\ No newline at end of file
diff --git a/frontend/src/pages/error.tsx b/frontend/src/pages/error.tsx
new file mode 100644
index 0000000..4a6116e
--- /dev/null
+++ b/frontend/src/pages/error.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import type { ReactElement } from 'react'
+import Head from 'next/head'
+import BaseButton from '../components/BaseButton'
+import CardBox from '../components/CardBox'
+import SectionFullScreen from '../components/SectionFullScreen'
+import LayoutGuest from '../layouts/Guest'
+import { getPageTitle } from '../config'
+
+export default function Error() {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Error')}</title>
+      </Head>
+
+      <SectionFullScreen bg="pinkRed">
+        <CardBox
+          className="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl"
+          footer={<BaseButton href="/dashboard" label="Done" color="danger" />}
+        >
+          <div className="space-y-3">
+            <h1 className="text-2xl">Unhandled exception</h1>
+
+            <p>An Error Occurred</p>
+          </div>
+        </CardBox>
+      </SectionFullScreen>
+    </>
+  )
+}
+
+Error.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>
+}
diff --git a/frontend/src/pages/forgot.tsx b/frontend/src/pages/forgot.tsx
new file mode 100644
index 0000000..39b0193
--- /dev/null
+++ b/frontend/src/pages/forgot.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import axios from "axios";
+
+export default function Forgot() {
+  const [loading, setLoading] = React.useState(false)
+  const router = useRouter();
+  const notify = (type, msg) => toast( msg, {type});
+
+  const handleSubmit = async (value) => {
+    setLoading(true)
+    try {
+      const { data: response } = await axios.post('/auth/send-password-reset-email', value);
+      setLoading(false)
+      notify('success', 'Please check your email for verification link');
+      setTimeout(async () => {
+        await router.push('/login')
+      }, 3000)
+    } catch (error) {
+      setLoading(false)
+      console.log('error: ', error)
+      notify('error', 'Something was wrong. Try again')
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Login')}</title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+        <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+          <Formik
+            initialValues={{
+              email: '',
+            }}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Email' help='Please enter your email'>
+                <Field name='email' />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton
+                  type='submit'
+                  label={loading ? 'Loading...' : 'Submit' }
+                  color='info'
+                />
+                <BaseButton
+                  href={'/login'}
+                  label={'Login'}
+                  color='info'
+                />
+              </BaseButtons>
+             </Form>
+          </Formik>
+        </CardBox>
+      </SectionFullScreen>
+      <ToastContainer />
+    </>
+  );
+}
+
+Forgot.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/forms.tsx b/frontend/src/pages/forms.tsx
new file mode 100644
index 0000000..093750e
--- /dev/null
+++ b/frontend/src/pages/forms.tsx
@@ -0,0 +1,142 @@
+import { mdiAccount, mdiBallotOutline, mdiGithub, mdiMail, mdiUpload } from '@mdi/js'
+import { Field, Form, Formik } from 'formik'
+import Head from 'next/head'
+import { ReactElement } from 'react'
+import BaseButton from '../components/BaseButton'
+import BaseButtons from '../components/BaseButtons'
+import BaseDivider from '../components/BaseDivider'
+import CardBox from '../components/CardBox'
+import FormCheckRadio from '../components/FormCheckRadio'
+import FormCheckRadioGroup from '../components/FormCheckRadioGroup'
+import FormField from '../components/FormField'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitle from '../components/SectionTitle'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../config'
+
+const FormsPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Forms')}</title>
+      </Head>
+
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiBallotOutline} title="Formik forms example" main>
+        {''}
+        </SectionTitleLineWithButton>
+
+        <CardBox>
+          <Formik
+            initialValues={{
+              fullname: 'John Doe',
+              email: 'john.doe@example.com',
+              phone: '',
+              color: 'green',
+              textarea: 'Hello',
+            }}
+            onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
+          >
+            <Form>
+              <FormField label="Grouped with icons" icons={[mdiAccount, mdiMail]}>
+                <Field name="fullname" placeholder="Full name" />
+                <Field type="email" name="email" placeholder="Email" />
+              </FormField>
+
+              <FormField
+                label="With help line and labelFor"
+                labelFor="phone"
+                help="Help line comes here"
+              >
+                <Field name="phone" placeholder="Phone" id="phone" />
+              </FormField>
+
+              <FormField label="Dropdown" labelFor="color">
+                <Field name="color" id="color" component="select">
+                  <option value="red">Red</option>
+                  <option value="green">Green</option>
+                  <option value="blue">Blue</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label="Textarea" hasTextareaHeight>
+                <Field name="textarea" as="textarea" placeholder="Your text here" />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+
+      <SectionTitle>Custom elements</SectionTitle>
+
+      <SectionMain>
+        <CardBox>
+          <Formik
+            initialValues={{ checkboxes: ['lorem'], switches: ['lorem'], radio: 'lorem' }}
+            onSubmit={() => null}
+          >
+            <Form>
+              <FormField label="Checkbox">
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type="checkbox" label="Lorem">
+                    <Field type="checkbox" name="checkboxes" value="lorem" />
+                  </FormCheckRadio>
+                  <FormCheckRadio type="checkbox" label="Ipsum">
+                    <Field type="checkbox" name="checkboxes" value="ipsum" />
+                  </FormCheckRadio>
+                  <FormCheckRadio type="checkbox" label="Dolore">
+                    <Field type="checkbox" name="checkboxes" value="dolore" />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label="Radio">
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type="radio" label="Lorem">
+                    <Field type="radio" name="radio" value="lorem" />
+                  </FormCheckRadio>
+                  <FormCheckRadio type="radio" label="Ipsum">
+                    <Field type="radio" name="radio" value="ipsum" />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label="Switch">
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type="switch" label="Lorem">
+                    <Field type="checkbox" name="switches" value="lorem" />
+                  </FormCheckRadio>
+                  <FormCheckRadio type="switch" label="Ipsum">
+                    <Field type="checkbox" name="switches" value="ipsum" />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+            </Form>
+          </Formik>
+          <BaseDivider />
+
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+FormsPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default FormsPage
diff --git a/frontend/src/pages/goods_receipt_lines/[goods_receipt_linesId].tsx b/frontend/src/pages/goods_receipt_lines/[goods_receipt_linesId].tsx
new file mode 100644
index 0000000..bcc27b8
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/[goods_receipt_linesId].tsx
@@ -0,0 +1,904 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/goods_receipt_lines/goods_receipt_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditGoods_receipt_lines = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    goods_receipt: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order_line: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+    'quantity_received': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity_accepted': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity_rejected': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    quality_notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { goods_receipt_lines } = useAppSelector((state) => state.goods_receipt_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { goods_receipt_linesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: goods_receipt_linesId }))
+  }, [goods_receipt_linesId])
+
+  useEffect(() => {
+    if (typeof goods_receipt_lines === 'object') {
+      setInitialValues(goods_receipt_lines)
+    }
+  }, [goods_receipt_lines])
+
+  useEffect(() => {
+      if (typeof goods_receipt_lines === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (goods_receipt_lines)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [goods_receipt_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: goods_receipt_linesId, data }))
+    await router.push('/goods_receipt_lines/goods_receipt_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit goods_receipt_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit goods_receipt_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='GoodsReceipt' labelFor='goods_receipt'>
+        <Field
+            name='goods_receipt'
+            id='goods_receipt'
+            component={SelectField}
+            options={initialValues.goods_receipt}
+            itemRef={'goods_receipts'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'grn_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='POLine' labelFor='purchase_order_line'>
+        <Field
+            name='purchase_order_line'
+            id='purchase_order_line'
+            component={SelectField}
+            options={initialValues.purchase_order_line}
+            itemRef={'purchase_order_lines'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'description'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityReceived"
+    >
+        <Field
+            type="number"
+            name="quantity_received"
+            placeholder="QuantityReceived"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityAccepted"
+    >
+        <Field
+            type="number"
+            name="quantity_accepted"
+            placeholder="QuantityAccepted"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityRejected"
+    >
+        <Field
+            type="number"
+            name="quantity_rejected"
+            placeholder="QuantityRejected"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="QualityNotes" hasTextareaHeight>
+        <Field name="quality_notes" as="textarea" placeholder="QualityNotes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipt_lines/goods_receipt_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditGoods_receipt_lines.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditGoods_receipt_lines
diff --git a/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-edit.tsx b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-edit.tsx
new file mode 100644
index 0000000..d29b7e3
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-edit.tsx
@@ -0,0 +1,901 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/goods_receipt_lines/goods_receipt_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditGoods_receipt_linesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    goods_receipt: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order_line: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+    'quantity_received': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity_accepted': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity_rejected': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    quality_notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { goods_receipt_lines } = useAppSelector((state) => state.goods_receipt_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof goods_receipt_lines === 'object') {
+      setInitialValues(goods_receipt_lines)
+    }
+  }, [goods_receipt_lines])
+
+  useEffect(() => {
+      if (typeof goods_receipt_lines === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (goods_receipt_lines)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [goods_receipt_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/goods_receipt_lines/goods_receipt_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit goods_receipt_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit goods_receipt_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='GoodsReceipt' labelFor='goods_receipt'>
+        <Field
+            name='goods_receipt'
+            id='goods_receipt'
+            component={SelectField}
+            options={initialValues.goods_receipt}
+            itemRef={'goods_receipts'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'grn_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='POLine' labelFor='purchase_order_line'>
+        <Field
+            name='purchase_order_line'
+            id='purchase_order_line'
+            component={SelectField}
+            options={initialValues.purchase_order_line}
+            itemRef={'purchase_order_lines'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'description'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityReceived"
+    >
+        <Field
+            type="number"
+            name="quantity_received"
+            placeholder="QuantityReceived"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityAccepted"
+    >
+        <Field
+            type="number"
+            name="quantity_accepted"
+            placeholder="QuantityAccepted"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="QuantityRejected"
+    >
+        <Field
+            type="number"
+            name="quantity_rejected"
+            placeholder="QuantityRejected"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="QualityNotes" hasTextareaHeight>
+        <Field name="quality_notes" as="textarea" placeholder="QualityNotes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipt_lines/goods_receipt_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditGoods_receipt_linesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditGoods_receipt_linesPage
diff --git a/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-list.tsx b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-list.tsx
new file mode 100644
index 0000000..04f7171
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-list.tsx
@@ -0,0 +1,174 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableGoods_receipt_lines from '../../components/Goods_receipt_lines/TableGoods_receipt_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/goods_receipt_lines/goods_receipt_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Goods_receipt_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'QualityNotes', title: 'quality_notes'},
+          
+          {label: 'QuantityReceived', title: 'quantity_received', number: 'true'},{label: 'QuantityAccepted', title: 'quantity_accepted', number: 'true'},{label: 'QuantityRejected', title: 'quantity_rejected', number: 'true'},
+          
+    
+    
+    {label: 'GoodsReceipt', title: 'goods_receipt'},
+    
+    
+    
+    {label: 'POLine', title: 'purchase_order_line'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_GOODS_RECEIPT_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getGoods_receipt_linesCSV = async () => {
+        const response = await axios({url: '/goods_receipt_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'goods_receipt_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Goods_receipt_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Goods_receipt_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/goods_receipt_lines/goods_receipt_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getGoods_receipt_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableGoods_receipt_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Goods_receipt_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receipt_linesTablesPage
diff --git a/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-new.tsx b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-new.tsx
new file mode 100644
index 0000000..45f6920
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-new.tsx
@@ -0,0 +1,478 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/goods_receipt_lines/goods_receipt_linesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    goods_receipt: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_order_line: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    product: '',
+    
+    
+    
+    
+    quantity_received: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quantity_accepted: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quantity_rejected: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quality_notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Goods_receipt_linesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/goods_receipt_lines/goods_receipt_lines-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="GoodsReceipt" labelFor="goods_receipt">
+      <Field name="goods_receipt" id="goods_receipt" component={SelectField} options={[]} itemRef={'goods_receipts'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="POLine" labelFor="purchase_order_line">
+      <Field name="purchase_order_line" id="purchase_order_line" component={SelectField} options={[]} itemRef={'purchase_order_lines'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Product" labelFor="product">
+      <Field name="product" id="product" component={SelectField} options={[]} itemRef={'products'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="QuantityReceived"
+    >
+        <Field
+            type="number"
+            name="quantity_received"
+            placeholder="QuantityReceived"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="QuantityAccepted"
+    >
+        <Field
+            type="number"
+            name="quantity_accepted"
+            placeholder="QuantityAccepted"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="QuantityRejected"
+    >
+        <Field
+            type="number"
+            name="quantity_rejected"
+            placeholder="QuantityRejected"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="QualityNotes" hasTextareaHeight>
+        <Field name="quality_notes" as="textarea" placeholder="QualityNotes" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipt_lines/goods_receipt_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Goods_receipt_linesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receipt_linesNew
diff --git a/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-table.tsx b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-table.tsx
new file mode 100644
index 0000000..8593da9
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableGoods_receipt_lines from '../../components/Goods_receipt_lines/TableGoods_receipt_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/goods_receipt_lines/goods_receipt_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Goods_receipt_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'QualityNotes', title: 'quality_notes'},
+          
+          {label: 'QuantityReceived', title: 'quantity_received', number: 'true'},{label: 'QuantityAccepted', title: 'quantity_accepted', number: 'true'},{label: 'QuantityRejected', title: 'quantity_rejected', number: 'true'},
+          
+    
+    
+    {label: 'GoodsReceipt', title: 'goods_receipt'},
+    
+    
+    
+    {label: 'POLine', title: 'purchase_order_line'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_GOODS_RECEIPT_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getGoods_receipt_linesCSV = async () => {
+        const response = await axios({url: '/goods_receipt_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'goods_receipt_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Goods_receipt_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Goods_receipt_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/goods_receipt_lines/goods_receipt_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getGoods_receipt_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/goods_receipt_lines/goods_receipt_lines-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableGoods_receipt_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Goods_receipt_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receipt_linesTablesPage
diff --git a/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-view.tsx b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-view.tsx
new file mode 100644
index 0000000..5b00c79
--- /dev/null
+++ b/frontend/src/pages/goods_receipt_lines/goods_receipt_lines-view.tsx
@@ -0,0 +1,621 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/goods_receipt_lines/goods_receipt_linesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Goods_receipt_linesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { goods_receipt_lines } = useAppSelector((state) => state.goods_receipt_lines)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View goods_receipt_lines')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View goods_receipt_lines')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/goods_receipt_lines/goods_receipt_lines-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>GoodsReceipt</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipt_lines?.goods_receipt?.grn_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>POLine</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipt_lines?.purchase_order_line?.description ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Product</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipt_lines?.product?.product_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>QuantityReceived</p>
+                  <p>{goods_receipt_lines?.quantity_received || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>QuantityAccepted</p>
+                  <p>{goods_receipt_lines?.quantity_accepted || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>QuantityRejected</p>
+                  <p>{goods_receipt_lines?.quantity_rejected || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={goods_receipt_lines?.quality_notes} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipt_lines?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/goods_receipt_lines/goods_receipt_lines-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Goods_receipt_linesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPT_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Goods_receipt_linesView;
\ No newline at end of file
diff --git a/frontend/src/pages/goods_receipts/[goods_receiptsId].tsx b/frontend/src/pages/goods_receipts/[goods_receiptsId].tsx
new file mode 100644
index 0000000..07dd06a
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/[goods_receiptsId].tsx
@@ -0,0 +1,1183 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/goods_receipts/goods_receiptsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditGoods_receipts = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'grn_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    received_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    receipt_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    posted_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    remarks: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { goods_receipts } = useAppSelector((state) => state.goods_receipts)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { goods_receiptsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: goods_receiptsId }))
+  }, [goods_receiptsId])
+
+  useEffect(() => {
+    if (typeof goods_receipts === 'object') {
+      setInitialValues(goods_receipts)
+    }
+  }, [goods_receipts])
+
+  useEffect(() => {
+      if (typeof goods_receipts === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (goods_receipts)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [goods_receipts])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: goods_receiptsId, data }))
+    await router.push('/goods_receipts/goods_receipts-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit goods_receipts')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit goods_receipts'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="GRNNumber"
+    >
+        <Field
+            name="grn_number"
+            placeholder="GRNNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ReceivedBy' labelFor='received_by'>
+        <Field
+            name='received_by'
+            id='received_by'
+            component={SelectField}
+            options={initialValues.received_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ReceiptDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.receipt_date ?
+                  new Date(
+                      dayjs(initialValues.receipt_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'receipt_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PostedDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.posted_date ?
+                  new Date(
+                      dayjs(initialValues.posted_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'posted_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="posted">posted</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Remarks" hasTextareaHeight>
+        <Field name="remarks" as="textarea" placeholder="Remarks" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'goods_receipts/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipts/goods_receipts-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditGoods_receipts.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditGoods_receipts
diff --git a/frontend/src/pages/goods_receipts/goods_receipts-edit.tsx b/frontend/src/pages/goods_receipts/goods_receipts-edit.tsx
new file mode 100644
index 0000000..28dd6b6
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/goods_receipts-edit.tsx
@@ -0,0 +1,1180 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/goods_receipts/goods_receiptsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditGoods_receiptsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'grn_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    received_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    receipt_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    posted_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    remarks: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { goods_receipts } = useAppSelector((state) => state.goods_receipts)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof goods_receipts === 'object') {
+      setInitialValues(goods_receipts)
+    }
+  }, [goods_receipts])
+
+  useEffect(() => {
+      if (typeof goods_receipts === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (goods_receipts)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [goods_receipts])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/goods_receipts/goods_receipts-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit goods_receipts')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit goods_receipts'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="GRNNumber"
+    >
+        <Field
+            name="grn_number"
+            placeholder="GRNNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='ReceivedBy' labelFor='received_by'>
+        <Field
+            name='received_by'
+            id='received_by'
+            component={SelectField}
+            options={initialValues.received_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ReceiptDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.receipt_date ?
+                  new Date(
+                      dayjs(initialValues.receipt_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'receipt_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PostedDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.posted_date ?
+                  new Date(
+                      dayjs(initialValues.posted_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'posted_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="posted">posted</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Remarks" hasTextareaHeight>
+        <Field name="remarks" as="textarea" placeholder="Remarks" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'goods_receipts/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipts/goods_receipts-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditGoods_receiptsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditGoods_receiptsPage
diff --git a/frontend/src/pages/goods_receipts/goods_receipts-list.tsx b/frontend/src/pages/goods_receipts/goods_receipts-list.tsx
new file mode 100644
index 0000000..1c4d954
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/goods_receipts-list.tsx
@@ -0,0 +1,182 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableGoods_receipts from '../../components/Goods_receipts/TableGoods_receipts'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/goods_receipts/goods_receiptsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Goods_receiptsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'GRNNumber', title: 'grn_number'},{label: 'Remarks', title: 'remarks'},
+          
+          
+          {label: 'ReceiptDate', title: 'receipt_date', date: 'true'},{label: 'PostedDate', title: 'posted_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'ReceivedBy', title: 'received_by'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','posted','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_GOODS_RECEIPTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getGoods_receiptsCSV = async () => {
+        const response = await axios({url: '/goods_receipts?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'goods_receiptsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Goods_receipts')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Goods_receipts" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/goods_receipts/goods_receipts-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getGoods_receiptsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/goods_receipts/goods_receipts-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableGoods_receipts
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Goods_receiptsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receiptsTablesPage
diff --git a/frontend/src/pages/goods_receipts/goods_receipts-new.tsx b/frontend/src/pages/goods_receipts/goods_receipts-new.tsx
new file mode 100644
index 0000000..7eec934
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/goods_receipts-new.tsx
@@ -0,0 +1,646 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/goods_receipts/goods_receiptsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    grn_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_order: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    received_by: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    warehouse: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    receipt_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    posted_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'draft',
+    
+    
+    
+    
+    
+    
+    
+    
+    remarks: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    attachments: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Goods_receiptsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+    // get from url params
+    const { dateRangeStart, dateRangeEnd } = router.query
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/goods_receipts/goods_receipts-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                
+                
+                dateRangeStart && dateRangeEnd ?
+                {
+                    ...initialValues,
+                    receipt_date: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
+                    posted_date: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
+                } : initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="GRNNumber"
+  >
+      <Field
+          name="grn_number"
+          placeholder="GRNNumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="PurchaseOrder" labelFor="purchase_order">
+      <Field name="purchase_order" id="purchase_order" component={SelectField} options={[]} itemRef={'purchase_orders'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ReceivedBy" labelFor="received_by">
+      <Field name="received_by" id="received_by" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Warehouse" labelFor="warehouse">
+      <Field name="warehouse" id="warehouse" component={SelectField} options={[]} itemRef={'warehouses'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="ReceiptDate"
+  >
+      <Field
+          type="datetime-local"
+          name="receipt_date"
+          placeholder="ReceiptDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PostedDate"
+  >
+      <Field
+          type="datetime-local"
+          name="posted_date"
+          placeholder="PostedDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="draft">draft</option>
+      
+        <option value="posted">posted</option>
+      
+        <option value="cancelled">cancelled</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Remarks" hasTextareaHeight>
+        <Field name="remarks" as="textarea" placeholder="Remarks" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Attachments'
+          color='info'
+          icon={mdiUpload}
+          path={'goods_receipts/attachments'}
+          name='attachments'
+          id='attachments'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/goods_receipts/goods_receipts-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Goods_receiptsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receiptsNew
diff --git a/frontend/src/pages/goods_receipts/goods_receipts-table.tsx b/frontend/src/pages/goods_receipts/goods_receipts-table.tsx
new file mode 100644
index 0000000..f52556e
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/goods_receipts-table.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableGoods_receipts from '../../components/Goods_receipts/TableGoods_receipts'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/goods_receipts/goods_receiptsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Goods_receiptsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'GRNNumber', title: 'grn_number'},{label: 'Remarks', title: 'remarks'},
+          
+          
+          {label: 'ReceiptDate', title: 'receipt_date', date: 'true'},{label: 'PostedDate', title: 'posted_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'ReceivedBy', title: 'received_by'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','posted','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_GOODS_RECEIPTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getGoods_receiptsCSV = async () => {
+        const response = await axios({url: '/goods_receipts?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'goods_receiptsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Goods_receipts')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Goods_receipts" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/goods_receipts/goods_receipts-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getGoods_receiptsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/goods_receipts/goods_receipts-list'}>
+                Back to <span className='capitalize'>calendar</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableGoods_receipts
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Goods_receiptsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Goods_receiptsTablesPage
diff --git a/frontend/src/pages/goods_receipts/goods_receipts-view.tsx b/frontend/src/pages/goods_receipts/goods_receipts-view.tsx
new file mode 100644
index 0000000..443aacf
--- /dev/null
+++ b/frontend/src/pages/goods_receipts/goods_receipts-view.tsx
@@ -0,0 +1,1014 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/goods_receipts/goods_receiptsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Goods_receiptsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { goods_receipts } = useAppSelector((state) => state.goods_receipts)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View goods_receipts')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View goods_receipts')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/goods_receipts/goods_receipts-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipts?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>GRNNumber</p>
+                    <p>{goods_receipts?.grn_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PurchaseOrder</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipts?.purchase_order?.po_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ReceivedBy</p>
+                    
+                    
+                        <p>{goods_receipts?.received_by?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Warehouse</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipts?.warehouse?.warehouse_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='ReceiptDate'>
+                    {goods_receipts.receipt_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={goods_receipts.receipt_date ?
+                        new Date(
+                          dayjs(goods_receipts.receipt_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No ReceiptDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='PostedDate'>
+                    {goods_receipts.posted_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={goods_receipts.posted_date ?
+                        new Date(
+                          dayjs(goods_receipts.posted_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No PostedDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{goods_receipts?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={goods_receipts?.remarks} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Attachments</p>
+                    {goods_receipts?.attachments?.length
+                      ? dataFormatter.filesFormatter(goods_receipts.attachments).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No Attachments</p>
+                    }
+                </div>
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{goods_receipts?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipt_lines GoodsReceipt</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>QuantityReceived</th>
+                                
+                                
+                                
+                                <th>QuantityAccepted</th>
+                                
+                                
+                                
+                                <th>QuantityRejected</th>
+                                
+                                
+                                
+                                <th>QualityNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {goods_receipts.goods_receipt_lines_goods_receipt && Array.isArray(goods_receipts.goods_receipt_lines_goods_receipt) &&
+                              goods_receipts.goods_receipt_lines_goods_receipt.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_received">
+                                        { item.quantity_received }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_accepted">
+                                        { item.quantity_accepted }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_rejected">
+                                        { item.quantity_rejected }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quality_notes">
+                                        { item.quality_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!goods_receipts?.goods_receipt_lines_goods_receipt?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendor_invoices GoodsReceipt</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>InvoiceNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>InvoiceDate</th>
+                                
+                                
+                                
+                                <th>DueDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {goods_receipts.vendor_invoices_goods_receipt && Array.isArray(goods_receipts.vendor_invoices_goods_receipt) &&
+                              goods_receipts.vendor_invoices_goods_receipt.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendor_invoices/vendor_invoices-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_number">
+                                        { item.invoice_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_date">
+                                        { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="due_date">
+                                        { dataFormatter.dateTimeFormatter(item.due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!goods_receipts?.vendor_invoices_goods_receipt?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/goods_receipts/goods_receipts-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Goods_receiptsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_GOODS_RECEIPTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Goods_receiptsView;
\ No newline at end of file
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
new file mode 100644
index 0000000..7b98139
--- /dev/null
+++ b/frontend/src/pages/index.tsx
@@ -0,0 +1,166 @@
+
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
+import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+
+
+export default function Starter() {
+    const [illustrationImage, setIllustrationImage] = useState({
+        src: undefined,
+        photographer: undefined,
+        photographer_url: undefined,
+    })
+    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
+    const [contentType, setContentType] = useState('video');
+    const [contentPosition, setContentPosition] = useState('left');
+    const textColor = useAppSelector((state) => state.style.linkColor);
+
+    const title = 'Modern ERP Redesign'
+
+    // Fetch Pexels image/video
+    useEffect(() => {
+        async function fetchData() {
+            const image = await getPexelsImage();
+            const video = await getPexelsVideo();
+            setIllustrationImage(image);
+            setIllustrationVideo(video);
+        }
+        fetchData();
+    }, []);
+
+    const imageBlock = (image) => (
+        <div
+            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
+            style={{
+                backgroundImage: `${
+                    image
+                        ? `url(${image?.src?.original})`
+                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+                }`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'left center',
+                backgroundRepeat: 'no-repeat',
+            }}
+        >
+            <div className='flex justify-center w-full bg-blue-300/20'>
+                <a
+                    className='text-[8px]'
+                    href={image?.photographer_url}
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    Photo by {image?.photographer} on Pexels
+                </a>
+            </div>
+        </div>
+    );
+
+    const videoBlock = (video) => {
+        if (video?.video_files?.length > 0) {
+            return (
+                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+                    <video
+                        className='absolute top-0 left-0 w-full h-full object-cover'
+                        autoPlay
+                        loop
+                        muted
+                    >
+                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
+                        Your browser does not support the video tag.
+                    </video>
+                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+                        <a
+                            className='text-[8px]'
+                            href={video?.user?.url}
+                            target='_blank'
+                            rel='noreferrer'
+                        >
+                            Video by {video.user.name} on Pexels
+                        </a>
+                    </div>
+                </div>)
+        }
+    };
+
+  return (
+      <div
+          style={
+              contentPosition === 'background'
+                  ? {
+                      backgroundImage: `${
+                          illustrationImage
+                              ? `url(${illustrationImage.src?.original})`
+                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+                      }`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'left center',
+                      backgroundRepeat: 'no-repeat',
+                  }
+                  : {}
+          }
+      >
+      <Head>
+        <title>{getPageTitle('Starter Page')}</title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+      <div
+          className={`flex ${
+              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          } min-h-screen w-full`}
+      >
+          {contentType === 'image' && contentPosition !== 'background'
+              ? imageBlock(illustrationImage)
+              : null}
+          {contentType === 'video' && contentPosition !== 'background'
+              ? videoBlock(illustrationVideo)
+              : null}
+          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+            <CardBoxComponentTitle title="Welcome to your Modern ERP Redesign app!"/>
+        
+            <div className="space-y-3">
+                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
+                <p className='text-center text-gray-500'>For guides and documentation please check
+                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+            </div>
+        
+            <BaseButtons>
+                <BaseButton
+                    href='/login'
+                    label='Login'
+                    color='info'
+                    className='w-full'
+                />
+
+            </BaseButtons>
+        </CardBox>
+        </div>
+      </div>
+      </SectionFullScreen>
+      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
+        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+            Privacy Policy
+        </Link>
+      </div>
+
+    </div>
+  );
+}
+
+Starter.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
+
diff --git a/frontend/src/pages/invoice_lines/[invoice_linesId].tsx b/frontend/src/pages/invoice_lines/[invoice_linesId].tsx
new file mode 100644
index 0000000..c1b745c
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/[invoice_linesId].tsx
@@ -0,0 +1,840 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/invoice_lines/invoice_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditInvoice_lines = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor_invoice: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { invoice_lines } = useAppSelector((state) => state.invoice_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { invoice_linesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: invoice_linesId }))
+  }, [invoice_linesId])
+
+  useEffect(() => {
+    if (typeof invoice_lines === 'object') {
+      setInitialValues(invoice_lines)
+    }
+  }, [invoice_lines])
+
+  useEffect(() => {
+      if (typeof invoice_lines === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (invoice_lines)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [invoice_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: invoice_linesId, data }))
+    await router.push('/invoice_lines/invoice_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit invoice_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit invoice_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='VendorInvoice' labelFor='vendor_invoice'>
+        <Field
+            name='vendor_invoice'
+            id='vendor_invoice'
+            component={SelectField}
+            options={initialValues.vendor_invoice}
+            itemRef={'vendor_invoices'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'invoice_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/invoice_lines/invoice_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditInvoice_lines.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditInvoice_lines
diff --git a/frontend/src/pages/invoice_lines/invoice_lines-edit.tsx b/frontend/src/pages/invoice_lines/invoice_lines-edit.tsx
new file mode 100644
index 0000000..facacbc
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/invoice_lines-edit.tsx
@@ -0,0 +1,837 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/invoice_lines/invoice_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditInvoice_linesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor_invoice: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { invoice_lines } = useAppSelector((state) => state.invoice_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof invoice_lines === 'object') {
+      setInitialValues(invoice_lines)
+    }
+  }, [invoice_lines])
+
+  useEffect(() => {
+      if (typeof invoice_lines === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (invoice_lines)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [invoice_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/invoice_lines/invoice_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit invoice_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit invoice_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='VendorInvoice' labelFor='vendor_invoice'>
+        <Field
+            name='vendor_invoice'
+            id='vendor_invoice'
+            component={SelectField}
+            options={initialValues.vendor_invoice}
+            itemRef={'vendor_invoices'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'invoice_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/invoice_lines/invoice_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditInvoice_linesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditInvoice_linesPage
diff --git a/frontend/src/pages/invoice_lines/invoice_lines-list.tsx b/frontend/src/pages/invoice_lines/invoice_lines-list.tsx
new file mode 100644
index 0000000..edf235c
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/invoice_lines-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableInvoice_lines from '../../components/Invoice_lines/TableInvoice_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/invoice_lines/invoice_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Invoice_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPrice', title: 'unit_price', number: 'true'},{label: 'TaxRate', title: 'tax_rate', number: 'true'},{label: 'LineTotal', title: 'line_total', number: 'true'},
+          
+    
+    
+    {label: 'VendorInvoice', title: 'vendor_invoice'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_INVOICE_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getInvoice_linesCSV = async () => {
+        const response = await axios({url: '/invoice_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'invoice_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Invoice_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Invoice_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/invoice_lines/invoice_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getInvoice_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableInvoice_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Invoice_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Invoice_linesTablesPage
diff --git a/frontend/src/pages/invoice_lines/invoice_lines-new.tsx b/frontend/src/pages/invoice_lines/invoice_lines-new.tsx
new file mode 100644
index 0000000..15afbc4
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/invoice_lines-new.tsx
@@ -0,0 +1,484 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/invoice_lines/invoice_linesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor_invoice: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    product: '',
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quantity: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    unit_price: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    tax_rate: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    line_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Invoice_linesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/invoice_lines/invoice_lines-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="VendorInvoice" labelFor="vendor_invoice">
+      <Field name="vendor_invoice" id="vendor_invoice" component={SelectField} options={[]} itemRef={'vendor_invoices'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Product" labelFor="product">
+      <Field name="product" id="product" component={SelectField} options={[]} itemRef={'products'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/invoice_lines/invoice_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Invoice_linesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Invoice_linesNew
diff --git a/frontend/src/pages/invoice_lines/invoice_lines-table.tsx b/frontend/src/pages/invoice_lines/invoice_lines-table.tsx
new file mode 100644
index 0000000..33d00a9
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/invoice_lines-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableInvoice_lines from '../../components/Invoice_lines/TableInvoice_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/invoice_lines/invoice_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Invoice_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPrice', title: 'unit_price', number: 'true'},{label: 'TaxRate', title: 'tax_rate', number: 'true'},{label: 'LineTotal', title: 'line_total', number: 'true'},
+          
+    
+    
+    {label: 'VendorInvoice', title: 'vendor_invoice'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_INVOICE_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getInvoice_linesCSV = async () => {
+        const response = await axios({url: '/invoice_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'invoice_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Invoice_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Invoice_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/invoice_lines/invoice_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getInvoice_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/invoice_lines/invoice_lines-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableInvoice_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Invoice_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Invoice_linesTablesPage
diff --git a/frontend/src/pages/invoice_lines/invoice_lines-view.tsx b/frontend/src/pages/invoice_lines/invoice_lines-view.tsx
new file mode 100644
index 0000000..f7dabcc
--- /dev/null
+++ b/frontend/src/pages/invoice_lines/invoice_lines-view.tsx
@@ -0,0 +1,559 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/invoice_lines/invoice_linesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Invoice_linesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { invoice_lines } = useAppSelector((state) => state.invoice_lines)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View invoice_lines')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View invoice_lines')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/invoice_lines/invoice_lines-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>VendorInvoice</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{invoice_lines?.vendor_invoice?.invoice_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Product</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{invoice_lines?.product?.product_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={invoice_lines?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Quantity</p>
+                  <p>{invoice_lines?.quantity || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>UnitPrice</p>
+                  <p>{invoice_lines?.unit_price || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>TaxRate</p>
+                  <p>{invoice_lines?.tax_rate || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>LineTotal</p>
+                  <p>{invoice_lines?.line_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{invoice_lines?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/invoice_lines/invoice_lines-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Invoice_linesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_INVOICE_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Invoice_linesView;
\ No newline at end of file
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
new file mode 100644
index 0000000..48144a4
--- /dev/null
+++ b/frontend/src/pages/login.tsx
@@ -0,0 +1,283 @@
+
+
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import BaseIcon from "../components/BaseIcon";
+import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import FormCheckRadio from '../components/FormCheckRadio';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import { findMe, loginUser, resetAction } from '../stores/authSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import Link from 'next/link';
+import {toast, ToastContainer} from "react-toastify";
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
+
+export default function Login() {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const textColor = useAppSelector((state) => state.style.linkColor);
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const notify = (type, msg) => toast(msg, { type });
+  const [ illustrationImage, setIllustrationImage ] = useState({
+      src: undefined,
+      photographer: undefined,
+      photographer_url: undefined,
+  })
+  const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
+    const [contentType, setContentType] = useState('video');
+    const [contentPosition, setContentPosition] = useState('left');
+    const [showPassword, setShowPassword] = useState(false);
+  const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
+    (state) => state.auth,
+  );
+  const [initialValues, setInitialValues] = React.useState({ email:'super_admin@flatlogic.com',
+    password: '449280c1',
+    remember: true })
+
+  const title = 'Modern ERP Redesign'
+
+  // Fetch Pexels image/video
+  useEffect( () => {
+      async function fetchData() {
+          const image = await getPexelsImage()
+          const video = await getPexelsVideo()
+          setIllustrationImage(image);
+          setIllustrationVideo(video);
+      }
+      fetchData();
+  }, []);
+  // Fetch user data
+  useEffect(() => {
+    if (token) {
+      dispatch(findMe());
+    }
+  }, [token, dispatch]);
+  // Redirect to dashboard if user is logged in
+  useEffect(() => {
+    if (currentUser?.id) {
+      router.push('/dashboard');
+    }
+  }, [currentUser?.id, router]);
+  // Show error message if there is one
+  useEffect(() => {
+    if (errorMessage){
+      notify('error', errorMessage)
+    }
+
+  }, [errorMessage])
+  // Show notification if there is one
+  useEffect(() => {
+      if (notifyState?.showNotification) {
+        notify('success', notifyState?.textNotification)
+        dispatch(resetAction());
+      }
+    }, [notifyState?.showNotification])
+
+  const togglePasswordVisibility = () => {
+      setShowPassword(!showPassword);
+  };
+
+  const handleSubmit = async (value) => {
+    const {remember, ...rest} = value
+    await dispatch(loginUser(rest));
+  };
+
+  const setLogin = (target: HTMLElement) => {
+      setInitialValues(prev => ({
+          ...prev,
+          email   : target.innerText.trim(),
+          password: target.dataset.password ?? '',
+      }));
+  };
+
+  const imageBlock = (image) => (
+      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
+           style={{
+               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
+               backgroundSize: 'cover',
+               backgroundPosition: 'left center',
+               backgroundRepeat: 'no-repeat',
+           }}>
+          <div className="flex justify-center w-full bg-blue-300/20">
+              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
+                  by {image?.photographer} on Pexels</a>
+          </div>
+      </div>
+  )
+
+  const videoBlock = (video) => {
+      if (video?.video_files?.length > 0) {
+          return (
+              <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+                  <video
+                      className='absolute top-0 left-0 w-full h-full object-cover'
+                      autoPlay
+                      loop
+                      muted
+                  >
+                      <source src={video.video_files[0]?.link} type='video/mp4'/>
+                      Your browser does not support the video tag.
+                  </video>
+                  <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+                      <a
+                          className='text-[8px]'
+                          href={video.user.url}
+                          target='_blank'
+                          rel='noreferrer'
+                      >
+                          Video by {video.user.name} on Pexels
+                      </a>
+                  </div>
+              </div>)
+      }
+  };
+
+  return (
+      <div style={contentPosition === 'background' ? {
+          backgroundImage: `${
+              illustrationImage
+                  ? `url(${illustrationImage.src?.original})`
+                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+          }`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'left center',
+          backgroundRepeat: 'no-repeat',
+      } : {}}>
+        <Head>
+          <title>{getPageTitle('Login')}</title>
+        </Head>
+
+        <SectionFullScreen bg='violet'>
+          <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
+            {contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
+            {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
+            <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+              
+                <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
+                 
+                    <h2 className="text-4xl font-semibold my-4">{title}</h2>
+                    
+                    <div className='flex flex-row text-gray-500 justify-between'>
+                        <div>
+                          
+                            <p className='mb-2'>Use{' '}
+                                <code className={`cursor-pointer ${textColor} `}
+                                      data-password="449280c1"
+                                      onClick={(e) => setLogin(e.target)}>super_admin@flatlogic.com</code>{' / '}
+                                <code className={`${textColor}`}>449280c1</code>{' / '}
+                                to login as Super Admin</p>
+                          
+                            <p className='mb-2'>Use{' '}
+                                <code className={`cursor-pointer ${textColor} `}
+                                      data-password="449280c1"
+                                      onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
+                                <code className={`${textColor}`}>449280c1</code>{' / '}
+                                to login as Admin</p>
+                            <p>Use <code
+                                className={`cursor-pointer ${textColor} `}
+                                data-password="b645054dc9ee"
+                                onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
+                                <code className={`${textColor}`}>b645054dc9ee</code>{' / '}
+                                to login as User</p>
+                        </div>
+                        <div>
+                            <BaseIcon
+                                className={`${iconsColor}`}
+                                w='w-16'
+                                h='h-16'
+                                size={48}
+                                path={mdiInformation}
+                            />
+                        </div>
+                    </div>
+                </CardBox>
+              
+                <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+                    <Formik
+                        initialValues={initialValues}
+                        enableReinitialize
+                        onSubmit={(values) => handleSubmit(values)}
+                    >
+                        <Form>
+                            <FormField
+                                label='Login'
+                                 help='Please enter your login'>
+                                <Field name='email' />
+                            </FormField>
+
+                            <div className='relative'>
+                                <FormField
+                                    label='Password'
+                                     help='Please enter your password'>
+                                    <Field name='password' type={showPassword ? 'text' : 'password'} />
+                                </FormField>
+                                <div
+                                    className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
+                                    onClick={togglePasswordVisibility}
+                                >
+                                    <BaseIcon
+                                        className='text-gray-500 hover:text-gray-700'
+                                        size={20}
+                                        path={showPassword ? mdiEyeOff : mdiEye}
+                                    />
+                                </div>
+                            </div>
+
+                            <div className={'flex justify-between'}>
+                                <FormCheckRadio type='checkbox' label='Remember'>
+                                    <Field type='checkbox' name='remember' />
+                                </FormCheckRadio>
+
+                                <Link className={`${textColor} text-blue-600`} href={'/forgot'}>
+                                    Forgot password?
+                                </Link>
+                            </div>
+
+                            <BaseDivider />
+
+                            <BaseButtons>
+                                <BaseButton
+                                    className={'w-full'}
+                                    type='submit'
+                                    label={isFetching ? 'Loading...' : 'Login'}
+                                    color='info'
+                                    disabled={isFetching}
+                                />
+                            </BaseButtons>
+                            <br />
+                            <p className={'text-center'}>
+                                Don’t have an account yet?{' '}
+                                <Link className={`${textColor}`} href={'/register'}>
+                                    New Account
+                                </Link>
+                            </p>
+                        </Form>
+                    </Formik>
+                </CardBox>
+            </div>
+          </div>
+        </SectionFullScreen>
+        <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+          <p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
+          <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+              Privacy Policy
+          </Link>
+        </div>
+        <ToastContainer />
+      </div>
+  );
+}
+
+Login.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/organizations/[organizationsId].tsx b/frontend/src/pages/organizations/[organizationsId].tsx
new file mode 100644
index 0000000..ce09801
--- /dev/null
+++ b/frontend/src/pages/organizations/[organizationsId].tsx
@@ -0,0 +1,191 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditOrganizations = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { organizations } = useAppSelector((state) => state.organizations)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { organizationsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: organizationsId }))
+  }, [organizationsId])
+
+  useEffect(() => {
+    if (typeof organizations === 'object') {
+      setInitialValues(organizations)
+    }
+  }, [organizations])
+
+  useEffect(() => {
+      if (typeof organizations === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (organizations)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [organizations])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: organizationsId, data }))
+    await router.push('/organizations/organizations-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit organizations'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditOrganizations.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditOrganizations
diff --git a/frontend/src/pages/organizations/organizations-edit.tsx b/frontend/src/pages/organizations/organizations-edit.tsx
new file mode 100644
index 0000000..1daa306
--- /dev/null
+++ b/frontend/src/pages/organizations/organizations-edit.tsx
@@ -0,0 +1,188 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditOrganizationsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { organizations } = useAppSelector((state) => state.organizations)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof organizations === 'object') {
+      setInitialValues(organizations)
+    }
+  }, [organizations])
+
+  useEffect(() => {
+      if (typeof organizations === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (organizations)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [organizations])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/organizations/organizations-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit organizations'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditOrganizationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditOrganizationsPage
diff --git a/frontend/src/pages/organizations/organizations-list.tsx b/frontend/src/pages/organizations/organizations-list.tsx
new file mode 100644
index 0000000..8492a59
--- /dev/null
+++ b/frontend/src/pages/organizations/organizations-list.tsx
@@ -0,0 +1,162 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableOrganizations from '../../components/Organizations/TableOrganizations'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/organizations/organizationsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const OrganizationsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ORGANIZATIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getOrganizationsCSV = async () => {
+        const response = await axios({url: '/organizations?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'organizationsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Organizations" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/organizations/organizations-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getOrganizationsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableOrganizations
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsTablesPage
diff --git a/frontend/src/pages/organizations/organizations-new.tsx b/frontend/src/pages/organizations/organizations-new.tsx
new file mode 100644
index 0000000..b61b5b7
--- /dev/null
+++ b/frontend/src/pages/organizations/organizations-new.tsx
@@ -0,0 +1,143 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+}
+
+
+const OrganizationsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/organizations/organizations-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="Name"
+  >
+      <Field
+          name="name"
+          placeholder="Name"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+OrganizationsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsNew
diff --git a/frontend/src/pages/organizations/organizations-table.tsx b/frontend/src/pages/organizations/organizations-table.tsx
new file mode 100644
index 0000000..bf898d6
--- /dev/null
+++ b/frontend/src/pages/organizations/organizations-table.tsx
@@ -0,0 +1,160 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableOrganizations from '../../components/Organizations/TableOrganizations'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/organizations/organizationsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const OrganizationsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ORGANIZATIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getOrganizationsCSV = async () => {
+        const response = await axios({url: '/organizations?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'organizationsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Organizations" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/organizations/organizations-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getOrganizationsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableOrganizations
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsTablesPage
diff --git a/frontend/src/pages/organizations/organizations-view.tsx b/frontend/src/pages/organizations/organizations-view.tsx
new file mode 100644
index 0000000..0e333a0
--- /dev/null
+++ b/frontend/src/pages/organizations/organizations-view.tsx
@@ -0,0 +1,2582 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/organizations/organizationsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const OrganizationsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { organizations } = useAppSelector((state) => state.organizations)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View organizations')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View organizations')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/organizations/organizations-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Name</p>
+                    <p>{organizations?.name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Users Organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                <th>First Name</th>
+                                
+                                
+                                
+                                <th>Last Name</th>
+                                
+                                
+                                
+                                <th>Phone Number</th>
+                                
+                                
+                                
+                                <th>E-Mail</th>
+                                
+                                
+                                
+                                <th>Disabled</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.users_organizations && Array.isArray(organizations.users_organizations) &&
+                              organizations.users_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    <td data-label="firstName">
+                                        { item.firstName }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="lastName">
+                                        { item.lastName }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="phoneNumber">
+                                        { item.phoneNumber }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="disabled">
+                                        { dataFormatter.booleanFormatter(item.disabled) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.users_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Companies organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                <th>CompanyName</th>
+                                
+                                
+                                
+                                <th>LegalName</th>
+                                
+                                
+                                
+                                <th>TaxNumber</th>
+                                
+                                
+                                
+                                <th>Website</th>
+                                
+                                
+                                
+                                <th>Phone</th>
+                                
+                                
+                                
+                                <th>Email</th>
+                                
+                                
+                                
+                                <th>AddressLine1</th>
+                                
+                                
+                                
+                                <th>AddressLine2</th>
+                                
+                                
+                                
+                                <th>City</th>
+                                
+                                
+                                
+                                <th>State/Province</th>
+                                
+                                
+                                
+                                <th>PostalCode</th>
+                                
+                                
+                                
+                                <th>Country</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.companies_organizations && Array.isArray(organizations.companies_organizations) &&
+                              organizations.companies_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/companies/companies-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    <td data-label="company_name">
+                                        { item.company_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="legal_name">
+                                        { item.legal_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_number">
+                                        { item.tax_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="website">
+                                        { item.website }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="phone">
+                                        { item.phone }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address_line1">
+                                        { item.address_line1 }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address_line2">
+                                        { item.address_line2 }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="city">
+                                        { item.city }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="state">
+                                        { item.state }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="postal_code">
+                                        { item.postal_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="country">
+                                        { item.country }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.companies_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>User_role_assignments organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EffectiveFrom</th>
+                                
+                                
+                                
+                                <th>EffectiveTo</th>
+                                
+                                
+                                
+                                <th>IsPrimary</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.user_role_assignments_organizations && Array.isArray(organizations.user_role_assignments_organizations) &&
+                              organizations.user_role_assignments_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/user_role_assignments/user_role_assignments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="effective_from">
+                                        { dataFormatter.dateTimeFormatter(item.effective_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="effective_to">
+                                        { dataFormatter.dateTimeFormatter(item.effective_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_primary">
+                                        { dataFormatter.booleanFormatter(item.is_primary) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.user_role_assignments_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Role_permission_mappings organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>IsAllowed</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.role_permission_mappings_organizations && Array.isArray(organizations.role_permission_mappings_organizations) &&
+                              organizations.role_permission_mappings_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_allowed">
+                                        { dataFormatter.booleanFormatter(item.is_allowed) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.role_permission_mappings_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendors organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>VendorName</th>
+                                
+                                
+                                
+                                <th>VendorCode</th>
+                                
+                                
+                                
+                                <th>ContactName</th>
+                                
+                                
+                                
+                                <th>Email</th>
+                                
+                                
+                                
+                                <th>Phone</th>
+                                
+                                
+                                
+                                <th>Address</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>PaymentTerms</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.vendors_organizations && Array.isArray(organizations.vendors_organizations) &&
+                              organizations.vendors_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendors/vendors-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="vendor_name">
+                                        { item.vendor_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="vendor_code">
+                                        { item.vendor_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="contact_name">
+                                        { item.contact_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="phone">
+                                        { item.phone }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address">
+                                        { item.address }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="payment_terms">
+                                        { item.payment_terms }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.vendors_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Warehouses organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>WarehouseName</th>
+                                
+                                
+                                
+                                <th>WarehouseCode</th>
+                                
+                                
+                                
+                                <th>Address</th>
+                                
+                                
+                                
+                                <th>IsDefault</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.warehouses_organizations && Array.isArray(organizations.warehouses_organizations) &&
+                              organizations.warehouses_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/warehouses/warehouses-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="warehouse_name">
+                                        { item.warehouse_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="warehouse_code">
+                                        { item.warehouse_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="address">
+                                        { item.address }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_default">
+                                        { dataFormatter.booleanFormatter(item.is_default) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.warehouses_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Product_categories organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>CategoryName</th>
+                                
+                                
+                                
+                                <th>CategoryCode</th>
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.product_categories_organizations && Array.isArray(organizations.product_categories_organizations) &&
+                              organizations.product_categories_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/product_categories/product_categories-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="category_name">
+                                        { item.category_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="category_code">
+                                        { item.category_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.product_categories_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Products organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ProductName</th>
+                                
+                                
+                                
+                                <th>SKU</th>
+                                
+                                
+                                
+                                <th>Barcode</th>
+                                
+                                
+                                
+                                <th>ProductType</th>
+                                
+                                
+                                
+                                <th>UnitofMeasure</th>
+                                
+                                
+                                
+                                <th>StandardCost</th>
+                                
+                                
+                                
+                                <th>PurchasePrice</th>
+                                
+                                
+                                
+                                <th>SalesPrice</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.products_organizations && Array.isArray(organizations.products_organizations) &&
+                              organizations.products_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/products/products-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="product_name">
+                                        { item.product_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sku">
+                                        { item.sku }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="barcode">
+                                        { item.barcode }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="product_type">
+                                        { item.product_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="uom">
+                                        { item.uom }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="standard_cost">
+                                        { item.standard_cost }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="purchase_price">
+                                        { item.purchase_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sales_price">
+                                        { item.sales_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.products_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisitions organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>RequisitionNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>RequestedDate</th>
+                                
+                                
+                                
+                                <th>NeededBy</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Reason</th>
+                                
+                                
+                                
+                                <th>EstimatedTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.purchase_requisitions_organizations && Array.isArray(organizations.purchase_requisitions_organizations) &&
+                              organizations.purchase_requisitions_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requisition_number">
+                                        { item.requisition_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requested_date">
+                                        { dataFormatter.dateTimeFormatter(item.requested_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="needed_by">
+                                        { dataFormatter.dateTimeFormatter(item.needed_by) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="reason">
+                                        { item.reason }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="estimated_total">
+                                        { item.estimated_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.purchase_requisitions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisition_lines organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPriceEstimate</th>
+                                
+                                
+                                
+                                <th>LineTotalEstimate</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.purchase_requisition_lines_organizations && Array.isArray(organizations.purchase_requisition_lines_organizations) &&
+                              organizations.purchase_requisition_lines_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price_estimate">
+                                        { item.unit_price_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total_estimate">
+                                        { item.line_total_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.purchase_requisition_lines_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_orders organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PONumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>OrderDate</th>
+                                
+                                
+                                
+                                <th>ExpectedDeliveryDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>DiscountTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.purchase_orders_organizations && Array.isArray(organizations.purchase_orders_organizations) &&
+                              organizations.purchase_orders_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_orders/purchase_orders-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="po_number">
+                                        { item.po_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="order_date">
+                                        { dataFormatter.dateTimeFormatter(item.order_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="expected_delivery_date">
+                                        { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_total">
+                                        { item.discount_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.purchase_orders_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_order_lines organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>DiscountRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.purchase_order_lines_organizations && Array.isArray(organizations.purchase_order_lines_organizations) &&
+                              organizations.purchase_order_lines_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_rate">
+                                        { item.discount_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.purchase_order_lines_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipts organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>GRNNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ReceiptDate</th>
+                                
+                                
+                                
+                                <th>PostedDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Remarks</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.goods_receipts_organizations && Array.isArray(organizations.goods_receipts_organizations) &&
+                              organizations.goods_receipts_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipts/goods_receipts-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="grn_number">
+                                        { item.grn_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="receipt_date">
+                                        { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="posted_date">
+                                        { dataFormatter.dateTimeFormatter(item.posted_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="remarks">
+                                        { item.remarks }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.goods_receipts_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipt_lines organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>QuantityReceived</th>
+                                
+                                
+                                
+                                <th>QuantityAccepted</th>
+                                
+                                
+                                
+                                <th>QuantityRejected</th>
+                                
+                                
+                                
+                                <th>QualityNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.goods_receipt_lines_organizations && Array.isArray(organizations.goods_receipt_lines_organizations) &&
+                              organizations.goods_receipt_lines_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_received">
+                                        { item.quantity_received }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_accepted">
+                                        { item.quantity_accepted }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_rejected">
+                                        { item.quantity_rejected }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quality_notes">
+                                        { item.quality_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.goods_receipt_lines_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendor_invoices organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>InvoiceNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>InvoiceDate</th>
+                                
+                                
+                                
+                                <th>DueDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.vendor_invoices_organizations && Array.isArray(organizations.vendor_invoices_organizations) &&
+                              organizations.vendor_invoices_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendor_invoices/vendor_invoices-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_number">
+                                        { item.invoice_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_date">
+                                        { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="due_date">
+                                        { dataFormatter.dateTimeFormatter(item.due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.vendor_invoices_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Invoice_lines organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.invoice_lines_organizations && Array.isArray(organizations.invoice_lines_organizations) &&
+                              organizations.invoice_lines_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/invoice_lines/invoice_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.invoice_lines_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Payments organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PaymentReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>PaymentDate</th>
+                                
+                                
+                                
+                                <th>Amount</th>
+                                
+                                
+                                
+                                <th>Method</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.payments_organizations && Array.isArray(organizations.payments_organizations) &&
+                              organizations.payments_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_reference">
+                                        { item.payment_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_date">
+                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="amount">
+                                        { item.amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="method">
+                                        { item.method }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.payments_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Departments organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>DepartmentName</th>
+                                
+                                
+                                
+                                <th>DepartmentCode</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.departments_organizations && Array.isArray(organizations.departments_organizations) &&
+                              organizations.departments_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/departments/departments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="department_name">
+                                        { item.department_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="department_code">
+                                        { item.department_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.departments_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Document_types organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                <th>TypeName</th>
+                                
+                                
+                                
+                                <th>TypeCode</th>
+                                
+                                
+                                
+                                <th>Module</th>
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.document_types_organizations && Array.isArray(organizations.document_types_organizations) &&
+                              organizations.document_types_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/document_types/document_types-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    <td data-label="type_name">
+                                        { item.type_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="type_code">
+                                        { item.type_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="module">
+                                        { item.module }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.document_types_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Documents organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentNumber</th>
+                                
+                                
+                                
+                                <th>Title</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Priority</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentDate</th>
+                                
+                                
+                                
+                                <th>ReviewDueDate</th>
+                                
+                                
+                                
+                                <th>Summary</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Tags</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.documents_organizations && Array.isArray(organizations.documents_organizations) &&
+                              organizations.documents_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_number">
+                                        { item.document_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="title">
+                                        { item.title }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="priority">
+                                        { item.priority }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_date">
+                                        { dataFormatter.dateTimeFormatter(item.document_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="review_due_date">
+                                        { dataFormatter.dateTimeFormatter(item.review_due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="summary">
+                                        { item.summary }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="tags">
+                                        { item.tags }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.documents_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Document_links organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>SourceType</th>
+                                
+                                
+                                
+                                <th>SourceReference</th>
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.document_links_organizations && Array.isArray(organizations.document_links_organizations) &&
+                              organizations.document_links_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/document_links/document_links-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="source_type">
+                                        { item.source_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="source_reference">
+                                        { item.source_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.document_links_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approval_workflows organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>WorkflowName</th>
+                                
+                                
+                                
+                                <th>AppliesTo</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.approval_workflows_organizations && Array.isArray(organizations.approval_workflows_organizations) &&
+                              organizations.approval_workflows_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approval_workflows/approval_workflows-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="workflow_name">
+                                        { item.workflow_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="applies_to">
+                                        { item.applies_to }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.approval_workflows_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approval_steps organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>StepOrder</th>
+                                
+                                
+                                
+                                <th>StepName</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>MinAmount</th>
+                                
+                                
+                                
+                                <th>MaxAmount</th>
+                                
+                                
+                                
+                                <th>IsRequired</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.approval_steps_organizations && Array.isArray(organizations.approval_steps_organizations) &&
+                              organizations.approval_steps_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approval_steps/approval_steps-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="step_order">
+                                        { item.step_order }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="step_name">
+                                        { item.step_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="min_amount">
+                                        { item.min_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="max_amount">
+                                        { item.max_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_required">
+                                        { dataFormatter.booleanFormatter(item.is_required) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.approval_steps_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approvals organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>RequestedAt</th>
+                                
+                                
+                                
+                                <th>DecidedAt</th>
+                                
+                                
+                                
+                                <th>DecisionNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.approvals_organizations && Array.isArray(organizations.approvals_organizations) &&
+                              organizations.approvals_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="requested_at">
+                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decided_at">
+                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decision_notes">
+                                        { item.decision_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.approvals_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Activity_logs organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                <th>Action</th>
+                                
+                                
+                                
+                                <th>EventTime</th>
+                                
+                                
+                                
+                                <th>Message</th>
+                                
+                                
+                                
+                                <th>IPAddress</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.activity_logs_organizations && Array.isArray(organizations.activity_logs_organizations) &&
+                              organizations.activity_logs_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/activity_logs/activity_logs-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="action">
+                                        { item.action }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="event_time">
+                                        { dataFormatter.dateTimeFormatter(item.event_time) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="message">
+                                        { item.message }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="ip_address">
+                                        { item.ip_address }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.activity_logs_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Ui_announcements organizations</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>Headline</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Audience</th>
+                                
+                                
+                                
+                                <th>PublishFrom</th>
+                                
+                                
+                                
+                                <th>PublishTo</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.ui_announcements_organizations && Array.isArray(organizations.ui_announcements_organizations) &&
+                              organizations.ui_announcements_organizations.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/ui_announcements/ui_announcements-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="headline">
+                                        { item.headline }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="audience">
+                                        { item.audience }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="publish_from">
+                                        { dataFormatter.dateTimeFormatter(item.publish_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="publish_to">
+                                        { dataFormatter.dateTimeFormatter(item.publish_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.ui_announcements_organizations?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/organizations/organizations-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+OrganizationsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ORGANIZATIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default OrganizationsView;
\ No newline at end of file
diff --git a/frontend/src/pages/password-reset.tsx b/frontend/src/pages/password-reset.tsx
new file mode 100644
index 0000000..e75c2f4
--- /dev/null
+++ b/frontend/src/pages/password-reset.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import LayoutGuest from '../layouts/Guest';
+import PasswordSetOrReset from '../components/PasswordSetOrReset';
+
+export default function Reset() {
+  return <PasswordSetOrReset />;
+}
+
+Reset.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/payments/[paymentsId].tsx b/frontend/src/pages/payments/[paymentsId].tsx
new file mode 100644
index 0000000..965d442
--- /dev/null
+++ b/frontend/src/pages/payments/[paymentsId].tsx
@@ -0,0 +1,1124 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/payments/paymentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPayments = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'payment_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor_invoice: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    payment_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    method: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    proof_files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { payments } = useAppSelector((state) => state.payments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { paymentsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: paymentsId }))
+  }, [paymentsId])
+
+  useEffect(() => {
+    if (typeof payments === 'object') {
+      setInitialValues(payments)
+    }
+  }, [payments])
+
+  useEffect(() => {
+      if (typeof payments === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (payments)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [payments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: paymentsId, data }))
+    await router.push('/payments/payments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit payments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit payments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PaymentReference"
+    >
+        <Field
+            name="payment_reference"
+            placeholder="PaymentReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='VendorInvoice' labelFor='vendor_invoice'>
+        <Field
+            name='vendor_invoice'
+            id='vendor_invoice'
+            component={SelectField}
+            options={initialValues.vendor_invoice}
+            itemRef={'vendor_invoices'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'invoice_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PaymentDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.payment_date ?
+                  new Date(
+                      dayjs(initialValues.payment_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'payment_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Amount"
+    >
+        <Field
+            type="number"
+            name="amount"
+            placeholder="Amount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Method" labelFor="method">
+        <Field name="method" id="method" component="select">
+          
+            <option value="bank_transfer">bank_transfer</option>
+          
+            <option value="cash">cash</option>
+          
+            <option value="cheque">cheque</option>
+          
+            <option value="card">card</option>
+          
+            <option value="online">online</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="scheduled">scheduled</option>
+          
+            <option value="processing">processing</option>
+          
+            <option value="completed">completed</option>
+          
+            <option value="failed">failed</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='ProofFiles'
+            color='info'
+            icon={mdiUpload}
+            path={'payments/proof_files'}
+            name='proof_files'
+            id='proof_files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/payments/payments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPayments.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPayments
diff --git a/frontend/src/pages/payments/payments-edit.tsx b/frontend/src/pages/payments/payments-edit.tsx
new file mode 100644
index 0000000..8ae454a
--- /dev/null
+++ b/frontend/src/pages/payments/payments-edit.tsx
@@ -0,0 +1,1121 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/payments/paymentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPaymentsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'payment_reference': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor_invoice: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    payment_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'amount': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    method: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    proof_files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { payments } = useAppSelector((state) => state.payments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof payments === 'object') {
+      setInitialValues(payments)
+    }
+  }, [payments])
+
+  useEffect(() => {
+      if (typeof payments === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (payments)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [payments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/payments/payments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit payments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit payments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PaymentReference"
+    >
+        <Field
+            name="payment_reference"
+            placeholder="PaymentReference"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='VendorInvoice' labelFor='vendor_invoice'>
+        <Field
+            name='vendor_invoice'
+            id='vendor_invoice'
+            component={SelectField}
+            options={initialValues.vendor_invoice}
+            itemRef={'vendor_invoices'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'invoice_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PaymentDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.payment_date ?
+                  new Date(
+                      dayjs(initialValues.payment_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'payment_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Amount"
+    >
+        <Field
+            type="number"
+            name="amount"
+            placeholder="Amount"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Method" labelFor="method">
+        <Field name="method" id="method" component="select">
+          
+            <option value="bank_transfer">bank_transfer</option>
+          
+            <option value="cash">cash</option>
+          
+            <option value="cheque">cheque</option>
+          
+            <option value="card">card</option>
+          
+            <option value="online">online</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="scheduled">scheduled</option>
+          
+            <option value="processing">processing</option>
+          
+            <option value="completed">completed</option>
+          
+            <option value="failed">failed</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='ProofFiles'
+            color='info'
+            icon={mdiUpload}
+            path={'payments/proof_files'}
+            name='proof_files'
+            id='proof_files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/payments/payments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPaymentsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPaymentsPage
diff --git a/frontend/src/pages/payments/payments-list.tsx b/frontend/src/pages/payments/payments-list.tsx
new file mode 100644
index 0000000..5821f4e
--- /dev/null
+++ b/frontend/src/pages/payments/payments-list.tsx
@@ -0,0 +1,178 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePayments from '../../components/Payments/TablePayments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/payments/paymentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const PaymentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'PaymentReference', title: 'payment_reference'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Amount', title: 'amount', number: 'true'},
+          {label: 'PaymentDate', title: 'payment_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'VendorInvoice', title: 'vendor_invoice'},
+    
+    
+          
+          {label: 'Method', title: 'method', type: 'enum', options: ['bank_transfer','cash','cheque','card','online']},{label: 'Status', title: 'status', type: 'enum', options: ['scheduled','processing','completed','failed','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PAYMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPaymentsCSV = async () => {
+        const response = await axios({url: '/payments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'paymentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Payments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Payments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/payments/payments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPaymentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/payments/payments-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TablePayments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+PaymentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PaymentsTablesPage
diff --git a/frontend/src/pages/payments/payments-new.tsx b/frontend/src/pages/payments/payments-new.tsx
new file mode 100644
index 0000000..ecd7733
--- /dev/null
+++ b/frontend/src/pages/payments/payments-new.tsx
@@ -0,0 +1,653 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/payments/paymentsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    payment_reference: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor_invoice: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    payment_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    amount: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    method: 'bank_transfer',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'scheduled',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    proof_files: [],
+    
+    
+    
+    
+    
+    
+    
+    notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const PaymentsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/payments/payments-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PaymentReference"
+  >
+      <Field
+          name="payment_reference"
+          placeholder="PaymentReference"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Vendor" labelFor="vendor">
+      <Field name="vendor" id="vendor" component={SelectField} options={[]} itemRef={'vendors'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="VendorInvoice" labelFor="vendor_invoice">
+      <Field name="vendor_invoice" id="vendor_invoice" component={SelectField} options={[]} itemRef={'vendor_invoices'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PaymentDate"
+  >
+      <Field
+          type="datetime-local"
+          name="payment_date"
+          placeholder="PaymentDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Amount"
+    >
+        <Field
+            type="number"
+            name="amount"
+            placeholder="Amount"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Method" labelFor="method">
+      <Field name="method" id="method" component="select">
+      
+        <option value="bank_transfer">bank_transfer</option>
+      
+        <option value="cash">cash</option>
+      
+        <option value="cheque">cheque</option>
+      
+        <option value="card">card</option>
+      
+        <option value="online">online</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="scheduled">scheduled</option>
+      
+        <option value="processing">processing</option>
+      
+        <option value="completed">completed</option>
+      
+        <option value="failed">failed</option>
+      
+        <option value="cancelled">cancelled</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='ProofFiles'
+          color='info'
+          icon={mdiUpload}
+          path={'payments/proof_files'}
+          name='proof_files'
+          id='proof_files'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+    <FormField label="Notes" hasTextareaHeight>
+        <Field name="notes" as="textarea" placeholder="Notes" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/payments/payments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+PaymentsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PaymentsNew
diff --git a/frontend/src/pages/payments/payments-table.tsx b/frontend/src/pages/payments/payments-table.tsx
new file mode 100644
index 0000000..24d73df
--- /dev/null
+++ b/frontend/src/pages/payments/payments-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePayments from '../../components/Payments/TablePayments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/payments/paymentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const PaymentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'PaymentReference', title: 'payment_reference'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Amount', title: 'amount', number: 'true'},
+          {label: 'PaymentDate', title: 'payment_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'VendorInvoice', title: 'vendor_invoice'},
+    
+    
+              
+          {label: 'Method', title: 'method', type: 'enum', options: ['bank_transfer','cash','cheque','card','online']},{label: 'Status', title: 'status', type: 'enum', options: ['scheduled','processing','completed','failed','cancelled']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PAYMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPaymentsCSV = async () => {
+        const response = await axios({url: '/payments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'paymentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Payments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Payments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/payments/payments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPaymentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/payments/payments-list'}>
+                Back to <span className='capitalize'>calendar</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePayments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+PaymentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PaymentsTablesPage
diff --git a/frontend/src/pages/payments/payments-view.tsx b/frontend/src/pages/payments/payments-view.tsx
new file mode 100644
index 0000000..9109826
--- /dev/null
+++ b/frontend/src/pages/payments/payments-view.tsx
@@ -0,0 +1,734 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/payments/paymentsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const PaymentsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { payments } = useAppSelector((state) => state.payments)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View payments')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View payments')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/payments/payments-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{payments?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PaymentReference</p>
+                    <p>{payments?.payment_reference}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Vendor</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{payments?.vendor?.vendor_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>VendorInvoice</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{payments?.vendor_invoice?.invoice_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='PaymentDate'>
+                    {payments.payment_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={payments.payment_date ?
+                        new Date(
+                          dayjs(payments.payment_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No PaymentDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Amount</p>
+                  <p>{payments?.amount || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Method</p>
+                    <p>{payments?.method ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{payments?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ProofFiles</p>
+                    {payments?.proof_files?.length
+                      ? dataFormatter.filesFormatter(payments.proof_files).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No ProofFiles</p>
+                    }
+                </div>
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={payments?.notes} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{payments?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/payments/payments-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+PaymentsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PAYMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default PaymentsView;
\ No newline at end of file
diff --git a/frontend/src/pages/permissions/[permissionsId].tsx b/frontend/src/pages/permissions/[permissionsId].tsx
new file mode 100644
index 0000000..f113757
--- /dev/null
+++ b/frontend/src/pages/permissions/[permissionsId].tsx
@@ -0,0 +1,191 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/permissions/permissionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPermissions = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { permissions } = useAppSelector((state) => state.permissions)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { permissionsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: permissionsId }))
+  }, [permissionsId])
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      setInitialValues(permissions)
+    }
+  }, [permissions])
+
+  useEffect(() => {
+      if (typeof permissions === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (permissions)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [permissions])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: permissionsId, data }))
+    await router.push('/permissions/permissions-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit permissions'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/permissions/permissions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPermissions.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPermissions
diff --git a/frontend/src/pages/permissions/permissions-edit.tsx b/frontend/src/pages/permissions/permissions-edit.tsx
new file mode 100644
index 0000000..a035310
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-edit.tsx
@@ -0,0 +1,188 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/permissions/permissionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPermissionsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { permissions } = useAppSelector((state) => state.permissions)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      setInitialValues(permissions)
+    }
+  }, [permissions])
+
+  useEffect(() => {
+      if (typeof permissions === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (permissions)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [permissions])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/permissions/permissions-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit permissions'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/permissions/permissions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPermissionsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPermissionsPage
diff --git a/frontend/src/pages/permissions/permissions-list.tsx b/frontend/src/pages/permissions/permissions-list.tsx
new file mode 100644
index 0000000..995bec1
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-list.tsx
@@ -0,0 +1,162 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePermissions from '../../components/Permissions/TablePermissions'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/permissions/permissionsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const PermissionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PERMISSIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPermissionsCSV = async () => {
+        const response = await axios({url: '/permissions?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'permissionsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Permissions" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/permissions/permissions-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPermissionsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TablePermissions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PermissionsTablesPage
diff --git a/frontend/src/pages/permissions/permissions-new.tsx b/frontend/src/pages/permissions/permissions-new.tsx
new file mode 100644
index 0000000..e0bb0c8
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-new.tsx
@@ -0,0 +1,143 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/permissions/permissionsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+}
+
+
+const PermissionsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/permissions/permissions-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="Name"
+  >
+      <Field
+          name="name"
+          placeholder="Name"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/permissions/permissions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+PermissionsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PermissionsNew
diff --git a/frontend/src/pages/permissions/permissions-table.tsx b/frontend/src/pages/permissions/permissions-table.tsx
new file mode 100644
index 0000000..88694db
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-table.tsx
@@ -0,0 +1,160 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePermissions from '../../components/Permissions/TablePermissions'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/permissions/permissionsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const PermissionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PERMISSIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPermissionsCSV = async () => {
+        const response = await axios({url: '/permissions?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'permissionsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Permissions" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/permissions/permissions-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPermissionsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePermissions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default PermissionsTablesPage
diff --git a/frontend/src/pages/permissions/permissions-view.tsx b/frontend/src/pages/permissions/permissions-view.tsx
new file mode 100644
index 0000000..381bed9
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-view.tsx
@@ -0,0 +1,195 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/permissions/permissionsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const PermissionsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { permissions } = useAppSelector((state) => state.permissions)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View permissions')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View permissions')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/permissions/permissions-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Name</p>
+                    <p>{permissions?.name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Role_permission_mappings Permission</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>IsAllowed</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {permissions.role_permission_mappings_permission && Array.isArray(permissions.role_permission_mappings_permission) &&
+                              permissions.role_permission_mappings_permission.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_allowed">
+                                        { dataFormatter.booleanFormatter(item.is_allowed) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!permissions?.role_permission_mappings_permission?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/permissions/permissions-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+PermissionsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PERMISSIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default PermissionsView;
\ No newline at end of file
diff --git a/frontend/src/pages/privacy-policy.tsx b/frontend/src/pages/privacy-policy.tsx
new file mode 100644
index 0000000..bc92b0e
--- /dev/null
+++ b/frontend/src/pages/privacy-policy.tsx
@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+export default function PrivacyPolicy() {
+  const title = 'Modern ERP Redesign'
+  const [projectUrl, setProjectUrl] = useState('');
+
+  useEffect(() => {
+    setProjectUrl(location.origin);
+  }, []);
+
+  const Introduction = () => {
+    return (
+      <>
+        <h3>1. Introduction</h3>
+        <p>
+          {/* eslint-disable-next-line react/no-unescaped-entities */}
+          We at <span>{title}</span> ("we", "us", "our") are committed to
+          protecting your privacy. This Privacy Policy explains how we collect,
+          use, disclose, and safeguard your information when you visit our
+          website <a href={projectUrl}>{projectUrl}</a>, use our services, or
+          interact with us in other ways. By using our services, you agree to
+          the collection and use of information in accordance with this policy.
+        </p>
+      </>
+    );
+  };
+
+  const Information = () => {
+    return (
+      <>
+        <h3>2. Information We Collect</h3>
+        <div className='ml-2'>
+          <h4>2.1 Personal Identification Information</h4>
+          <p>
+            We collect various types of personal information in connection with
+            the services we provide, including:
+          </p>
+          <ul role='list'>
+            <li>
+              Contact Information: Name, email address, phone number, mailing
+              address.
+            </li>
+            <li>Account Information: Username, password, profile picture.</li>
+            <li>Payment Information: Credit card details, billing address.</li>
+            <li>Demographic Information: Age, gender, interests.</li>
+          </ul>
+          <h4>2.2 Technical Data</h4>
+          <p>
+            We automatically collect certain information when you visit, use, or
+            navigate our services. This information may include:
+          </p>
+          <ul role='list'>
+            <li>
+              Device Information: IP address, browser type, operating system,
+              device type.
+            </li>
+            <li>
+              Usage Data: Pages visited, time spent on each page, links clicked,
+              and other actions taken on our site.
+            </li>
+          </ul>
+          <h4>2.3 Cookies and Tracking Technologies</h4>
+          <p>
+            We use cookies and similar tracking technologies to track the
+            activity on our service and hold certain information. You can
+            instruct your browser to refuse all cookies or to indicate when a
+            cookie is being sent.
+          </p>
+        </div>
+      </>
+    );
+  };
+
+  const HowToUser = () => {
+    return (
+      <>
+        <h3>3. How We Use Your Information</h3>
+        <p>We use the information we collect in various ways, including to:</p>
+        <ul role='list' className=''>
+          <li>Provide, operate, and maintain our website and services.</li>
+          <li>Improve, personalize, and expand our website and services.</li>
+          <li>Understand and analyze how you use our website and services.</li>
+          <li>Develop new products, services, features, and functionality.</li>
+          <li>
+            Communicate with you, either directly or through one of our
+            partners, including for customer service, to provide you with
+            updates and other information relating to the website, and for
+            marketing and promotional purposes.
+          </li>
+          <li>
+            Process your transactions and send you related information,
+            including purchase confirmations and invoices.
+          </li>
+          <li>Find and prevent fraud.</li>
+          <li>Comply with legal obligations.</li>
+        </ul>
+      </>
+    );
+  };
+
+  const DataProtection = () => {
+    return (
+      <>
+        <h3>4. Data Protection and Security</h3>
+        <p>
+          We implement a variety of security measures to maintain the safety of
+          your personal information. These measures include:
+        </p>
+        <ul role='list'>
+          <li>
+            Encryption: We use encryption to protect sensitive information
+            transmitted online. Access Controls: We restrict access to your
+            personal data to authorized personnel only. Regular Security Audits:
+            We conduct regular audits to identify and address potential security
+            vulnerabilities.
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const Sharing = () => {
+    return (
+      <>
+        <h3>5. Sharing Your Information</h3>
+        <p>
+          We do not sell, trade, or otherwise transfer your Personally
+          Identifiable Information to outside parties without your consent,
+          except in the following cases:
+        </p>
+        <ul role='list'>
+          <li>
+            Service Providers: We may share your information with third-party
+            service providers who perform services on our behalf, such as
+            payment processing, data analysis, email delivery, hosting services,
+            customer service, and marketing assistance.
+          </li>
+          <li>
+            Business Transfers: In the event of a merger, acquisition, or sale
+            of all or a portion of our assets, your information may be
+            transferred as part of that transaction.
+          </li>
+          <li>
+            Legal Requirements: We may disclose your information if required to
+            do so by law or in response to valid requests by public authorities
+            (e.g., a court or a government agency).
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const ProtectionRights = () => {
+    return (
+      <>
+        <h3>6. Your Data Protection Rights</h3>
+        <p>
+          Depending on your location, you may have the following rights
+          regarding your personal data:
+        </p>
+        <ul role='list'>
+          <li>
+            The Right to Access: You have the right to request copies of your
+            personal data.
+          </li>
+          <li>
+            The Right to Rectification: You have the right to request that we
+            correct any information you believe is inaccurate or complete
+            information you believe is incomplete.
+          </li>
+          <li>
+            The Right to Erasure: You have the right to request that we erase
+            your personal data, under certain conditions.
+          </li>
+          <li>
+            The Right to Restrict Processing: You have the right to request that
+            we restrict the processing of your personal data, under certain
+            conditions.
+          </li>
+          <li>
+            The Right to Object to Processing: You have the right to object to
+            our processing of your personal data, under certain conditions.
+          </li>
+          <li>
+            The Right to Data Portability: You have the right to request that we
+            transfer the data that we have collected to another organization, or
+            directly to you, under certain conditions.
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const DataTransfers = () => {
+    return (
+      <>
+        <h3>7. International Data Transfers</h3>
+        <p>
+          Your information, including personal data, may be transferred to — and
+          maintained on — computers located outside of your state, province,
+          country, or other governmental jurisdiction where the data protection
+          laws may differ from those of your jurisdiction. We will take all
+          steps reasonably necessary to ensure that your data is treated
+          securely and in accordance with this Privacy Policy.
+        </p>
+      </>
+    );
+  };
+
+  const RetentionOfData = () => {
+    return (
+      <>
+        <h3>8. Retention of Data</h3>
+        <p>
+          We will retain your personal data only for as long as is necessary for
+          the purposes set out in this Privacy Policy. We will retain and use
+          your personal data to the extent necessary to comply with our legal
+          obligations, resolve disputes, and enforce our policies.
+        </p>
+      </>
+    );
+  };
+
+  const ChangePrivacy = () => {
+    return (
+      <>
+        <h3>9. Changes to This Privacy Policy</h3>
+        <p>
+          We may update our Privacy Policy from time to time. We will notify you
+          of any changes by posting the new Privacy Policy on this page. You are
+          advised to review this Privacy Policy periodically for any changes.
+          Changes to this Privacy Policy are effective when they are posted on
+          this page.
+        </p>
+      </>
+    );
+  };
+
+  const ContactUs = () => {
+    return (
+      <>
+        <h3>10. Contact Us</h3>
+        <p>
+          If you have any questions about this Privacy Policy, please contact
+          us:
+        </p>
+        <div>
+          By email:{' '}
+          <a href='mailto:support@flatlogic.com'> [support@flatlogic.com]</a>
+        </div>
+        <div>
+          By visiting this page on our website:{' '}
+          <a href='https://flatlogic.com/contact'>Contact Us</a>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className='prose prose-slate mx-auto max-w-none'>
+      <Head>
+        <title>{getPageTitle('Privacy Policy')}</title>
+      </Head>
+
+      <div className='flex justify-center'>
+        <div className='z-10 md:w-10/12 my-4 bg-white border border-pavitra-400 rounded'>
+          <div className='p-8 lg:px-12 lg:py-10'>
+            <h1>Privacy Policy</h1>
+            <Introduction />
+            <Information />
+            <HowToUser />
+            <DataProtection />
+            <Sharing />
+            <ProtectionRights />
+            <DataTransfers />
+            <RetentionOfData />
+            <ChangePrivacy />
+            <ContactUs />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+PrivacyPolicy.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/product_categories/[product_categoriesId].tsx b/frontend/src/pages/product_categories/[product_categoriesId].tsx
new file mode 100644
index 0000000..b0ac69a
--- /dev/null
+++ b/frontend/src/pages/product_categories/[product_categoriesId].tsx
@@ -0,0 +1,576 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/product_categories/product_categoriesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditProduct_categories = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'category_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'category_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { product_categories } = useAppSelector((state) => state.product_categories)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { product_categoriesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: product_categoriesId }))
+  }, [product_categoriesId])
+
+  useEffect(() => {
+    if (typeof product_categories === 'object') {
+      setInitialValues(product_categories)
+    }
+  }, [product_categories])
+
+  useEffect(() => {
+      if (typeof product_categories === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (product_categories)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [product_categories])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: product_categoriesId, data }))
+    await router.push('/product_categories/product_categories-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit product_categories')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit product_categories'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="CategoryName"
+    >
+        <Field
+            name="category_name"
+            placeholder="CategoryName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="CategoryCode"
+    >
+        <Field
+            name="category_code"
+            placeholder="CategoryCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/product_categories/product_categories-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditProduct_categories.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditProduct_categories
diff --git a/frontend/src/pages/product_categories/product_categories-edit.tsx b/frontend/src/pages/product_categories/product_categories-edit.tsx
new file mode 100644
index 0000000..2e394bc
--- /dev/null
+++ b/frontend/src/pages/product_categories/product_categories-edit.tsx
@@ -0,0 +1,573 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/product_categories/product_categoriesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditProduct_categoriesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'category_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'category_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { product_categories } = useAppSelector((state) => state.product_categories)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof product_categories === 'object') {
+      setInitialValues(product_categories)
+    }
+  }, [product_categories])
+
+  useEffect(() => {
+      if (typeof product_categories === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (product_categories)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [product_categories])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/product_categories/product_categories-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit product_categories')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit product_categories'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="CategoryName"
+    >
+        <Field
+            name="category_name"
+            placeholder="CategoryName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="CategoryCode"
+    >
+        <Field
+            name="category_code"
+            placeholder="CategoryCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/product_categories/product_categories-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditProduct_categoriesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditProduct_categoriesPage
diff --git a/frontend/src/pages/product_categories/product_categories-list.tsx b/frontend/src/pages/product_categories/product_categories-list.tsx
new file mode 100644
index 0000000..80b59da
--- /dev/null
+++ b/frontend/src/pages/product_categories/product_categories-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableProduct_categories from '../../components/Product_categories/TableProduct_categories'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/product_categories/product_categoriesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Product_categoriesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'CategoryName', title: 'category_name'},{label: 'CategoryCode', title: 'category_code'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCT_CATEGORIES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getProduct_categoriesCSV = async () => {
+        const response = await axios({url: '/product_categories?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'product_categoriesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Product_categories')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Product_categories" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/product_categories/product_categories-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProduct_categoriesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/product_categories/product_categories-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableProduct_categories
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Product_categoriesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Product_categoriesTablesPage
diff --git a/frontend/src/pages/product_categories/product_categories-new.tsx b/frontend/src/pages/product_categories/product_categories-new.tsx
new file mode 100644
index 0000000..76c0b4a
--- /dev/null
+++ b/frontend/src/pages/product_categories/product_categories-new.tsx
@@ -0,0 +1,332 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/product_categories/product_categoriesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    category_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    category_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Product_categoriesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/product_categories/product_categories-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="CategoryName"
+  >
+      <Field
+          name="category_name"
+          placeholder="CategoryName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="CategoryCode"
+  >
+      <Field
+          name="category_code"
+          placeholder="CategoryCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/product_categories/product_categories-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Product_categoriesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Product_categoriesNew
diff --git a/frontend/src/pages/product_categories/product_categories-table.tsx b/frontend/src/pages/product_categories/product_categories-table.tsx
new file mode 100644
index 0000000..1540e26
--- /dev/null
+++ b/frontend/src/pages/product_categories/product_categories-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableProduct_categories from '../../components/Product_categories/TableProduct_categories'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/product_categories/product_categoriesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Product_categoriesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'CategoryName', title: 'category_name'},{label: 'CategoryCode', title: 'category_code'},{label: 'Description', title: 'description'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCT_CATEGORIES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getProduct_categoriesCSV = async () => {
+        const response = await axios({url: '/product_categories?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'product_categoriesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Product_categories')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Product_categories" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/product_categories/product_categories-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProduct_categoriesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/product_categories/product_categories-list'}>
+                Back to <span className='capitalize'>list</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableProduct_categories
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Product_categoriesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Product_categoriesTablesPage
diff --git a/frontend/src/pages/product_categories/product_categories-view.tsx b/frontend/src/pages/product_categories/product_categories-view.tsx
new file mode 100644
index 0000000..890b58d
--- /dev/null
+++ b/frontend/src/pages/product_categories/product_categories-view.tsx
@@ -0,0 +1,534 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/product_categories/product_categoriesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Product_categoriesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { product_categories } = useAppSelector((state) => state.product_categories)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View product_categories')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View product_categories')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/product_categories/product_categories-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{product_categories?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>CategoryName</p>
+                    <p>{product_categories?.category_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>CategoryCode</p>
+                    <p>{product_categories?.category_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={product_categories?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{product_categories?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Products Category</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ProductName</th>
+                                
+                                
+                                
+                                <th>SKU</th>
+                                
+                                
+                                
+                                <th>Barcode</th>
+                                
+                                
+                                
+                                <th>ProductType</th>
+                                
+                                
+                                
+                                <th>UnitofMeasure</th>
+                                
+                                
+                                
+                                <th>StandardCost</th>
+                                
+                                
+                                
+                                <th>PurchasePrice</th>
+                                
+                                
+                                
+                                <th>SalesPrice</th>
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {product_categories.products_category && Array.isArray(product_categories.products_category) &&
+                              product_categories.products_category.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/products/products-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="product_name">
+                                        { item.product_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sku">
+                                        { item.sku }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="barcode">
+                                        { item.barcode }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="product_type">
+                                        { item.product_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="uom">
+                                        { item.uom }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="standard_cost">
+                                        { item.standard_cost }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="purchase_price">
+                                        { item.purchase_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="sales_price">
+                                        { item.sales_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!product_categories?.products_category?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/product_categories/product_categories-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Product_categoriesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCT_CATEGORIES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Product_categoriesView;
\ No newline at end of file
diff --git a/frontend/src/pages/products/[productsId].tsx b/frontend/src/pages/products/[productsId].tsx
new file mode 100644
index 0000000..f900140
--- /dev/null
+++ b/frontend/src/pages/products/[productsId].tsx
@@ -0,0 +1,1242 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/products/productsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditProducts = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    category: null,
+    
+
+    
+    
+    
+    'product_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'sku': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'barcode': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'uom': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'standard_cost': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'purchase_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'sales_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    images: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { products } = useAppSelector((state) => state.products)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { productsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: productsId }))
+  }, [productsId])
+
+  useEffect(() => {
+    if (typeof products === 'object') {
+      setInitialValues(products)
+    }
+  }, [products])
+
+  useEffect(() => {
+      if (typeof products === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (products)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [products])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: productsId, data }))
+    await router.push('/products/products-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit products')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit products'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Category' labelFor='category'>
+        <Field
+            name='category'
+            id='category'
+            component={SelectField}
+            options={initialValues.category}
+            itemRef={'product_categories'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'category_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="ProductName"
+    >
+        <Field
+            name="product_name"
+            placeholder="ProductName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="SKU"
+    >
+        <Field
+            name="sku"
+            placeholder="SKU"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Barcode"
+    >
+        <Field
+            name="barcode"
+            placeholder="Barcode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="ProductType" labelFor="product_type">
+        <Field name="product_type" id="product_type" component="select">
+          
+            <option value="stock">stock</option>
+          
+            <option value="service">service</option>
+          
+            <option value="consumable">consumable</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="UnitofMeasure"
+    >
+        <Field
+            name="uom"
+            placeholder="UnitofMeasure"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="StandardCost"
+    >
+        <Field
+            type="number"
+            name="standard_cost"
+            placeholder="StandardCost"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="PurchasePrice"
+    >
+        <Field
+            type="number"
+            name="purchase_price"
+            placeholder="PurchasePrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="SalesPrice"
+    >
+        <Field
+            type="number"
+            name="sales_price"
+            placeholder="SalesPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Images'
+                color='info'
+                icon={mdiUpload}
+                path={'products/images'}
+                name='images'
+                id='images'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Description' hasTextareaHeight>
+        <Field
+            name='description'
+            id='description'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/products/products-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditProducts.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditProducts
diff --git a/frontend/src/pages/products/products-edit.tsx b/frontend/src/pages/products/products-edit.tsx
new file mode 100644
index 0000000..633b9ce
--- /dev/null
+++ b/frontend/src/pages/products/products-edit.tsx
@@ -0,0 +1,1239 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/products/productsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditProductsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    category: null,
+    
+
+    
+    
+    
+    'product_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'sku': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'barcode': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product_type: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'uom': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'standard_cost': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'purchase_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'sales_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    images: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { products } = useAppSelector((state) => state.products)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof products === 'object') {
+      setInitialValues(products)
+    }
+  }, [products])
+
+  useEffect(() => {
+      if (typeof products === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (products)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [products])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/products/products-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit products')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit products'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Category' labelFor='category'>
+        <Field
+            name='category'
+            id='category'
+            component={SelectField}
+            options={initialValues.category}
+            itemRef={'product_categories'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'category_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="ProductName"
+    >
+        <Field
+            name="product_name"
+            placeholder="ProductName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="SKU"
+    >
+        <Field
+            name="sku"
+            placeholder="SKU"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Barcode"
+    >
+        <Field
+            name="barcode"
+            placeholder="Barcode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="ProductType" labelFor="product_type">
+        <Field name="product_type" id="product_type" component="select">
+          
+            <option value="stock">stock</option>
+          
+            <option value="service">service</option>
+          
+            <option value="consumable">consumable</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="UnitofMeasure"
+    >
+        <Field
+            name="uom"
+            placeholder="UnitofMeasure"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="StandardCost"
+    >
+        <Field
+            type="number"
+            name="standard_cost"
+            placeholder="StandardCost"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="PurchasePrice"
+    >
+        <Field
+            type="number"
+            name="purchase_price"
+            placeholder="PurchasePrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="SalesPrice"
+    >
+        <Field
+            type="number"
+            name="sales_price"
+            placeholder="SalesPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Images'
+                color='info'
+                icon={mdiUpload}
+                path={'products/images'}
+                name='images'
+                id='images'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Description' hasTextareaHeight>
+        <Field
+            name='description'
+            id='description'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/products/products-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditProductsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditProductsPage
diff --git a/frontend/src/pages/products/products-list.tsx b/frontend/src/pages/products/products-list.tsx
new file mode 100644
index 0000000..df3d408
--- /dev/null
+++ b/frontend/src/pages/products/products-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableProducts from '../../components/Products/TableProducts'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/products/productsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const ProductsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'ProductName', title: 'product_name'},{label: 'SKU', title: 'sku'},{label: 'Barcode', title: 'barcode'},{label: 'UnitofMeasure', title: 'uom'},{label: 'Description', title: 'description'},
+          
+          {label: 'StandardCost', title: 'standard_cost', number: 'true'},{label: 'PurchasePrice', title: 'purchase_price', number: 'true'},{label: 'SalesPrice', title: 'sales_price', number: 'true'},
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Category', title: 'category'},
+    
+    
+          
+          {label: 'ProductType', title: 'product_type', type: 'enum', options: ['stock','service','consumable']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getProductsCSV = async () => {
+        const response = await axios({url: '/products?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'productsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Products')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Products" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/products/products-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProductsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableProducts
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+ProductsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ProductsTablesPage
diff --git a/frontend/src/pages/products/products-new.tsx b/frontend/src/pages/products/products-new.tsx
new file mode 100644
index 0000000..a0e104b
--- /dev/null
+++ b/frontend/src/pages/products/products-new.tsx
@@ -0,0 +1,803 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/products/productsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    category: '',
+    
+    
+    
+    
+    product_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    sku: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    barcode: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    product_type: 'stock',
+    
+    
+    
+    
+    
+    
+    
+    uom: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    standard_cost: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_price: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    sales_price: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    images: [],
+    
+    
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const ProductsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/products/products-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Category" labelFor="category">
+      <Field name="category" id="category" component={SelectField} options={[]} itemRef={'product_categories'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="ProductName"
+  >
+      <Field
+          name="product_name"
+          placeholder="ProductName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="SKU"
+  >
+      <Field
+          name="sku"
+          placeholder="SKU"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Barcode"
+  >
+      <Field
+          name="barcode"
+          placeholder="Barcode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="ProductType" labelFor="product_type">
+      <Field name="product_type" id="product_type" component="select">
+      
+        <option value="stock">stock</option>
+      
+        <option value="service">service</option>
+      
+        <option value="consumable">consumable</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="UnitofMeasure"
+  >
+      <Field
+          name="uom"
+          placeholder="UnitofMeasure"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="StandardCost"
+    >
+        <Field
+            type="number"
+            name="standard_cost"
+            placeholder="StandardCost"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="PurchasePrice"
+    >
+        <Field
+            type="number"
+            name="purchase_price"
+            placeholder="PurchasePrice"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="SalesPrice"
+    >
+        <Field
+            type="number"
+            name="sales_price"
+            placeholder="SalesPrice"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Images'
+          color='info'
+          icon={mdiUpload}
+          path={'products/images'}
+          name='images'
+          id='images'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormImagePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+      <FormField label='Description' hasTextareaHeight>
+          <Field
+              name='description'
+              id='description'
+              component={RichTextField}
+          ></Field>
+      </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/products/products-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+ProductsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ProductsNew
diff --git a/frontend/src/pages/products/products-table.tsx b/frontend/src/pages/products/products-table.tsx
new file mode 100644
index 0000000..4c06c4e
--- /dev/null
+++ b/frontend/src/pages/products/products-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableProducts from '../../components/Products/TableProducts'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/products/productsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const ProductsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'ProductName', title: 'product_name'},{label: 'SKU', title: 'sku'},{label: 'Barcode', title: 'barcode'},{label: 'UnitofMeasure', title: 'uom'},{label: 'Description', title: 'description'},
+          
+          {label: 'StandardCost', title: 'standard_cost', number: 'true'},{label: 'PurchasePrice', title: 'purchase_price', number: 'true'},{label: 'SalesPrice', title: 'sales_price', number: 'true'},
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Category', title: 'category'},
+    
+    
+              
+          {label: 'ProductType', title: 'product_type', type: 'enum', options: ['stock','service','consumable']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getProductsCSV = async () => {
+        const response = await axios({url: '/products?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'productsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Products')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Products" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/products/products-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProductsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/products/products-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableProducts
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+ProductsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ProductsTablesPage
diff --git a/frontend/src/pages/products/products-view.tsx b/frontend/src/pages/products/products-view.tsx
new file mode 100644
index 0000000..81c1a19
--- /dev/null
+++ b/frontend/src/pages/products/products-view.tsx
@@ -0,0 +1,1108 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/products/productsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const ProductsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { products } = useAppSelector((state) => state.products)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View products')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View products')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/products/products-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{products?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Category</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{products?.category?.category_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ProductName</p>
+                    <p>{products?.product_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>SKU</p>
+                    <p>{products?.sku}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Barcode</p>
+                    <p>{products?.barcode}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ProductType</p>
+                    <p>{products?.product_type ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>UnitofMeasure</p>
+                    <p>{products?.uom}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>StandardCost</p>
+                  <p>{products?.standard_cost || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>PurchasePrice</p>
+                  <p>{products?.purchase_price || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>SalesPrice</p>
+                  <p>{products?.sales_price || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: products?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Images</p>
+                    {products?.images?.length
+                      ? (
+                        <ImageField
+                          name={'images'}
+                          image={products?.images}
+                          className='w-20 h-20'
+                        />
+                      ) : <p>No Images</p>
+                    }
+                </div>
+              
+
+              
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Description</p>
+                  {products.description
+                    ? <p dangerouslySetInnerHTML={{__html: products.description}}/>
+                    : <p>No data</p>
+                  }
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{products?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisition_lines Product</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPriceEstimate</th>
+                                
+                                
+                                
+                                <th>LineTotalEstimate</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {products.purchase_requisition_lines_product && Array.isArray(products.purchase_requisition_lines_product) &&
+                              products.purchase_requisition_lines_product.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price_estimate">
+                                        { item.unit_price_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total_estimate">
+                                        { item.line_total_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!products?.purchase_requisition_lines_product?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_order_lines Product</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>DiscountRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {products.purchase_order_lines_product && Array.isArray(products.purchase_order_lines_product) &&
+                              products.purchase_order_lines_product.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_rate">
+                                        { item.discount_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!products?.purchase_order_lines_product?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipt_lines Product</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>QuantityReceived</th>
+                                
+                                
+                                
+                                <th>QuantityAccepted</th>
+                                
+                                
+                                
+                                <th>QuantityRejected</th>
+                                
+                                
+                                
+                                <th>QualityNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {products.goods_receipt_lines_product && Array.isArray(products.goods_receipt_lines_product) &&
+                              products.goods_receipt_lines_product.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_received">
+                                        { item.quantity_received }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_accepted">
+                                        { item.quantity_accepted }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_rejected">
+                                        { item.quantity_rejected }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quality_notes">
+                                        { item.quality_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!products?.goods_receipt_lines_product?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Invoice_lines Product</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {products.invoice_lines_product && Array.isArray(products.invoice_lines_product) &&
+                              products.invoice_lines_product.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/invoice_lines/invoice_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!products?.invoice_lines_product?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/products/products-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+ProductsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PRODUCTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default ProductsView;
\ No newline at end of file
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
new file mode 100644
index 0000000..f5eb7cf
--- /dev/null
+++ b/frontend/src/pages/profile.tsx
@@ -0,0 +1,180 @@
+import {
+    mdiChartTimelineVariant,
+    mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import CardBox from '../components/CardBox';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import BaseButton from '../components/BaseButton';
+import FormCheckRadio from '../components/FormCheckRadio';
+import FormCheckRadioGroup from '../components/FormCheckRadioGroup';
+import FormImagePicker from '../components/FormImagePicker';
+import { SwitchField } from '../components/SwitchField';
+import { SelectField } from '../components/SelectField';
+
+import { update, fetch } from '../stores/users/usersSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { useRouter } from 'next/router';
+import {findMe} from "../stores/authSlice";
+
+const EditUsers = () => {
+    const { currentUser, isFetching, token } = useAppSelector(
+        (state) => state.auth,
+    );
+    const router = useRouter();
+    const dispatch = useAppDispatch();
+    const notify = (type, msg) => toast(msg, { type });
+    const initVals = {
+        firstName: '',
+        lastName: '',
+        phoneNumber: '',
+        email: '',
+        app_role: '',
+        disabled: false,
+        avatar: [],
+        password: ''
+    };
+    const [initialValues, setInitialValues] = useState(initVals);
+
+    useEffect(() => {
+        if (currentUser?.id && typeof currentUser === 'object') {
+            const newInitialVal = { ...initVals };
+
+            Object.keys(initVals).forEach(
+                (el) => (newInitialVal[el] = currentUser[el]),
+            );
+
+            setInitialValues(newInitialVal);
+        }
+    }, [currentUser]);
+
+    const handleSubmit = async (data) => {
+        await dispatch(update({ id: currentUser.id, data }));
+        await dispatch(findMe());
+        await router.push('/users/users-list');
+        notify('success', 'Profile was updated!');
+    };
+
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Edit profile')}</title>
+            </Head>
+            <SectionMain>
+                <SectionTitleLineWithButton
+                    icon={mdiChartTimelineVariant}
+                    title='Edit profile'
+                    main
+                >
+                    {''}
+                </SectionTitleLineWithButton>
+                <CardBox>
+                    {currentUser?.avatar[0]?.publicUrl && <div className={'grid grid-cols-6 gap-4 mb-4'}>
+                        <div className="col-span-1 w-80 h-80 overflow-hidden border-2 rounded-full inline-flex items-center justify-center mb-8">
+                            <img className="w-80 h-80 max-w-full max-h-full object-cover object-center"  src={`${currentUser?.avatar[0]?.publicUrl}`} alt="Avatar" />
+                        </div>
+                    </div>}
+                    <Formik
+                        enableReinitialize
+                        initialValues={initialValues}
+                        onSubmit={(values) => handleSubmit(values)}
+                    >
+                        <Form>
+                            <FormField>
+                                <Field
+                                    label='Avatar'
+                                    color='info'
+                                    icon={mdiUpload}
+                                    path={'users/avatar'}
+                                    name='avatar'
+                                    id='avatar'
+                                    schema={{
+                                        size: undefined,
+                                        formats: undefined,
+                                    }}
+                                    component={FormImagePicker}
+                                ></Field>
+                            </FormField>
+                            <FormField label='First Name'>
+                                <Field name='firstName' placeholder='First Name' />
+                            </FormField>
+
+                            <FormField label='Last Name'>
+                                <Field name='lastName' placeholder='Last Name' />
+                            </FormField>
+
+                            <FormField label='Phone Number'>
+                                <Field name='phoneNumber' placeholder='Phone Number' />
+                            </FormField>
+
+                            <FormField label='E-Mail'>
+                                <Field name='email' placeholder='E-Mail' disabled />
+                            </FormField>
+
+                            <FormField label='App Role' labelFor='app_role'>
+                              <Field
+                                name='app_role'
+                                id='app_role'
+                                component={SelectField}
+                                options={initialValues.app_role}
+                                itemRef={'roles'}
+                                showField={'name'}
+                              ></Field>
+                            </FormField>
+
+                            <FormField label='Disabled' labelFor='disabled'>
+                                <Field
+                                    name='disabled'
+                                    id='disabled'
+                                    component={SwitchField}
+                                ></Field>
+                            </FormField>
+
+                            <FormField
+                                label="Password"
+                            >
+                                <Field
+                                    name="password"
+                                    placeholder="password"
+                                />
+                            </FormField>
+
+                            <BaseDivider />
+
+                            <BaseButtons>
+                                <BaseButton type='submit' color='info' label='Submit' />
+                                <BaseButton type='reset' color='info' outline label='Reset' />
+                                <BaseButton
+                                    type='reset'
+                                    color='danger'
+                                    outline
+                                    label='Cancel'
+                                    onClick={() => router.push('/users/users-list')}
+                                />
+                            </BaseButtons>
+                        </Form>
+                    </Formik>
+                </CardBox>
+            </SectionMain>
+        </>
+    );
+};
+
+EditUsers.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default EditUsers;
diff --git a/frontend/src/pages/purchase_order_lines/[purchase_order_linesId].tsx b/frontend/src/pages/purchase_order_lines/[purchase_order_linesId].tsx
new file mode 100644
index 0000000..c7663fa
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/[purchase_order_linesId].tsx
@@ -0,0 +1,1036 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_order_lines/purchase_order_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_order_lines = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'discount_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_order_lines } = useAppSelector((state) => state.purchase_order_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { purchase_order_linesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: purchase_order_linesId }))
+  }, [purchase_order_linesId])
+
+  useEffect(() => {
+    if (typeof purchase_order_lines === 'object') {
+      setInitialValues(purchase_order_lines)
+    }
+  }, [purchase_order_lines])
+
+  useEffect(() => {
+      if (typeof purchase_order_lines === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_order_lines)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_order_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: purchase_order_linesId, data }))
+    await router.push('/purchase_order_lines/purchase_order_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_order_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_order_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="DiscountRate"
+    >
+        <Field
+            type="number"
+            name="discount_rate"
+            placeholder="DiscountRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_order_lines/purchase_order_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_order_lines.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_order_lines
diff --git a/frontend/src/pages/purchase_order_lines/purchase_order_lines-edit.tsx b/frontend/src/pages/purchase_order_lines/purchase_order_lines-edit.tsx
new file mode 100644
index 0000000..592c398
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/purchase_order_lines-edit.tsx
@@ -0,0 +1,1033 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_order_lines/purchase_order_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_order_linesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'discount_rate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_order_lines } = useAppSelector((state) => state.purchase_order_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof purchase_order_lines === 'object') {
+      setInitialValues(purchase_order_lines)
+    }
+  }, [purchase_order_lines])
+
+  useEffect(() => {
+      if (typeof purchase_order_lines === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_order_lines)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_order_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/purchase_order_lines/purchase_order_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_order_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_order_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="DiscountRate"
+    >
+        <Field
+            type="number"
+            name="discount_rate"
+            placeholder="DiscountRate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_order_lines/purchase_order_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_order_linesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_order_linesPage
diff --git a/frontend/src/pages/purchase_order_lines/purchase_order_lines-list.tsx b/frontend/src/pages/purchase_order_lines/purchase_order_lines-list.tsx
new file mode 100644
index 0000000..b765664
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/purchase_order_lines-list.tsx
@@ -0,0 +1,174 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_order_lines from '../../components/Purchase_order_lines/TablePurchase_order_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_order_lines/purchase_order_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_order_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPrice', title: 'unit_price', number: 'true'},{label: 'TaxRate', title: 'tax_rate', number: 'true'},{label: 'DiscountRate', title: 'discount_rate', number: 'true'},{label: 'LineTotal', title: 'line_total', number: 'true'},
+          
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_ORDER_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_order_linesCSV = async () => {
+        const response = await axios({url: '/purchase_order_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_order_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_order_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_order_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_order_lines/purchase_order_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_order_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_order_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_order_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_order_linesTablesPage
diff --git a/frontend/src/pages/purchase_order_lines/purchase_order_lines-new.tsx b/frontend/src/pages/purchase_order_lines/purchase_order_lines-new.tsx
new file mode 100644
index 0000000..8415b87
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/purchase_order_lines-new.tsx
@@ -0,0 +1,582 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/purchase_order_lines/purchase_order_linesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_order: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    product: '',
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quantity: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    unit_price: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    tax_rate: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    discount_rate: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    line_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    warehouse: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Purchase_order_linesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/purchase_order_lines/purchase_order_lines-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="PurchaseOrder" labelFor="purchase_order">
+      <Field name="purchase_order" id="purchase_order" component={SelectField} options={[]} itemRef={'purchase_orders'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Product" labelFor="product">
+      <Field name="product" id="product" component={SelectField} options={[]} itemRef={'products'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="UnitPrice"
+    >
+        <Field
+            type="number"
+            name="unit_price"
+            placeholder="UnitPrice"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="TaxRate"
+    >
+        <Field
+            type="number"
+            name="tax_rate"
+            placeholder="TaxRate"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="DiscountRate"
+    >
+        <Field
+            type="number"
+            name="discount_rate"
+            placeholder="DiscountRate"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="LineTotal"
+    >
+        <Field
+            type="number"
+            name="line_total"
+            placeholder="LineTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Warehouse" labelFor="warehouse">
+      <Field name="warehouse" id="warehouse" component={SelectField} options={[]} itemRef={'warehouses'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_order_lines/purchase_order_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Purchase_order_linesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_order_linesNew
diff --git a/frontend/src/pages/purchase_order_lines/purchase_order_lines-table.tsx b/frontend/src/pages/purchase_order_lines/purchase_order_lines-table.tsx
new file mode 100644
index 0000000..667ad61
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/purchase_order_lines-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_order_lines from '../../components/Purchase_order_lines/TablePurchase_order_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_order_lines/purchase_order_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_order_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPrice', title: 'unit_price', number: 'true'},{label: 'TaxRate', title: 'tax_rate', number: 'true'},{label: 'DiscountRate', title: 'discount_rate', number: 'true'},{label: 'LineTotal', title: 'line_total', number: 'true'},
+          
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_ORDER_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_order_linesCSV = async () => {
+        const response = await axios({url: '/purchase_order_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_order_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_order_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_order_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_order_lines/purchase_order_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_order_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/purchase_order_lines/purchase_order_lines-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_order_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_order_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_order_linesTablesPage
diff --git a/frontend/src/pages/purchase_order_lines/purchase_order_lines-view.tsx b/frontend/src/pages/purchase_order_lines/purchase_order_lines-view.tsx
new file mode 100644
index 0000000..9246683
--- /dev/null
+++ b/frontend/src/pages/purchase_order_lines/purchase_order_lines-view.tsx
@@ -0,0 +1,764 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/purchase_order_lines/purchase_order_linesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Purchase_order_linesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { purchase_order_lines } = useAppSelector((state) => state.purchase_order_lines)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View purchase_order_lines')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View purchase_order_lines')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/purchase_order_lines/purchase_order_lines-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PurchaseOrder</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_order_lines?.purchase_order?.po_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Product</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_order_lines?.product?.product_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={purchase_order_lines?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Quantity</p>
+                  <p>{purchase_order_lines?.quantity || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>UnitPrice</p>
+                  <p>{purchase_order_lines?.unit_price || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>TaxRate</p>
+                  <p>{purchase_order_lines?.tax_rate || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>DiscountRate</p>
+                  <p>{purchase_order_lines?.discount_rate || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>LineTotal</p>
+                  <p>{purchase_order_lines?.line_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Warehouse</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_order_lines?.warehouse?.warehouse_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_order_lines?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipt_lines POLine</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>QuantityReceived</th>
+                                
+                                
+                                
+                                <th>QuantityAccepted</th>
+                                
+                                
+                                
+                                <th>QuantityRejected</th>
+                                
+                                
+                                
+                                <th>QualityNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_order_lines.goods_receipt_lines_purchase_order_line && Array.isArray(purchase_order_lines.goods_receipt_lines_purchase_order_line) &&
+                              purchase_order_lines.goods_receipt_lines_purchase_order_line.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipt_lines/goods_receipt_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_received">
+                                        { item.quantity_received }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_accepted">
+                                        { item.quantity_accepted }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity_rejected">
+                                        { item.quantity_rejected }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quality_notes">
+                                        { item.quality_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_order_lines?.goods_receipt_lines_purchase_order_line?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/purchase_order_lines/purchase_order_lines-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Purchase_order_linesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDER_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Purchase_order_linesView;
\ No newline at end of file
diff --git a/frontend/src/pages/purchase_orders/[purchase_ordersId].tsx b/frontend/src/pages/purchase_orders/[purchase_ordersId].tsx
new file mode 100644
index 0000000..24c6fb7
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/[purchase_ordersId].tsx
@@ -0,0 +1,1533 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_orders/purchase_ordersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_orders = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'po_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    buyer: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    source_requisition: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    order_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    expected_delivery_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    currency: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'subtotal': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'discount_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'grand_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_orders } = useAppSelector((state) => state.purchase_orders)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { purchase_ordersId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: purchase_ordersId }))
+  }, [purchase_ordersId])
+
+  useEffect(() => {
+    if (typeof purchase_orders === 'object') {
+      setInitialValues(purchase_orders)
+    }
+  }, [purchase_orders])
+
+  useEffect(() => {
+      if (typeof purchase_orders === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_orders)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_orders])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: purchase_ordersId, data }))
+    await router.push('/purchase_orders/purchase_orders-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_orders')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_orders'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PONumber"
+    >
+        <Field
+            name="po_number"
+            placeholder="PONumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Buyer' labelFor='buyer'>
+        <Field
+            name='buyer'
+            id='buyer'
+            component={SelectField}
+            options={initialValues.buyer}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='SourceRequisition' labelFor='source_requisition'>
+        <Field
+            name='source_requisition'
+            id='source_requisition'
+            component={SelectField}
+            options={initialValues.source_requisition}
+            itemRef={'purchase_requisitions'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'requisition_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="OrderDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.order_date ?
+                  new Date(
+                      dayjs(initialValues.order_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'order_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ExpectedDeliveryDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.expected_delivery_date ?
+                  new Date(
+                      dayjs(initialValues.expected_delivery_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'expected_delivery_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="sent">sent</option>
+          
+            <option value="confirmed">confirmed</option>
+          
+            <option value="partially_received">partially_received</option>
+          
+            <option value="received">received</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+            <option value="closed">closed</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Currency" labelFor="currency">
+        <Field name="currency" id="currency" component="select">
+          
+            <option value="USD">USD</option>
+          
+            <option value="EUR">EUR</option>
+          
+            <option value="GBP">GBP</option>
+          
+            <option value="AED">AED</option>
+          
+            <option value="SAR">SAR</option>
+          
+            <option value="INR">INR</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="DiscountTotal"
+    >
+        <Field
+            type="number"
+            name="discount_total"
+            placeholder="DiscountTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Notes' hasTextareaHeight>
+        <Field
+            name='notes'
+            id='notes'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'purchase_orders/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_orders/purchase_orders-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_orders.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_orders
diff --git a/frontend/src/pages/purchase_orders/purchase_orders-edit.tsx b/frontend/src/pages/purchase_orders/purchase_orders-edit.tsx
new file mode 100644
index 0000000..fa4a402
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/purchase_orders-edit.tsx
@@ -0,0 +1,1530 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_orders/purchase_ordersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_ordersPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'po_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    buyer: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    source_requisition: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    order_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    expected_delivery_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    currency: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'subtotal': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'discount_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'grand_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_orders } = useAppSelector((state) => state.purchase_orders)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof purchase_orders === 'object') {
+      setInitialValues(purchase_orders)
+    }
+  }, [purchase_orders])
+
+  useEffect(() => {
+      if (typeof purchase_orders === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_orders)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_orders])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/purchase_orders/purchase_orders-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_orders')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_orders'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PONumber"
+    >
+        <Field
+            name="po_number"
+            placeholder="PONumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Buyer' labelFor='buyer'>
+        <Field
+            name='buyer'
+            id='buyer'
+            component={SelectField}
+            options={initialValues.buyer}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='SourceRequisition' labelFor='source_requisition'>
+        <Field
+            name='source_requisition'
+            id='source_requisition'
+            component={SelectField}
+            options={initialValues.source_requisition}
+            itemRef={'purchase_requisitions'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'requisition_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="OrderDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.order_date ?
+                  new Date(
+                      dayjs(initialValues.order_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'order_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="ExpectedDeliveryDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.expected_delivery_date ?
+                  new Date(
+                      dayjs(initialValues.expected_delivery_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'expected_delivery_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="sent">sent</option>
+          
+            <option value="confirmed">confirmed</option>
+          
+            <option value="partially_received">partially_received</option>
+          
+            <option value="received">received</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+            <option value="closed">closed</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Currency" labelFor="currency">
+        <Field name="currency" id="currency" component="select">
+          
+            <option value="USD">USD</option>
+          
+            <option value="EUR">EUR</option>
+          
+            <option value="GBP">GBP</option>
+          
+            <option value="AED">AED</option>
+          
+            <option value="SAR">SAR</option>
+          
+            <option value="INR">INR</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="DiscountTotal"
+    >
+        <Field
+            type="number"
+            name="discount_total"
+            placeholder="DiscountTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Notes' hasTextareaHeight>
+        <Field
+            name='notes'
+            id='notes'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'purchase_orders/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_orders/purchase_orders-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_ordersPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_ordersPage
diff --git a/frontend/src/pages/purchase_orders/purchase_orders-list.tsx b/frontend/src/pages/purchase_orders/purchase_orders-list.tsx
new file mode 100644
index 0000000..f4bbff7
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/purchase_orders-list.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_orders from '../../components/Purchase_orders/TablePurchase_orders'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_orders/purchase_ordersSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_ordersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'PONumber', title: 'po_number'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'TaxTotal', title: 'tax_total', number: 'true'},{label: 'DiscountTotal', title: 'discount_total', number: 'true'},{label: 'GrandTotal', title: 'grand_total', number: 'true'},
+          {label: 'OrderDate', title: 'order_date', date: 'true'},{label: 'ExpectedDeliveryDate', title: 'expected_delivery_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'Buyer', title: 'buyer'},
+    
+    
+    
+    {label: 'SourceRequisition', title: 'source_requisition'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','sent','confirmed','partially_received','received','cancelled','closed']},{label: 'Currency', title: 'currency', type: 'enum', options: ['USD','EUR','GBP','AED','SAR','INR']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_ORDERS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_ordersCSV = async () => {
+        const response = await axios({url: '/purchase_orders?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_ordersCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_orders')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_orders" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_orders/purchase_orders-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_ordersCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/purchase_orders/purchase_orders-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+          <TablePurchase_orders
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_ordersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_ordersTablesPage
diff --git a/frontend/src/pages/purchase_orders/purchase_orders-new.tsx b/frontend/src/pages/purchase_orders/purchase_orders-new.tsx
new file mode 100644
index 0000000..35c2e50
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/purchase_orders-new.tsx
@@ -0,0 +1,917 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/purchase_orders/purchase_ordersSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    po_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    buyer: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    source_requisition: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    order_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    expected_delivery_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'draft',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    currency: 'USD',
+    
+    
+    
+    
+    
+    
+    
+    subtotal: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    tax_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    discount_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    grand_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    attachments: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Purchase_ordersNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/purchase_orders/purchase_orders-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PONumber"
+  >
+      <Field
+          name="po_number"
+          placeholder="PONumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Vendor" labelFor="vendor">
+      <Field name="vendor" id="vendor" component={SelectField} options={[]} itemRef={'vendors'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Buyer" labelFor="buyer">
+      <Field name="buyer" id="buyer" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="SourceRequisition" labelFor="source_requisition">
+      <Field name="source_requisition" id="source_requisition" component={SelectField} options={[]} itemRef={'purchase_requisitions'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="OrderDate"
+  >
+      <Field
+          type="datetime-local"
+          name="order_date"
+          placeholder="OrderDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="ExpectedDeliveryDate"
+  >
+      <Field
+          type="datetime-local"
+          name="expected_delivery_date"
+          placeholder="ExpectedDeliveryDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="draft">draft</option>
+      
+        <option value="sent">sent</option>
+      
+        <option value="confirmed">confirmed</option>
+      
+        <option value="partially_received">partially_received</option>
+      
+        <option value="received">received</option>
+      
+        <option value="cancelled">cancelled</option>
+      
+        <option value="closed">closed</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Currency" labelFor="currency">
+      <Field name="currency" id="currency" component="select">
+      
+        <option value="USD">USD</option>
+      
+        <option value="EUR">EUR</option>
+      
+        <option value="GBP">GBP</option>
+      
+        <option value="AED">AED</option>
+      
+        <option value="SAR">SAR</option>
+      
+        <option value="INR">INR</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="DiscountTotal"
+    >
+        <Field
+            type="number"
+            name="discount_total"
+            placeholder="DiscountTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      <FormField label='Notes' hasTextareaHeight>
+          <Field
+              name='notes'
+              id='notes'
+              component={RichTextField}
+          ></Field>
+      </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Attachments'
+          color='info'
+          icon={mdiUpload}
+          path={'purchase_orders/attachments'}
+          name='attachments'
+          id='attachments'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_orders/purchase_orders-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Purchase_ordersNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_ordersNew
diff --git a/frontend/src/pages/purchase_orders/purchase_orders-table.tsx b/frontend/src/pages/purchase_orders/purchase_orders-table.tsx
new file mode 100644
index 0000000..0ca12fc
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/purchase_orders-table.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_orders from '../../components/Purchase_orders/TablePurchase_orders'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_orders/purchase_ordersSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_ordersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'PONumber', title: 'po_number'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'TaxTotal', title: 'tax_total', number: 'true'},{label: 'DiscountTotal', title: 'discount_total', number: 'true'},{label: 'GrandTotal', title: 'grand_total', number: 'true'},
+          {label: 'OrderDate', title: 'order_date', date: 'true'},{label: 'ExpectedDeliveryDate', title: 'expected_delivery_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'Buyer', title: 'buyer'},
+    
+    
+    
+    {label: 'SourceRequisition', title: 'source_requisition'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','sent','confirmed','partially_received','received','cancelled','closed']},{label: 'Currency', title: 'currency', type: 'enum', options: ['USD','EUR','GBP','AED','SAR','INR']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_ORDERS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_ordersCSV = async () => {
+        const response = await axios({url: '/purchase_orders?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_ordersCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_orders')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_orders" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_orders/purchase_orders-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_ordersCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/purchase_orders/purchase_orders-list'}>
+                Back to <span className='capitalize'>kanban</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_orders
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_ordersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_ordersTablesPage
diff --git a/frontend/src/pages/purchase_orders/purchase_orders-view.tsx b/frontend/src/pages/purchase_orders/purchase_orders-view.tsx
new file mode 100644
index 0000000..ac16e54
--- /dev/null
+++ b/frontend/src/pages/purchase_orders/purchase_orders-view.tsx
@@ -0,0 +1,1295 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/purchase_orders/purchase_ordersSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Purchase_ordersView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { purchase_orders } = useAppSelector((state) => state.purchase_orders)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View purchase_orders')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View purchase_orders')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/purchase_orders/purchase_orders-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_orders?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PONumber</p>
+                    <p>{purchase_orders?.po_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Vendor</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_orders?.vendor?.vendor_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Buyer</p>
+                    
+                    
+                        <p>{purchase_orders?.buyer?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>SourceRequisition</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_orders?.source_requisition?.requisition_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='OrderDate'>
+                    {purchase_orders.order_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={purchase_orders.order_date ?
+                        new Date(
+                          dayjs(purchase_orders.order_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No OrderDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='ExpectedDeliveryDate'>
+                    {purchase_orders.expected_delivery_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={purchase_orders.expected_delivery_date ?
+                        new Date(
+                          dayjs(purchase_orders.expected_delivery_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No ExpectedDeliveryDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{purchase_orders?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Currency</p>
+                    <p>{purchase_orders?.currency ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Subtotal</p>
+                  <p>{purchase_orders?.subtotal || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>TaxTotal</p>
+                  <p>{purchase_orders?.tax_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>DiscountTotal</p>
+                  <p>{purchase_orders?.discount_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>GrandTotal</p>
+                  <p>{purchase_orders?.grand_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Notes</p>
+                  {purchase_orders.notes
+                    ? <p dangerouslySetInnerHTML={{__html: purchase_orders.notes}}/>
+                    : <p>No data</p>
+                  }
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Attachments</p>
+                    {purchase_orders?.attachments?.length
+                      ? dataFormatter.filesFormatter(purchase_orders.attachments).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No Attachments</p>
+                    }
+                </div>
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_orders?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_order_lines PurchaseOrder</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>DiscountRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_orders.purchase_order_lines_purchase_order && Array.isArray(purchase_orders.purchase_order_lines_purchase_order) &&
+                              purchase_orders.purchase_order_lines_purchase_order.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_rate">
+                                        { item.discount_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_orders?.purchase_order_lines_purchase_order?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipts PurchaseOrder</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>GRNNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ReceiptDate</th>
+                                
+                                
+                                
+                                <th>PostedDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Remarks</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_orders.goods_receipts_purchase_order && Array.isArray(purchase_orders.goods_receipts_purchase_order) &&
+                              purchase_orders.goods_receipts_purchase_order.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipts/goods_receipts-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="grn_number">
+                                        { item.grn_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="receipt_date">
+                                        { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="posted_date">
+                                        { dataFormatter.dateTimeFormatter(item.posted_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="remarks">
+                                        { item.remarks }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_orders?.goods_receipts_purchase_order?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendor_invoices PurchaseOrder</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>InvoiceNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>InvoiceDate</th>
+                                
+                                
+                                
+                                <th>DueDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_orders.vendor_invoices_purchase_order && Array.isArray(purchase_orders.vendor_invoices_purchase_order) &&
+                              purchase_orders.vendor_invoices_purchase_order.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendor_invoices/vendor_invoices-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_number">
+                                        { item.invoice_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_date">
+                                        { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="due_date">
+                                        { dataFormatter.dateTimeFormatter(item.due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_orders?.vendor_invoices_purchase_order?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/purchase_orders/purchase_orders-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Purchase_ordersView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_ORDERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Purchase_ordersView;
\ No newline at end of file
diff --git a/frontend/src/pages/purchase_requisition_lines/[purchase_requisition_linesId].tsx b/frontend/src/pages/purchase_requisition_lines/[purchase_requisition_linesId].tsx
new file mode 100644
index 0000000..9f3fef5
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/[purchase_requisition_linesId].tsx
@@ -0,0 +1,904 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_requisition_lines = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_requisition: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price_estimate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total_estimate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_requisition_lines } = useAppSelector((state) => state.purchase_requisition_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { purchase_requisition_linesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: purchase_requisition_linesId }))
+  }, [purchase_requisition_linesId])
+
+  useEffect(() => {
+    if (typeof purchase_requisition_lines === 'object') {
+      setInitialValues(purchase_requisition_lines)
+    }
+  }, [purchase_requisition_lines])
+
+  useEffect(() => {
+      if (typeof purchase_requisition_lines === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_requisition_lines)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_requisition_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: purchase_requisition_linesId, data }))
+    await router.push('/purchase_requisition_lines/purchase_requisition_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_requisition_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_requisition_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseRequisition' labelFor='purchase_requisition'>
+        <Field
+            name='purchase_requisition'
+            id='purchase_requisition'
+            component={SelectField}
+            options={initialValues.purchase_requisition}
+            itemRef={'purchase_requisitions'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'requisition_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPriceEstimate"
+    >
+        <Field
+            type="number"
+            name="unit_price_estimate"
+            placeholder="UnitPriceEstimate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotalEstimate"
+    >
+        <Field
+            type="number"
+            name="line_total_estimate"
+            placeholder="LineTotalEstimate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisition_lines/purchase_requisition_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_requisition_lines.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_requisition_lines
diff --git a/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-edit.tsx b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-edit.tsx
new file mode 100644
index 0000000..9350e39
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-edit.tsx
@@ -0,0 +1,901 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_requisition_linesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_requisition: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    product: null,
+    
+
+    
+    
+    
+
+    
+    description: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'quantity': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'unit_price_estimate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'line_total_estimate': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    warehouse: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_requisition_lines } = useAppSelector((state) => state.purchase_requisition_lines)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof purchase_requisition_lines === 'object') {
+      setInitialValues(purchase_requisition_lines)
+    }
+  }, [purchase_requisition_lines])
+
+  useEffect(() => {
+      if (typeof purchase_requisition_lines === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_requisition_lines)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_requisition_lines])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/purchase_requisition_lines/purchase_requisition_lines-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_requisition_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_requisition_lines'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseRequisition' labelFor='purchase_requisition'>
+        <Field
+            name='purchase_requisition'
+            id='purchase_requisition'
+            component={SelectField}
+            options={initialValues.purchase_requisition}
+            itemRef={'purchase_requisitions'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'requisition_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Product' labelFor='product'>
+        <Field
+            name='product'
+            id='product'
+            component={SelectField}
+            options={initialValues.product}
+            itemRef={'products'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'product_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="UnitPriceEstimate"
+    >
+        <Field
+            type="number"
+            name="unit_price_estimate"
+            placeholder="UnitPriceEstimate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="LineTotalEstimate"
+    >
+        <Field
+            type="number"
+            name="line_total_estimate"
+            placeholder="LineTotalEstimate"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Warehouse' labelFor='warehouse'>
+        <Field
+            name='warehouse'
+            id='warehouse'
+            component={SelectField}
+            options={initialValues.warehouse}
+            itemRef={'warehouses'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'warehouse_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisition_lines/purchase_requisition_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_requisition_linesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_requisition_linesPage
diff --git a/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-list.tsx b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-list.tsx
new file mode 100644
index 0000000..9520abe
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-list.tsx
@@ -0,0 +1,174 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_requisition_lines from '../../components/Purchase_requisition_lines/TablePurchase_requisition_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_requisition_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPriceEstimate', title: 'unit_price_estimate', number: 'true'},{label: 'LineTotalEstimate', title: 'line_total_estimate', number: 'true'},
+          
+    
+    
+    {label: 'PurchaseRequisition', title: 'purchase_requisition'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_REQUISITION_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_requisition_linesCSV = async () => {
+        const response = await axios({url: '/purchase_requisition_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_requisition_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_requisition_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_requisition_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_requisition_lines/purchase_requisition_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_requisition_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_requisition_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_requisition_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisition_linesTablesPage
diff --git a/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-new.tsx b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-new.tsx
new file mode 100644
index 0000000..66a4bae
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-new.tsx
@@ -0,0 +1,478 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_requisition: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    product: '',
+    
+    
+    
+    
+    
+    description: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    quantity: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    unit_price_estimate: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    line_total_estimate: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    warehouse: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Purchase_requisition_linesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/purchase_requisition_lines/purchase_requisition_lines-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="PurchaseRequisition" labelFor="purchase_requisition">
+      <Field name="purchase_requisition" id="purchase_requisition" component={SelectField} options={[]} itemRef={'purchase_requisitions'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Product" labelFor="product">
+      <Field name="product" id="product" component={SelectField} options={[]} itemRef={'products'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Description" hasTextareaHeight>
+        <Field name="description" as="textarea" placeholder="Description" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Quantity"
+    >
+        <Field
+            type="number"
+            name="quantity"
+            placeholder="Quantity"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="UnitPriceEstimate"
+    >
+        <Field
+            type="number"
+            name="unit_price_estimate"
+            placeholder="UnitPriceEstimate"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="LineTotalEstimate"
+    >
+        <Field
+            type="number"
+            name="line_total_estimate"
+            placeholder="LineTotalEstimate"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Warehouse" labelFor="warehouse">
+      <Field name="warehouse" id="warehouse" component={SelectField} options={[]} itemRef={'warehouses'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisition_lines/purchase_requisition_lines-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Purchase_requisition_linesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisition_linesNew
diff --git a/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-table.tsx b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-table.tsx
new file mode 100644
index 0000000..22f009c
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_requisition_lines from '../../components/Purchase_requisition_lines/TablePurchase_requisition_lines'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_requisition_linesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Description', title: 'description'},
+          
+          {label: 'Quantity', title: 'quantity', number: 'true'},{label: 'UnitPriceEstimate', title: 'unit_price_estimate', number: 'true'},{label: 'LineTotalEstimate', title: 'line_total_estimate', number: 'true'},
+          
+    
+    
+    {label: 'PurchaseRequisition', title: 'purchase_requisition'},
+    
+    
+    
+    {label: 'Product', title: 'product'},
+    
+    
+    
+    {label: 'Warehouse', title: 'warehouse'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_REQUISITION_LINES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_requisition_linesCSV = async () => {
+        const response = await axios({url: '/purchase_requisition_lines?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_requisition_linesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_requisition_lines')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_requisition_lines" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_requisition_lines/purchase_requisition_lines-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_requisition_linesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/purchase_requisition_lines/purchase_requisition_lines-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_requisition_lines
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_requisition_linesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisition_linesTablesPage
diff --git a/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-view.tsx b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-view.tsx
new file mode 100644
index 0000000..28b6be2
--- /dev/null
+++ b/frontend/src/pages/purchase_requisition_lines/purchase_requisition_lines-view.tsx
@@ -0,0 +1,621 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/purchase_requisition_lines/purchase_requisition_linesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Purchase_requisition_linesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { purchase_requisition_lines } = useAppSelector((state) => state.purchase_requisition_lines)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View purchase_requisition_lines')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View purchase_requisition_lines')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/purchase_requisition_lines/purchase_requisition_lines-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PurchaseRequisition</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisition_lines?.purchase_requisition?.requisition_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Product</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisition_lines?.product?.product_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={purchase_requisition_lines?.description} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Quantity</p>
+                  <p>{purchase_requisition_lines?.quantity || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>UnitPriceEstimate</p>
+                  <p>{purchase_requisition_lines?.unit_price_estimate || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>LineTotalEstimate</p>
+                  <p>{purchase_requisition_lines?.line_total_estimate || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Warehouse</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisition_lines?.warehouse?.warehouse_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisition_lines?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/purchase_requisition_lines/purchase_requisition_lines-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Purchase_requisition_linesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITION_LINES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Purchase_requisition_linesView;
\ No newline at end of file
diff --git a/frontend/src/pages/purchase_requisitions/[purchase_requisitionsId].tsx b/frontend/src/pages/purchase_requisitions/[purchase_requisitionsId].tsx
new file mode 100644
index 0000000..8f7c5ca
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/[purchase_requisitionsId].tsx
@@ -0,0 +1,1125 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_requisitions/purchase_requisitionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_requisitions = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'requisition_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    department: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    needed_by: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    reason: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'estimated_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_requisitions } = useAppSelector((state) => state.purchase_requisitions)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { purchase_requisitionsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: purchase_requisitionsId }))
+  }, [purchase_requisitionsId])
+
+  useEffect(() => {
+    if (typeof purchase_requisitions === 'object') {
+      setInitialValues(purchase_requisitions)
+    }
+  }, [purchase_requisitions])
+
+  useEffect(() => {
+      if (typeof purchase_requisitions === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_requisitions)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_requisitions])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: purchase_requisitionsId, data }))
+    await router.push('/purchase_requisitions/purchase_requisitions-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_requisitions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_requisitions'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="RequisitionNumber"
+    >
+        <Field
+            name="requisition_number"
+            placeholder="RequisitionNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='RequestedBy' labelFor='requested_by'>
+        <Field
+            name='requested_by'
+            id='requested_by'
+            component={SelectField}
+            options={initialValues.requested_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Department' labelFor='department'>
+        <Field
+            name='department'
+            id='department'
+            component={SelectField}
+            options={initialValues.department}
+            itemRef={'departments'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'department_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="RequestedDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.requested_date ?
+                  new Date(
+                      dayjs(initialValues.requested_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'requested_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="NeededBy"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.needed_by ?
+                  new Date(
+                      dayjs(initialValues.needed_by).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'needed_by': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+            <option value="converted_to_po">converted_to_po</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Reason" hasTextareaHeight>
+        <Field name="reason" as="textarea" placeholder="Reason" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="EstimatedTotal"
+    >
+        <Field
+            type="number"
+            name="estimated_total"
+            placeholder="EstimatedTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'purchase_requisitions/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisitions/purchase_requisitions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_requisitions.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_requisitions
diff --git a/frontend/src/pages/purchase_requisitions/purchase_requisitions-edit.tsx b/frontend/src/pages/purchase_requisitions/purchase_requisitions-edit.tsx
new file mode 100644
index 0000000..b2a98d1
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/purchase_requisitions-edit.tsx
@@ -0,0 +1,1122 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/purchase_requisitions/purchase_requisitionsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditPurchase_requisitionsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'requisition_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_by: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    department: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    requested_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    needed_by: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    reason: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'estimated_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    attachments: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { purchase_requisitions } = useAppSelector((state) => state.purchase_requisitions)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof purchase_requisitions === 'object') {
+      setInitialValues(purchase_requisitions)
+    }
+  }, [purchase_requisitions])
+
+  useEffect(() => {
+      if (typeof purchase_requisitions === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (purchase_requisitions)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [purchase_requisitions])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/purchase_requisitions/purchase_requisitions-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit purchase_requisitions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit purchase_requisitions'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="RequisitionNumber"
+    >
+        <Field
+            name="requisition_number"
+            placeholder="RequisitionNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='RequestedBy' labelFor='requested_by'>
+        <Field
+            name='requested_by'
+            id='requested_by'
+            component={SelectField}
+            options={initialValues.requested_by}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Department' labelFor='department'>
+        <Field
+            name='department'
+            id='department'
+            component={SelectField}
+            options={initialValues.department}
+            itemRef={'departments'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'department_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="RequestedDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.requested_date ?
+                  new Date(
+                      dayjs(initialValues.requested_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'requested_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="NeededBy"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.needed_by ?
+                  new Date(
+                      dayjs(initialValues.needed_by).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'needed_by': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="cancelled">cancelled</option>
+          
+            <option value="converted_to_po">converted_to_po</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Reason" hasTextareaHeight>
+        <Field name="reason" as="textarea" placeholder="Reason" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="EstimatedTotal"
+    >
+        <Field
+            type="number"
+            name="estimated_total"
+            placeholder="EstimatedTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='Attachments'
+            color='info'
+            icon={mdiUpload}
+            path={'purchase_requisitions/attachments'}
+            name='attachments'
+            id='attachments'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisitions/purchase_requisitions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditPurchase_requisitionsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditPurchase_requisitionsPage
diff --git a/frontend/src/pages/purchase_requisitions/purchase_requisitions-list.tsx b/frontend/src/pages/purchase_requisitions/purchase_requisitions-list.tsx
new file mode 100644
index 0000000..86e73ee
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/purchase_requisitions-list.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_requisitions from '../../components/Purchase_requisitions/TablePurchase_requisitions'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_requisitions/purchase_requisitionsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_requisitionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'RequisitionNumber', title: 'requisition_number'},{label: 'Reason', title: 'reason'},
+          
+          {label: 'EstimatedTotal', title: 'estimated_total', number: 'true'},
+          {label: 'RequestedDate', title: 'requested_date', date: 'true'},{label: 'NeededBy', title: 'needed_by', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'RequestedBy', title: 'requested_by'},
+    
+    
+    
+    {label: 'Department', title: 'department'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','approved','rejected','cancelled','converted_to_po']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_REQUISITIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_requisitionsCSV = async () => {
+        const response = await axios({url: '/purchase_requisitions?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_requisitionsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_requisitions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_requisitions" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_requisitions/purchase_requisitions-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_requisitionsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/purchase_requisitions/purchase_requisitions-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+          <TablePurchase_requisitions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_requisitionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisitionsTablesPage
diff --git a/frontend/src/pages/purchase_requisitions/purchase_requisitions-new.tsx b/frontend/src/pages/purchase_requisitions/purchase_requisitions-new.tsx
new file mode 100644
index 0000000..e7812e6
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/purchase_requisitions-new.tsx
@@ -0,0 +1,648 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/purchase_requisitions/purchase_requisitionsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    requisition_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    requested_by: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    department: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    requested_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    needed_by: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'draft',
+    
+    
+    
+    
+    
+    
+    
+    
+    reason: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    estimated_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    attachments: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Purchase_requisitionsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/purchase_requisitions/purchase_requisitions-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="RequisitionNumber"
+  >
+      <Field
+          name="requisition_number"
+          placeholder="RequisitionNumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="RequestedBy" labelFor="requested_by">
+      <Field name="requested_by" id="requested_by" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Department" labelFor="department">
+      <Field name="department" id="department" component={SelectField} options={[]} itemRef={'departments'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="RequestedDate"
+  >
+      <Field
+          type="datetime-local"
+          name="requested_date"
+          placeholder="RequestedDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="NeededBy"
+  >
+      <Field
+          type="datetime-local"
+          name="needed_by"
+          placeholder="NeededBy"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="draft">draft</option>
+      
+        <option value="submitted">submitted</option>
+      
+        <option value="approved">approved</option>
+      
+        <option value="rejected">rejected</option>
+      
+        <option value="cancelled">cancelled</option>
+      
+        <option value="converted_to_po">converted_to_po</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Reason" hasTextareaHeight>
+        <Field name="reason" as="textarea" placeholder="Reason" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="EstimatedTotal"
+    >
+        <Field
+            type="number"
+            name="estimated_total"
+            placeholder="EstimatedTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Attachments'
+          color='info'
+          icon={mdiUpload}
+          path={'purchase_requisitions/attachments'}
+          name='attachments'
+          id='attachments'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/purchase_requisitions/purchase_requisitions-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Purchase_requisitionsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisitionsNew
diff --git a/frontend/src/pages/purchase_requisitions/purchase_requisitions-table.tsx b/frontend/src/pages/purchase_requisitions/purchase_requisitions-table.tsx
new file mode 100644
index 0000000..b458041
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/purchase_requisitions-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TablePurchase_requisitions from '../../components/Purchase_requisitions/TablePurchase_requisitions'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/purchase_requisitions/purchase_requisitionsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Purchase_requisitionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'RequisitionNumber', title: 'requisition_number'},{label: 'Reason', title: 'reason'},
+          
+          {label: 'EstimatedTotal', title: 'estimated_total', number: 'true'},
+          {label: 'RequestedDate', title: 'requested_date', date: 'true'},{label: 'NeededBy', title: 'needed_by', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'RequestedBy', title: 'requested_by'},
+    
+    
+    
+    {label: 'Department', title: 'department'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','approved','rejected','cancelled','converted_to_po']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PURCHASE_REQUISITIONS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getPurchase_requisitionsCSV = async () => {
+        const response = await axios({url: '/purchase_requisitions?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'purchase_requisitionsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Purchase_requisitions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase_requisitions" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/purchase_requisitions/purchase_requisitions-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getPurchase_requisitionsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/purchase_requisitions/purchase_requisitions-list'}>
+                Back to <span className='capitalize'>kanban</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TablePurchase_requisitions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Purchase_requisitionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Purchase_requisitionsTablesPage
diff --git a/frontend/src/pages/purchase_requisitions/purchase_requisitions-view.tsx b/frontend/src/pages/purchase_requisitions/purchase_requisitions-view.tsx
new file mode 100644
index 0000000..90486b6
--- /dev/null
+++ b/frontend/src/pages/purchase_requisitions/purchase_requisitions-view.tsx
@@ -0,0 +1,962 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/purchase_requisitions/purchase_requisitionsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Purchase_requisitionsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { purchase_requisitions } = useAppSelector((state) => state.purchase_requisitions)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View purchase_requisitions')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View purchase_requisitions')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/purchase_requisitions/purchase_requisitions-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisitions?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>RequisitionNumber</p>
+                    <p>{purchase_requisitions?.requisition_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>RequestedBy</p>
+                    
+                    
+                        <p>{purchase_requisitions?.requested_by?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Department</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisitions?.department?.department_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='RequestedDate'>
+                    {purchase_requisitions.requested_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={purchase_requisitions.requested_date ?
+                        new Date(
+                          dayjs(purchase_requisitions.requested_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No RequestedDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='NeededBy'>
+                    {purchase_requisitions.needed_by ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={purchase_requisitions.needed_by ?
+                        new Date(
+                          dayjs(purchase_requisitions.needed_by).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No NeededBy</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{purchase_requisitions?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={purchase_requisitions?.reason} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>EstimatedTotal</p>
+                  <p>{purchase_requisitions?.estimated_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Attachments</p>
+                    {purchase_requisitions?.attachments?.length
+                      ? dataFormatter.filesFormatter(purchase_requisitions.attachments).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No Attachments</p>
+                    }
+                </div>
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{purchase_requisitions?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisition_lines PurchaseRequisition</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPriceEstimate</th>
+                                
+                                
+                                
+                                <th>LineTotalEstimate</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_requisitions.purchase_requisition_lines_purchase_requisition && Array.isArray(purchase_requisitions.purchase_requisition_lines_purchase_requisition) &&
+                              purchase_requisitions.purchase_requisition_lines_purchase_requisition.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price_estimate">
+                                        { item.unit_price_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total_estimate">
+                                        { item.line_total_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_requisitions?.purchase_requisition_lines_purchase_requisition?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_orders SourceRequisition</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PONumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>OrderDate</th>
+                                
+                                
+                                
+                                <th>ExpectedDeliveryDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>DiscountTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {purchase_requisitions.purchase_orders_source_requisition && Array.isArray(purchase_requisitions.purchase_orders_source_requisition) &&
+                              purchase_requisitions.purchase_orders_source_requisition.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_orders/purchase_orders-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="po_number">
+                                        { item.po_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="order_date">
+                                        { dataFormatter.dateTimeFormatter(item.order_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="expected_delivery_date">
+                                        { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_total">
+                                        { item.discount_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!purchase_requisitions?.purchase_orders_source_requisition?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/purchase_requisitions/purchase_requisitions-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Purchase_requisitionsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_PURCHASE_REQUISITIONS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Purchase_requisitionsView;
\ No newline at end of file
diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx
new file mode 100644
index 0000000..cebbf75
--- /dev/null
+++ b/frontend/src/pages/register.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+
+import Select from 'react-select'; 
+import { useAppDispatch } from '../stores/hooks';
+import { createAsyncThunk } from '@reduxjs/toolkit';   
+
+import axios from "axios";
+
+export default function Register() {
+    const [loading, setLoading] = React.useState(false);
+    const router = useRouter();
+    const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const [organizations, setOrganizations] = React.useState(null);
+    const [selectedOrganization, setSelectedOrganization] = React.useState(null);
+    const dispatch = useAppDispatch();
+    const fetchOrganizations = createAsyncThunk(
+    '/org-for-auth',
+    async () => {
+      try {
+        const response = await axios.get('/org-for-auth');
+        setOrganizations(response.data);
+        return response.data;
+      } catch (error) {
+        console.error(error.response);
+        throw error;
+      }
+    }
+  );
+  React.useEffect(() => {
+    dispatch(fetchOrganizations());
+  }, [dispatch]);
+  const options = organizations?.map(org => ({
+    value: org.id,
+    label: org.name
+  }));
+
+
+    const handleSubmit = async (value) => {
+        setLoading(true)
+        try {
+            
+            const formData = { ...value, organizationId: selectedOrganization.value };
+            
+            const { data: response } = await axios.post('/auth/signup',formData);
+            await router.push('/login')
+            setLoading(false)
+            notify('success', 'Please check your email for verification link')
+        } catch (error) {
+            setLoading(false)
+            console.log('error: ', error)
+            notify('error', 'Something was wrong. Try again')
+        }
+    };
+
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Login')}</title>
+            </Head>
+
+            <SectionFullScreen bg='violet'>
+                <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+                    <Formik
+                        initialValues={{
+                            email: '',
+                            password: '',
+                            confirm: ''
+                        }}
+                        onSubmit={(values) => handleSubmit(values)}
+                    >
+                        <Form>
+                         
+                            <label className="block font-bold mb-2" >Organization</label>
+                           
+                            <Select
+                               classNames={{
+                                 control: () => 'px-1 mb-4 py-2',
+                               }}
+                               value={selectedOrganization}
+                               onChange={setSelectedOrganization}
+                               options={options}
+                               placeholder="Select organization..."
+                            />  
+                            
+                            <FormField label='Email' help='Please enter your email'>
+                                <Field type='email' name='email' />
+                            </FormField>
+                            <FormField label='Password' help='Please enter your password'>
+                                <Field type='password' name='password' />
+                            </FormField>
+                            <FormField label='Confirm Password' help='Please confirm your password'>
+                                <Field type='password' name='confirm' />
+                            </FormField>
+
+                            <BaseDivider />
+
+                            <BaseButtons>
+                                <BaseButton
+                                    type='submit'
+                                    label={loading ? 'Loading...' : 'Register' }
+                                    color='info'
+                                />
+                                <BaseButton
+                                    href={'/login'}
+                                    label={'Login'}
+                                    color='info'
+                                />
+                            </BaseButtons>
+                        </Form>
+                    </Formik>
+                </CardBox>
+            </SectionFullScreen>
+            <ToastContainer />
+        </>
+    );
+}
+
+Register.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/role_permission_mappings/[role_permission_mappingsId].tsx b/frontend/src/pages/role_permission_mappings/[role_permission_mappingsId].tsx
new file mode 100644
index 0000000..5901d54
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/[role_permission_mappingsId].tsx
@@ -0,0 +1,580 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/role_permission_mappings/role_permission_mappingsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditRole_permission_mappings = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    permission: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_allowed: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { role_permission_mappings } = useAppSelector((state) => state.role_permission_mappings)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { role_permission_mappingsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: role_permission_mappingsId }))
+  }, [role_permission_mappingsId])
+
+  useEffect(() => {
+    if (typeof role_permission_mappings === 'object') {
+      setInitialValues(role_permission_mappings)
+    }
+  }, [role_permission_mappings])
+
+  useEffect(() => {
+      if (typeof role_permission_mappings === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (role_permission_mappings)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [role_permission_mappings])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: role_permission_mappingsId, data }))
+    await router.push('/role_permission_mappings/role_permission_mappings-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit role_permission_mappings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit role_permission_mappings'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Role' labelFor='role'>
+        <Field
+            name='role'
+            id='role'
+            component={SelectField}
+            options={initialValues.role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Permission' labelFor='permission'>
+        <Field
+            name='permission'
+            id='permission'
+            component={SelectField}
+            options={initialValues.permission}
+            itemRef={'permissions'}
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsAllowed' labelFor='is_allowed'>
+        <Field
+            name='is_allowed'
+            id='is_allowed'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/role_permission_mappings/role_permission_mappings-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditRole_permission_mappings.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditRole_permission_mappings
diff --git a/frontend/src/pages/role_permission_mappings/role_permission_mappings-edit.tsx b/frontend/src/pages/role_permission_mappings/role_permission_mappings-edit.tsx
new file mode 100644
index 0000000..e3e98ee
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/role_permission_mappings-edit.tsx
@@ -0,0 +1,577 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/role_permission_mappings/role_permission_mappingsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditRole_permission_mappingsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    permission: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_allowed: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { role_permission_mappings } = useAppSelector((state) => state.role_permission_mappings)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof role_permission_mappings === 'object') {
+      setInitialValues(role_permission_mappings)
+    }
+  }, [role_permission_mappings])
+
+  useEffect(() => {
+      if (typeof role_permission_mappings === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (role_permission_mappings)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [role_permission_mappings])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/role_permission_mappings/role_permission_mappings-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit role_permission_mappings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit role_permission_mappings'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Role' labelFor='role'>
+        <Field
+            name='role'
+            id='role'
+            component={SelectField}
+            options={initialValues.role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Permission' labelFor='permission'>
+        <Field
+            name='permission'
+            id='permission'
+            component={SelectField}
+            options={initialValues.permission}
+            itemRef={'permissions'}
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsAllowed' labelFor='is_allowed'>
+        <Field
+            name='is_allowed'
+            id='is_allowed'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/role_permission_mappings/role_permission_mappings-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditRole_permission_mappingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditRole_permission_mappingsPage
diff --git a/frontend/src/pages/role_permission_mappings/role_permission_mappings-list.tsx b/frontend/src/pages/role_permission_mappings/role_permission_mappings-list.tsx
new file mode 100644
index 0000000..96a8310
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/role_permission_mappings-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableRole_permission_mappings from '../../components/Role_permission_mappings/TableRole_permission_mappings'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/role_permission_mappings/role_permission_mappingsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Role_permission_mappingsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([
+          
+          
+          
+    
+    
+    {label: 'Role', title: 'role'},
+    
+    
+    
+    {label: 'Permission', title: 'permission'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ROLE_PERMISSION_MAPPINGS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getRole_permission_mappingsCSV = async () => {
+        const response = await axios({url: '/role_permission_mappings?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'role_permission_mappingsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Role_permission_mappings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Role_permission_mappings" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/role_permission_mappings/role_permission_mappings-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getRole_permission_mappingsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableRole_permission_mappings
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Role_permission_mappingsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Role_permission_mappingsTablesPage
diff --git a/frontend/src/pages/role_permission_mappings/role_permission_mappings-new.tsx b/frontend/src/pages/role_permission_mappings/role_permission_mappings-new.tsx
new file mode 100644
index 0000000..8f87640
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/role_permission_mappings-new.tsx
@@ -0,0 +1,280 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/role_permission_mappings/role_permission_mappingsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    role: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    permission: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_allowed: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Role_permission_mappingsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/role_permission_mappings/role_permission_mappings-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Role" labelFor="role">
+      <Field name="role" id="role" component={SelectField} options={[]} itemRef={'roles'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Permission" labelFor="permission">
+      <Field name="permission" id="permission" component={SelectField} options={[]} itemRef={'permissions'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsAllowed' labelFor='is_allowed'>
+      <Field
+          name='is_allowed'
+          id='is_allowed'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/role_permission_mappings/role_permission_mappings-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Role_permission_mappingsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Role_permission_mappingsNew
diff --git a/frontend/src/pages/role_permission_mappings/role_permission_mappings-table.tsx b/frontend/src/pages/role_permission_mappings/role_permission_mappings-table.tsx
new file mode 100644
index 0000000..3357165
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/role_permission_mappings-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableRole_permission_mappings from '../../components/Role_permission_mappings/TableRole_permission_mappings'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/role_permission_mappings/role_permission_mappingsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Role_permission_mappingsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([
+          
+          
+          
+    
+    
+    {label: 'Role', title: 'role'},
+    
+    
+    
+    {label: 'Permission', title: 'permission'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ROLE_PERMISSION_MAPPINGS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getRole_permission_mappingsCSV = async () => {
+        const response = await axios({url: '/role_permission_mappings?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'role_permission_mappingsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Role_permission_mappings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Role_permission_mappings" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/role_permission_mappings/role_permission_mappings-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getRole_permission_mappingsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/role_permission_mappings/role_permission_mappings-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableRole_permission_mappings
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Role_permission_mappingsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Role_permission_mappingsTablesPage
diff --git a/frontend/src/pages/role_permission_mappings/role_permission_mappings-view.tsx b/frontend/src/pages/role_permission_mappings/role_permission_mappings-view.tsx
new file mode 100644
index 0000000..48fb482
--- /dev/null
+++ b/frontend/src/pages/role_permission_mappings/role_permission_mappings-view.tsx
@@ -0,0 +1,435 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/role_permission_mappings/role_permission_mappingsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Role_permission_mappingsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { role_permission_mappings } = useAppSelector((state) => state.role_permission_mappings)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View role_permission_mappings')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View role_permission_mappings')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/role_permission_mappings/role_permission_mappings-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Role</p>
+                    
+                    
+                    
+                    
+                        <p>{role_permission_mappings?.role?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Permission</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{role_permission_mappings?.permission?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsAllowed'>
+                    <SwitchField
+                      field={{name: 'is_allowed', value: role_permission_mappings?.is_allowed}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{role_permission_mappings?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/role_permission_mappings/role_permission_mappings-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Role_permission_mappingsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLE_PERMISSION_MAPPINGS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Role_permission_mappingsView;
\ No newline at end of file
diff --git a/frontend/src/pages/roles/[rolesId].tsx b/frontend/src/pages/roles/[rolesId].tsx
new file mode 100644
index 0000000..ebe2981
--- /dev/null
+++ b/frontend/src/pages/roles/[rolesId].tsx
@@ -0,0 +1,382 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/roles/rolesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditRoles = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    permissions: [],
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    globalAccess: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { roles } = useAppSelector((state) => state.roles)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { rolesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: rolesId }))
+  }, [rolesId])
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      setInitialValues(roles)
+    }
+  }, [roles])
+
+  useEffect(() => {
+      if (typeof roles === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (roles)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [roles])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: rolesId, data }))
+    await router.push('/roles/roles-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit roles'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField label='Permissions' labelFor='permissions'>
+          <Field
+              name='permissions'
+              id='permissions'
+              component={SelectFieldMany}
+              options={initialValues.permissions}
+              itemRef={'permissions'}
+            
+            
+            
+            
+            
+            
+              showField={'name'}
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          ></Field>
+      </FormField>
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='Global Access' labelFor='globalAccess'>
+        <Field
+            name='globalAccess'
+            id='globalAccess'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/roles/roles-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditRoles.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditRoles
diff --git a/frontend/src/pages/roles/roles-edit.tsx b/frontend/src/pages/roles/roles-edit.tsx
new file mode 100644
index 0000000..6ad2b2b
--- /dev/null
+++ b/frontend/src/pages/roles/roles-edit.tsx
@@ -0,0 +1,379 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/roles/rolesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditRolesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    permissions: [],
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    globalAccess: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { roles } = useAppSelector((state) => state.roles)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      setInitialValues(roles)
+    }
+  }, [roles])
+
+  useEffect(() => {
+      if (typeof roles === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (roles)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [roles])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/roles/roles-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit roles'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField label='Permissions' labelFor='permissions'>
+          <Field
+              name='permissions'
+              id='permissions'
+              component={SelectFieldMany}
+              options={initialValues.permissions}
+              itemRef={'permissions'}
+            
+            
+            
+            
+            
+            
+              showField={'name'}
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          ></Field>
+      </FormField>
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='Global Access' labelFor='globalAccess'>
+        <Field
+            name='globalAccess'
+            id='globalAccess'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/roles/roles-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditRolesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditRolesPage
diff --git a/frontend/src/pages/roles/roles-list.tsx b/frontend/src/pages/roles/roles-list.tsx
new file mode 100644
index 0000000..7bfcda8
--- /dev/null
+++ b/frontend/src/pages/roles/roles-list.tsx
@@ -0,0 +1,162 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableRoles from '../../components/Roles/TableRoles'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/roles/rolesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const RolesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+          {label: 'Permissions', title: 'permissions'},
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ROLES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getRolesCSV = async () => {
+        const response = await axios({url: '/roles?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'rolesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Roles" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/roles/roles-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getRolesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableRoles
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+RolesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default RolesTablesPage
diff --git a/frontend/src/pages/roles/roles-new.tsx b/frontend/src/pages/roles/roles-new.tsx
new file mode 100644
index 0000000..48fbbe9
--- /dev/null
+++ b/frontend/src/pages/roles/roles-new.tsx
@@ -0,0 +1,245 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/roles/rolesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    permissions: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    globalAccess: false,
+    
+    
+    
+    
+    
+    
+    
+    
+}
+
+
+const RolesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/roles/roles-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="Name"
+  >
+      <Field
+          name="name"
+          placeholder="Name"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label='Permissions' labelFor='permissions'>
+        <Field
+            name='permissions'
+            id='permissions'
+            itemRef={'permissions'}
+            options={[]}
+            component={SelectFieldMany}>
+        </Field>
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='Global Access' labelFor='globalAccess'>
+      <Field
+          name='globalAccess'
+          id='globalAccess'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/roles/roles-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+RolesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default RolesNew
diff --git a/frontend/src/pages/roles/roles-table.tsx b/frontend/src/pages/roles/roles-table.tsx
new file mode 100644
index 0000000..ac487a8
--- /dev/null
+++ b/frontend/src/pages/roles/roles-table.tsx
@@ -0,0 +1,160 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableRoles from '../../components/Roles/TableRoles'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/roles/rolesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const RolesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+          
+          
+          
+    
+              {label: 'Permissions', title: 'permissions'},
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ROLES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getRolesCSV = async () => {
+        const response = await axios({url: '/roles?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'rolesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Roles" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/roles/roles-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getRolesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableRoles
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+RolesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default RolesTablesPage
diff --git a/frontend/src/pages/roles/roles-view.tsx b/frontend/src/pages/roles/roles-view.tsx
new file mode 100644
index 0000000..26b47b4
--- /dev/null
+++ b/frontend/src/pages/roles/roles-view.tsx
@@ -0,0 +1,603 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/roles/rolesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const RolesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { roles } = useAppSelector((state) => state.roles)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View roles')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View roles')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/roles/roles-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Name</p>
+                    <p>{roles?.name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <>
+                    <p className={'block font-bold mb-2'}>Permissions</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                    <th>Name</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {roles.permissions && Array.isArray(roles.permissions) &&
+                              roles.permissions.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/permissions/permissions-view/?id=${item.id}`)}>
+                                  
+                                    
+                                    
+                                  
+                                    
+                                    <td data-label="name">
+                                        { item.name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!roles?.permissions?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='Global Access'>
+                    <SwitchField
+                      field={{name: 'globalAccess', value: roles?.globalAccess}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Users App Role</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                <th>First Name</th>
+                                
+                                
+                                
+                                <th>Last Name</th>
+                                
+                                
+                                
+                                <th>Phone Number</th>
+                                
+                                
+                                
+                                <th>E-Mail</th>
+                                
+                                
+                                
+                                <th>Disabled</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {roles.users_app_role && Array.isArray(roles.users_app_role) &&
+                              roles.users_app_role.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    <td data-label="firstName">
+                                        { item.firstName }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="lastName">
+                                        { item.lastName }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="phoneNumber">
+                                        { item.phoneNumber }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="disabled">
+                                        { dataFormatter.booleanFormatter(item.disabled) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!roles?.users_app_role?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>User_role_assignments Role</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EffectiveFrom</th>
+                                
+                                
+                                
+                                <th>EffectiveTo</th>
+                                
+                                
+                                
+                                <th>IsPrimary</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {roles.user_role_assignments_role && Array.isArray(roles.user_role_assignments_role) &&
+                              roles.user_role_assignments_role.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/user_role_assignments/user_role_assignments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="effective_from">
+                                        { dataFormatter.dateTimeFormatter(item.effective_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="effective_to">
+                                        { dataFormatter.dateTimeFormatter(item.effective_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_primary">
+                                        { dataFormatter.booleanFormatter(item.is_primary) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!roles?.user_role_assignments_role?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Role_permission_mappings Role</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>IsAllowed</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {roles.role_permission_mappings_role && Array.isArray(roles.role_permission_mappings_role) &&
+                              roles.role_permission_mappings_role.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/role_permission_mappings/role_permission_mappings-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_allowed">
+                                        { dataFormatter.booleanFormatter(item.is_allowed) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!roles?.role_permission_mappings_role?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approval_steps ApproverRole</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>StepOrder</th>
+                                
+                                
+                                
+                                <th>StepName</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>MinAmount</th>
+                                
+                                
+                                
+                                <th>MaxAmount</th>
+                                
+                                
+                                
+                                <th>IsRequired</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {roles.approval_steps_approver_role && Array.isArray(roles.approval_steps_approver_role) &&
+                              roles.approval_steps_approver_role.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approval_steps/approval_steps-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="step_order">
+                                        { item.step_order }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="step_name">
+                                        { item.step_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="min_amount">
+                                        { item.min_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="max_amount">
+                                        { item.max_amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_required">
+                                        { dataFormatter.booleanFormatter(item.is_required) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!roles?.approval_steps_approver_role?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/roles/roles-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+RolesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_ROLES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default RolesView;
\ No newline at end of file
diff --git a/frontend/src/pages/search.tsx b/frontend/src/pages/search.tsx
new file mode 100644
index 0000000..00f5168
--- /dev/null
+++ b/frontend/src/pages/search.tsx
@@ -0,0 +1,96 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import Head from 'next/head';
+import 'react-datepicker/dist/react-datepicker.css';
+import { useAppDispatch } from '../stores/hooks';
+
+import { useAppSelector } from '../stores/hooks';
+
+import { useRouter } from 'next/router';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import SectionMain from '../components/SectionMain';
+import CardBox from '../components/CardBox';
+import SearchResults from '../components/SearchResults';
+import LoadingSpinner from '../components/LoadingSpinner';
+import BaseButton from '../components/BaseButton';
+import BaseDivider from '../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const SearchView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const searchQuery = router.query.query;
+  const [loading, setLoading] = useState(false);
+  const [searchResults, setSearchResults] = useState([]);
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const organizationsId = currentUser?.organizations?.id;
+  
+
+  useEffect(() => {
+    dispatch(fetchData());
+  }, [dispatch, searchQuery]);
+
+  const fetchData = createAsyncThunk('/search', async () => {
+    setLoading(true);
+    try {
+      const response = await axios.post('/search', { searchQuery , organizationsId});
+      setSearchResults(response.data);
+      setLoading(false);
+      return response.data;
+    } catch (error) {
+      console.error(error.response);
+      setLoading(false);
+      throw error;
+    }
+  });
+
+  const groupedResults = searchResults.reduce((acc, item) => {
+    const { tableName } = item;
+    acc[tableName] = acc[tableName] || [];
+    acc[tableName].push(item);
+    return acc;
+  }, {});
+
+  return (
+    <>
+      <Head>
+        <title>Search Result</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Search Result'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+        {loading ? <LoadingSpinner /> : <SearchResults
+            searchResults={groupedResults}
+            searchQuery={searchQuery}
+          />}
+          <BaseDivider />
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/dashboard')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+SearchView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated 
+    
+    permission={'CREATE_SEARCH'}
+     >{page}</LayoutAuthenticated>
+  );
+};
+
+export default SearchView;
diff --git a/frontend/src/pages/tables.tsx b/frontend/src/pages/tables.tsx
new file mode 100644
index 0000000..42c7c61
--- /dev/null
+++ b/frontend/src/pages/tables.tsx
@@ -0,0 +1,33 @@
+import {mdiChartTimelineVariant} from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../components/CardBox'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import TableSampleClients from '../components/TableSampleClients'
+import { getPageTitle } from '../config'
+
+const TablesPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Tables')}</title>
+      </Head>
+      <SectionMain>
+          <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Table" main>
+          {''}
+          </SectionTitleLineWithButton>
+        <CardBox className="mb-6" hasTable>
+          <TableSampleClients />
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+TablesPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default TablesPage
diff --git a/frontend/src/pages/terms-of-use.tsx b/frontend/src/pages/terms-of-use.tsx
new file mode 100644
index 0000000..560b6d0
--- /dev/null
+++ b/frontend/src/pages/terms-of-use.tsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+export default function PrivacyPolicy() {
+  const title = 'Modern ERP Redesign';
+  const [projectUrl, setProjectUrl] = useState('');
+
+  useEffect(() => {
+    setProjectUrl(location.origin);
+  }, []);
+
+  const Information = () => {
+    return (
+      <>
+        <h3>1. Acceptance of Terms</h3>
+        <div className=''>
+          <p>
+            By accessing and using our application, you agree to comply with and
+            be bound by these Terms of Use. If you do not agree to these terms,
+            please do not use the application.
+          </p>
+        </div>
+      </>
+    );
+  };
+
+  const ChangesTerms = () => {
+    return (
+      <>
+        <h3>2. Changes to Terms</h3>
+        <p>
+          We reserve the right to modify these Terms of Use at any time. Any
+          changes will be effective immediately upon posting. Your continued use
+          of the application after any such changes constitutes your acceptance
+          of the new terms.
+        </p>
+      </>
+    );
+  };
+
+  const UseApplication = () => {
+    return (
+      <>
+        <h3>3. Use of the Application</h3>
+        <p>
+          You agree to use the application only for lawful purposes and in a way
+          that does not infringe the rights of, restrict, or inhibit anyone
+          else’s use and enjoyment of the application. Prohibited behavior
+          includes harassing or causing distress or inconvenience to any other
+          user, transmitting obscene or offensive content, or disrupting the
+          normal flow of dialogue within the application.
+        </p>
+      </>
+    );
+  };
+
+  const IntellectualProperty = () => {
+    return (
+      <>
+        <h3>4. Intellectual Property</h3>
+        <p>
+          All content included on the application, such as text, graphics,
+          logos, images, and software, is the property of {title} or
+          its content suppliers and protected by international copyright laws.
+          Unauthorized use of the content may violate copyright, trademark, and
+          other laws.
+        </p>
+      </>
+    );
+  };
+
+  const UserContent = () => {
+    return (
+      <>
+        <h3>5. User Content</h3>
+        <p>
+          You are responsible for any content you upload, post, or otherwise
+          make available through the application. You grant {title}
+          a worldwide, irrevocable, non-exclusive, royalty-free license to use,
+          reproduce, modify, publish, and distribute such content for any
+          purpose.
+        </p>
+      </>
+    );
+  };
+
+  const Privacy = () => {
+    return (
+      <>
+        <h3>6. Privacy</h3>
+        <p>
+          Your privacy is important to us. Please review our Privacy Policy to
+          understand our practices regarding the collection, use, and disclosure
+          of your personal information.
+        </p>
+      </>
+    );
+  };
+
+  const Liability = () => {
+    return (
+      <>
+        <h3>7. Limitation of Liability</h3>
+        <p>
+          The application is provided “as is” and “as available” without any
+          warranties of any kind, either express or implied. {title}
+          does not warrant that the application will be uninterrupted or
+          error-free. In no event shall {title} be liable for any
+          damages arising out of your use of the application.
+        </p>
+      </>
+    );
+  };
+
+  const Indemnification = () => {
+    return (
+      <>
+        <h3>8. Indemnification</h3>
+        <p>
+          You agree to indemnify, defend, and hold harmless {title},
+          its officers, directors, employees, and agents from and against any
+          claims, liabilities, damages, losses, and expenses, including without
+          limitation reasonable legal and accounting fees, arising out of or in
+          any way connected with your access to or use of the application or
+          your violation of these Terms of Use.
+        </p>
+      </>
+    );
+  };
+
+  const Termination = () => {
+    return (
+      <>
+        <h3>9. Termination</h3>
+        <p>
+          We reserve the right to terminate or suspend your access to the
+          application at our sole discretion, without notice and without
+          liability, for any reason, including if we believe you have violated
+          these Terms of Use.
+        </p>
+      </>
+    );
+  };
+
+  const GoverningLaw = () => {
+    return (
+      <>
+        <h3>10. Governing Law</h3>
+        <p>
+          These Terms of Use are governed by and interpreted in accordance with
+          applicable laws, without regard to any conflict of law principles. You
+          agree to submit to the exclusive jurisdiction of the courts that have
+          authority to resolve any dispute arising from the use of the
+          application.
+                  </p>
+      </>
+    );
+  };
+
+  const ContactUs = () => {
+    return (
+      <>
+        <h3>11. Contact Information</h3>
+        <p>
+          If you have any questions about these Terms of Use, please contact us
+          at: <a href='mailto:support@flatlogic.com'> [support@flatlogic.com]</a>
+        </p>
+      </>
+    );
+  };
+
+  return (
+    <div className='prose prose-slate mx-auto max-w-none'>
+      <Head>
+        <title>{getPageTitle('Terms of Use')}</title>
+      </Head>
+
+      <div className='flex justify-center'>
+        <div className='z-10 md:w-10/12 my-4 bg-white border border-pavitra-400 rounded'>
+          <div className='p-8 lg:px-12 lg:py-10'>
+            <h1>Terms of Use</h1>
+
+            <Information />
+            <ChangesTerms />
+            <UseApplication />
+            <IntellectualProperty />
+            <UserContent />
+            <Privacy />
+            <Liability />
+            <Indemnification />
+            <Termination />
+            <GoverningLaw />
+            <ContactUs />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+PrivacyPolicy.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/ui_announcements/[ui_announcementsId].tsx b/frontend/src/pages/ui_announcements/[ui_announcementsId].tsx
new file mode 100644
index 0000000..db4c552
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/[ui_announcementsId].tsx
@@ -0,0 +1,793 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/ui_announcements/ui_announcementsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUi_announcements = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'headline': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    content: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    audience: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    publish_from: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    publish_to: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { ui_announcements } = useAppSelector((state) => state.ui_announcements)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { ui_announcementsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: ui_announcementsId }))
+  }, [ui_announcementsId])
+
+  useEffect(() => {
+    if (typeof ui_announcements === 'object') {
+      setInitialValues(ui_announcements)
+    }
+  }, [ui_announcements])
+
+  useEffect(() => {
+      if (typeof ui_announcements === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (ui_announcements)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [ui_announcements])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: ui_announcementsId, data }))
+    await router.push('/ui_announcements/ui_announcements-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit ui_announcements')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit ui_announcements'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Headline"
+    >
+        <Field
+            name="headline"
+            placeholder="Headline"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Content' hasTextareaHeight>
+        <Field
+            name='content'
+            id='content'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Audience" labelFor="audience">
+        <Field name="audience" id="audience" component="select">
+          
+            <option value="all_users">all_users</option>
+          
+            <option value="admins">admins</option>
+          
+            <option value="buyers">buyers</option>
+          
+            <option value="finance">finance</option>
+          
+            <option value="warehouse">warehouse</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PublishFrom"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.publish_from ?
+                  new Date(
+                      dayjs(initialValues.publish_from).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'publish_from': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PublishTo"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.publish_to ?
+                  new Date(
+                      dayjs(initialValues.publish_to).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'publish_to': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/ui_announcements/ui_announcements-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUi_announcements.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUi_announcements
diff --git a/frontend/src/pages/ui_announcements/ui_announcements-edit.tsx b/frontend/src/pages/ui_announcements/ui_announcements-edit.tsx
new file mode 100644
index 0000000..2fd4847
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/ui_announcements-edit.tsx
@@ -0,0 +1,790 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/ui_announcements/ui_announcementsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUi_announcementsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'headline': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    content: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    audience: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    publish_from: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    publish_to: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { ui_announcements } = useAppSelector((state) => state.ui_announcements)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof ui_announcements === 'object') {
+      setInitialValues(ui_announcements)
+    }
+  }, [ui_announcements])
+
+  useEffect(() => {
+      if (typeof ui_announcements === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (ui_announcements)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [ui_announcements])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/ui_announcements/ui_announcements-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit ui_announcements')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit ui_announcements'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Headline"
+    >
+        <Field
+            name="headline"
+            placeholder="Headline"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Content' hasTextareaHeight>
+        <Field
+            name='content'
+            id='content'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Audience" labelFor="audience">
+        <Field name="audience" id="audience" component="select">
+          
+            <option value="all_users">all_users</option>
+          
+            <option value="admins">admins</option>
+          
+            <option value="buyers">buyers</option>
+          
+            <option value="finance">finance</option>
+          
+            <option value="warehouse">warehouse</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PublishFrom"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.publish_from ?
+                  new Date(
+                      dayjs(initialValues.publish_from).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'publish_from': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="PublishTo"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.publish_to ?
+                  new Date(
+                      dayjs(initialValues.publish_to).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'publish_to': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/ui_announcements/ui_announcements-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUi_announcementsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUi_announcementsPage
diff --git a/frontend/src/pages/ui_announcements/ui_announcements-list.tsx b/frontend/src/pages/ui_announcements/ui_announcements-list.tsx
new file mode 100644
index 0000000..ea9cf31
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/ui_announcements-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUi_announcements from '../../components/Ui_announcements/TableUi_announcements'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/ui_announcements/ui_announcementsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Ui_announcementsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Headline', title: 'headline'},{label: 'Content', title: 'content'},
+          
+          
+          {label: 'PublishFrom', title: 'publish_from', date: 'true'},{label: 'PublishTo', title: 'publish_to', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          {label: 'Audience', title: 'audience', type: 'enum', options: ['all_users','admins','buyers','finance','warehouse']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_UI_ANNOUNCEMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUi_announcementsCSV = async () => {
+        const response = await axios({url: '/ui_announcements?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'ui_announcementsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Ui_announcements')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Ui_announcements" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/ui_announcements/ui_announcements-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUi_announcementsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/ui_announcements/ui_announcements-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableUi_announcements
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Ui_announcementsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Ui_announcementsTablesPage
diff --git a/frontend/src/pages/ui_announcements/ui_announcements-new.tsx b/frontend/src/pages/ui_announcements/ui_announcements-new.tsx
new file mode 100644
index 0000000..353d8f2
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/ui_announcements-new.tsx
@@ -0,0 +1,508 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/ui_announcements/ui_announcementsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    headline: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    content: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    audience: 'all_users',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    publish_from: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    publish_to: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Ui_announcementsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+    // get from url params
+    const { dateRangeStart, dateRangeEnd } = router.query
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/ui_announcements/ui_announcements-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                
+                
+                dateRangeStart && dateRangeEnd ?
+                {
+                    ...initialValues,
+                    publish_from: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
+                    publish_to: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
+                } : initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Headline"
+  >
+      <Field
+          name="headline"
+          placeholder="Headline"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      <FormField label='Content' hasTextareaHeight>
+          <Field
+              name='content'
+              id='content'
+              component={RichTextField}
+          ></Field>
+      </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Audience" labelFor="audience">
+      <Field name="audience" id="audience" component="select">
+      
+        <option value="all_users">all_users</option>
+      
+        <option value="admins">admins</option>
+      
+        <option value="buyers">buyers</option>
+      
+        <option value="finance">finance</option>
+      
+        <option value="warehouse">warehouse</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PublishFrom"
+  >
+      <Field
+          type="datetime-local"
+          name="publish_from"
+          placeholder="PublishFrom"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PublishTo"
+  >
+      <Field
+          type="datetime-local"
+          name="publish_to"
+          placeholder="PublishTo"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/ui_announcements/ui_announcements-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Ui_announcementsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Ui_announcementsNew
diff --git a/frontend/src/pages/ui_announcements/ui_announcements-table.tsx b/frontend/src/pages/ui_announcements/ui_announcements-table.tsx
new file mode 100644
index 0000000..d84ea9a
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/ui_announcements-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUi_announcements from '../../components/Ui_announcements/TableUi_announcements'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/ui_announcements/ui_announcementsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Ui_announcementsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'Headline', title: 'headline'},{label: 'Content', title: 'content'},
+          
+          
+          {label: 'PublishFrom', title: 'publish_from', date: 'true'},{label: 'PublishTo', title: 'publish_to', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          {label: 'Audience', title: 'audience', type: 'enum', options: ['all_users','admins','buyers','finance','warehouse']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_UI_ANNOUNCEMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUi_announcementsCSV = async () => {
+        const response = await axios({url: '/ui_announcements?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'ui_announcementsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Ui_announcements')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Ui_announcements" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/ui_announcements/ui_announcements-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUi_announcementsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/ui_announcements/ui_announcements-list'}>
+                Back to <span className='capitalize'>calendar</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableUi_announcements
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Ui_announcementsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Ui_announcementsTablesPage
diff --git a/frontend/src/pages/ui_announcements/ui_announcements-view.tsx b/frontend/src/pages/ui_announcements/ui_announcements-view.tsx
new file mode 100644
index 0000000..d1eedfd
--- /dev/null
+++ b/frontend/src/pages/ui_announcements/ui_announcements-view.tsx
@@ -0,0 +1,520 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/ui_announcements/ui_announcementsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Ui_announcementsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { ui_announcements } = useAppSelector((state) => state.ui_announcements)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View ui_announcements')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View ui_announcements')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/ui_announcements/ui_announcements-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{ui_announcements?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Headline</p>
+                    <p>{ui_announcements?.headline}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Content</p>
+                  {ui_announcements.content
+                    ? <p dangerouslySetInnerHTML={{__html: ui_announcements.content}}/>
+                    : <p>No data</p>
+                  }
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Audience</p>
+                    <p>{ui_announcements?.audience ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='PublishFrom'>
+                    {ui_announcements.publish_from ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={ui_announcements.publish_from ?
+                        new Date(
+                          dayjs(ui_announcements.publish_from).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No PublishFrom</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='PublishTo'>
+                    {ui_announcements.publish_to ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={ui_announcements.publish_to ?
+                        new Date(
+                          dayjs(ui_announcements.publish_to).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No PublishTo</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: ui_announcements?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{ui_announcements?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/ui_announcements/ui_announcements-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Ui_announcementsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_UI_ANNOUNCEMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Ui_announcementsView;
\ No newline at end of file
diff --git a/frontend/src/pages/user_role_assignments/[user_role_assignmentsId].tsx b/frontend/src/pages/user_role_assignments/[user_role_assignmentsId].tsx
new file mode 100644
index 0000000..a25e2b1
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/[user_role_assignmentsId].tsx
@@ -0,0 +1,852 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/user_role_assignments/user_role_assignmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUser_role_assignments = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    user: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    effective_from: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    effective_to: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_primary: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { user_role_assignments } = useAppSelector((state) => state.user_role_assignments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { user_role_assignmentsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: user_role_assignmentsId }))
+  }, [user_role_assignmentsId])
+
+  useEffect(() => {
+    if (typeof user_role_assignments === 'object') {
+      setInitialValues(user_role_assignments)
+    }
+  }, [user_role_assignments])
+
+  useEffect(() => {
+      if (typeof user_role_assignments === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (user_role_assignments)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [user_role_assignments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: user_role_assignmentsId, data }))
+    await router.push('/user_role_assignments/user_role_assignments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit user_role_assignments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit user_role_assignments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='User' labelFor='user'>
+        <Field
+            name='user'
+            id='user'
+            component={SelectField}
+            options={initialValues.user}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Role' labelFor='role'>
+        <Field
+            name='role'
+            id='role'
+            component={SelectField}
+            options={initialValues.role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EffectiveFrom"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.effective_from ?
+                  new Date(
+                      dayjs(initialValues.effective_from).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'effective_from': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EffectiveTo"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.effective_to ?
+                  new Date(
+                      dayjs(initialValues.effective_to).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'effective_to': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsPrimary' labelFor='is_primary'>
+        <Field
+            name='is_primary'
+            id='is_primary'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/user_role_assignments/user_role_assignments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUser_role_assignments.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUser_role_assignments
diff --git a/frontend/src/pages/user_role_assignments/user_role_assignments-edit.tsx b/frontend/src/pages/user_role_assignments/user_role_assignments-edit.tsx
new file mode 100644
index 0000000..efd2ae4
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/user_role_assignments-edit.tsx
@@ -0,0 +1,849 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/user_role_assignments/user_role_assignmentsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUser_role_assignmentsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    user: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    effective_from: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    effective_to: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_primary: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { user_role_assignments } = useAppSelector((state) => state.user_role_assignments)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof user_role_assignments === 'object') {
+      setInitialValues(user_role_assignments)
+    }
+  }, [user_role_assignments])
+
+  useEffect(() => {
+      if (typeof user_role_assignments === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (user_role_assignments)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [user_role_assignments])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/user_role_assignments/user_role_assignments-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit user_role_assignments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit user_role_assignments'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='User' labelFor='user'>
+        <Field
+            name='user'
+            id='user'
+            component={SelectField}
+            options={initialValues.user}
+            itemRef={'users'}
+      
+        
+            showField={'firstName'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Role' labelFor='role'>
+        <Field
+            name='role'
+            id='role'
+            component={SelectField}
+            options={initialValues.role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EffectiveFrom"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.effective_from ?
+                  new Date(
+                      dayjs(initialValues.effective_from).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'effective_from': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="EffectiveTo"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.effective_to ?
+                  new Date(
+                      dayjs(initialValues.effective_to).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'effective_to': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsPrimary' labelFor='is_primary'>
+        <Field
+            name='is_primary'
+            id='is_primary'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/user_role_assignments/user_role_assignments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUser_role_assignmentsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUser_role_assignmentsPage
diff --git a/frontend/src/pages/user_role_assignments/user_role_assignments-list.tsx b/frontend/src/pages/user_role_assignments/user_role_assignments-list.tsx
new file mode 100644
index 0000000..ca4bcb7
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/user_role_assignments-list.tsx
@@ -0,0 +1,178 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUser_role_assignments from '../../components/User_role_assignments/TableUser_role_assignments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/user_role_assignments/user_role_assignmentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const User_role_assignmentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([
+          
+          
+          {label: 'EffectiveFrom', title: 'effective_from', date: 'true'},{label: 'EffectiveTo', title: 'effective_to', date: 'true'},
+    
+    
+    {label: 'User', title: 'user'},
+    
+    
+    
+    {label: 'Role', title: 'role'},
+    
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_USER_ROLE_ASSIGNMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUser_role_assignmentsCSV = async () => {
+        const response = await axios({url: '/user_role_assignments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'user_role_assignmentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('User_role_assignments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="User_role_assignments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/user_role_assignments/user_role_assignments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUser_role_assignmentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/user_role_assignments/user_role_assignments-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableUser_role_assignments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+User_role_assignmentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default User_role_assignmentsTablesPage
diff --git a/frontend/src/pages/user_role_assignments/user_role_assignments-new.tsx b/frontend/src/pages/user_role_assignments/user_role_assignments-new.tsx
new file mode 100644
index 0000000..522fc55
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/user_role_assignments-new.tsx
@@ -0,0 +1,440 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/user_role_assignments/user_role_assignmentsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    user: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    role: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    effective_from: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    effective_to: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_primary: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const User_role_assignmentsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+    // get from url params
+    const { dateRangeStart, dateRangeEnd } = router.query
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/user_role_assignments/user_role_assignments-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                
+                
+                dateRangeStart && dateRangeEnd ?
+                {
+                    ...initialValues,
+                    effective_from: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
+                    effective_to: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
+                } : initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="User" labelFor="user">
+      <Field name="user" id="user" component={SelectField} options={[]} itemRef={'users'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Role" labelFor="role">
+      <Field name="role" id="role" component={SelectField} options={[]} itemRef={'roles'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="EffectiveFrom"
+  >
+      <Field
+          type="datetime-local"
+          name="effective_from"
+          placeholder="EffectiveFrom"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="EffectiveTo"
+  >
+      <Field
+          type="datetime-local"
+          name="effective_to"
+          placeholder="EffectiveTo"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsPrimary' labelFor='is_primary'>
+      <Field
+          name='is_primary'
+          id='is_primary'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/user_role_assignments/user_role_assignments-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+User_role_assignmentsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default User_role_assignmentsNew
diff --git a/frontend/src/pages/user_role_assignments/user_role_assignments-table.tsx b/frontend/src/pages/user_role_assignments/user_role_assignments-table.tsx
new file mode 100644
index 0000000..e05b25a
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/user_role_assignments-table.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUser_role_assignments from '../../components/User_role_assignments/TableUser_role_assignments'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/user_role_assignments/user_role_assignmentsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const User_role_assignmentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([
+          
+          
+          {label: 'EffectiveFrom', title: 'effective_from', date: 'true'},{label: 'EffectiveTo', title: 'effective_to', date: 'true'},
+    
+    
+    {label: 'User', title: 'user'},
+    
+    
+    
+    {label: 'Role', title: 'role'},
+    
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_USER_ROLE_ASSIGNMENTS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUser_role_assignmentsCSV = async () => {
+        const response = await axios({url: '/user_role_assignments?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'user_role_assignmentsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('User_role_assignments')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="User_role_assignments" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/user_role_assignments/user_role_assignments-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUser_role_assignmentsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/user_role_assignments/user_role_assignments-list'}>
+                Back to <span className='capitalize'>calendar</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableUser_role_assignments
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+User_role_assignmentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default User_role_assignmentsTablesPage
diff --git a/frontend/src/pages/user_role_assignments/user_role_assignments-view.tsx b/frontend/src/pages/user_role_assignments/user_role_assignments-view.tsx
new file mode 100644
index 0000000..cc914d7
--- /dev/null
+++ b/frontend/src/pages/user_role_assignments/user_role_assignments-view.tsx
@@ -0,0 +1,609 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/user_role_assignments/user_role_assignmentsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const User_role_assignmentsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { user_role_assignments } = useAppSelector((state) => state.user_role_assignments)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View user_role_assignments')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View user_role_assignments')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/user_role_assignments/user_role_assignments-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>User</p>
+                    
+                    
+                        <p>{user_role_assignments?.user?.firstName ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Role</p>
+                    
+                    
+                    
+                    
+                        <p>{user_role_assignments?.role?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{user_role_assignments?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='EffectiveFrom'>
+                    {user_role_assignments.effective_from ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={user_role_assignments.effective_from ?
+                        new Date(
+                          dayjs(user_role_assignments.effective_from).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No EffectiveFrom</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='EffectiveTo'>
+                    {user_role_assignments.effective_to ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={user_role_assignments.effective_to ?
+                        new Date(
+                          dayjs(user_role_assignments.effective_to).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No EffectiveTo</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsPrimary'>
+                    <SwitchField
+                      field={{name: 'is_primary', value: user_role_assignments?.is_primary}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{user_role_assignments?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/user_role_assignments/user_role_assignments-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+User_role_assignmentsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USER_ROLE_ASSIGNMENTS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default User_role_assignmentsView;
\ No newline at end of file
diff --git a/frontend/src/pages/users/[usersId].tsx b/frontend/src/pages/users/[usersId].tsx
new file mode 100644
index 0000000..05ec084
--- /dev/null
+++ b/frontend/src/pages/users/[usersId].tsx
@@ -0,0 +1,920 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/users/usersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUsers = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'firstName': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'lastName': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phoneNumber': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    disabled: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    avatar: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    app_role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    custom_permissions: [],
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+    password: ''
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { users } = useAppSelector((state) => state.users)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { usersId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: usersId }))
+  }, [usersId])
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      setInitialValues(users)
+    }
+  }, [users])
+
+  useEffect(() => {
+      if (typeof users === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (users)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [users])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: usersId, data }))
+    await router.push('/users/users-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit users'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="First Name"
+    >
+        <Field
+            name="firstName"
+            placeholder="First Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Last Name"
+    >
+        <Field
+            name="lastName"
+            placeholder="Last Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone Number"
+    >
+        <Field
+            name="phoneNumber"
+            placeholder="Phone Number"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="E-Mail"
+    >
+        <Field
+            name="email"
+            placeholder="E-Mail"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='Disabled' labelFor='disabled'>
+        <Field
+            name='disabled'
+            id='disabled'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Avatar'
+                color='info'
+                icon={mdiUpload}
+                path={'users/avatar'}
+                name='avatar'
+                id='avatar'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='App Role' labelFor='app_role'>
+        <Field
+            name='app_role'
+            id='app_role'
+            component={SelectField}
+            options={initialValues.app_role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField label='Custom Permissions' labelFor='custom_permissions'>
+          <Field
+              name='custom_permissions'
+              id='custom_permissions'
+              component={SelectFieldMany}
+              options={initialValues.custom_permissions}
+              itemRef={'permissions'}
+            
+            
+            
+            
+            
+            
+              showField={'name'}
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          ></Field>
+      </FormField>
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+    <FormField
+        label="Password"
+    >
+        <Field
+            name="password"
+            placeholder="password"
+        />
+    </FormField>
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/users/users-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUsers.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUsers
diff --git a/frontend/src/pages/users/users-edit.tsx b/frontend/src/pages/users/users-edit.tsx
new file mode 100644
index 0000000..6453c0e
--- /dev/null
+++ b/frontend/src/pages/users/users-edit.tsx
@@ -0,0 +1,917 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/users/usersSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditUsersPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+    'firstName': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'lastName': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phoneNumber': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    disabled: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    avatar: [],
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    app_role: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    custom_permissions: [],
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+    password: ''
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { users } = useAppSelector((state) => state.users)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      setInitialValues(users)
+    }
+  }, [users])
+
+  useEffect(() => {
+      if (typeof users === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (users)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [users])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/users/users-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit users'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+    <FormField
+        label="First Name"
+    >
+        <Field
+            name="firstName"
+            placeholder="First Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Last Name"
+    >
+        <Field
+            name="lastName"
+            placeholder="Last Name"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone Number"
+    >
+        <Field
+            name="phoneNumber"
+            placeholder="Phone Number"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="E-Mail"
+    >
+        <Field
+            name="email"
+            placeholder="E-Mail"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='Disabled' labelFor='disabled'>
+        <Field
+            name='disabled'
+            id='disabled'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+        <FormField>
+            <Field
+                label='Avatar'
+                color='info'
+                icon={mdiUpload}
+                path={'users/avatar'}
+                name='avatar'
+                id='avatar'
+                schema={{
+                    size: undefined,
+                    formats: undefined,
+                }}
+                component={FormImagePicker}
+            ></Field>
+        </FormField>
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='App Role' labelFor='app_role'>
+        <Field
+            name='app_role'
+            id='app_role'
+            component={SelectField}
+            options={initialValues.app_role}
+            itemRef={'roles'}
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField label='Custom Permissions' labelFor='custom_permissions'>
+          <Field
+              name='custom_permissions'
+              id='custom_permissions'
+              component={SelectFieldMany}
+              options={initialValues.custom_permissions}
+              itemRef={'permissions'}
+            
+            
+            
+            
+            
+            
+              showField={'name'}
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          ></Field>
+      </FormField>
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+    <FormField
+        label="Password"
+    >
+        <Field
+            name="password"
+            placeholder="password"
+        />
+    </FormField>
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/users/users-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditUsersPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditUsersPage
diff --git a/frontend/src/pages/users/users-list.tsx b/frontend/src/pages/users/users-list.tsx
new file mode 100644
index 0000000..a90ec62
--- /dev/null
+++ b/frontend/src/pages/users/users-list.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUsers from '../../components/Users/TableUsers'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/users/usersSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const UsersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'First Name', title: 'firstName'},{label: 'Last Name', title: 'lastName'},{label: 'Phone Number', title: 'phoneNumber'},{label: 'E-Mail', title: 'email'},
+          
+          
+          
+    
+    
+    {label: 'App Role', title: 'app_role'},
+    
+    
+    
+    
+          {label: 'Custom Permissions', title: 'custom_permissions'},
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_USERS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUsersCSV = async () => {
+        const response = await axios({url: '/users?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'usersCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Users" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox  id="usersList"   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/users/users-new'} color='info' label='Add/Invite User'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUsersCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableUsers
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+UsersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default UsersTablesPage
diff --git a/frontend/src/pages/users/users-new.tsx b/frontend/src/pages/users/users-new.tsx
new file mode 100644
index 0000000..e23b7d4
--- /dev/null
+++ b/frontend/src/pages/users/users-new.tsx
@@ -0,0 +1,548 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/users/usersSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    firstName: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    lastName: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    phoneNumber: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    email: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    disabled: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    avatar: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    app_role: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    custom_permissions: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const UsersNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/users/users-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+  <FormField
+      label="First Name"
+  >
+      <Field
+          name="firstName"
+          placeholder="First Name"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Last Name"
+  >
+      <Field
+          name="lastName"
+          placeholder="Last Name"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Phone Number"
+  >
+      <Field
+          name="phoneNumber"
+          placeholder="Phone Number"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="E-Mail"
+  >
+      <Field
+          name="email"
+          placeholder="E-Mail"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='Disabled' labelFor='disabled'>
+      <Field
+          name='disabled'
+          id='disabled'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='Avatar'
+          color='info'
+          icon={mdiUpload}
+          path={'users/avatar'}
+          name='avatar'
+          id='avatar'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormImagePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="App Role" labelFor="app_role">
+      <Field name="app_role" id="app_role" component={SelectField} options={[]} itemRef={'roles'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label='Custom Permissions' labelFor='custom_permissions'>
+        <Field
+            name='custom_permissions'
+            id='custom_permissions'
+            itemRef={'permissions'}
+            options={[]}
+            component={SelectFieldMany}>
+        </Field>
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/users/users-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+UsersNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default UsersNew
diff --git a/frontend/src/pages/users/users-table.tsx b/frontend/src/pages/users/users-table.tsx
new file mode 100644
index 0000000..88caea1
--- /dev/null
+++ b/frontend/src/pages/users/users-table.tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableUsers from '../../components/Users/TableUsers'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/users/usersSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const UsersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'First Name', title: 'firstName'},{label: 'Last Name', title: 'lastName'},{label: 'Phone Number', title: 'phoneNumber'},{label: 'E-Mail', title: 'email'},
+          
+          
+          
+    
+    
+    {label: 'App Role', title: 'app_role'},
+    
+    
+    
+    
+              {label: 'Custom Permissions', title: 'custom_permissions'},
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_USERS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getUsersCSV = async () => {
+        const response = await axios({url: '/users?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'usersCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Users" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/users/users-new'} color='info' label='Add/Invite User'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getUsersCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableUsers
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+UsersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default UsersTablesPage
diff --git a/frontend/src/pages/users/users-view.tsx b/frontend/src/pages/users/users-view.tsx
new file mode 100644
index 0000000..dbb668b
--- /dev/null
+++ b/frontend/src/pages/users/users-view.tsx
@@ -0,0 +1,1530 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/users/usersSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const UsersView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { users } = useAppSelector((state) => state.users)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View users')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View users')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/users/users-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>First Name</p>
+                    <p>{users?.firstName}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Last Name</p>
+                    <p>{users?.lastName}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Phone Number</p>
+                    <p>{users?.phoneNumber}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>E-Mail</p>
+                    <p>{users?.email}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='Disabled'>
+                    <SwitchField
+                      field={{name: 'disabled', value: users?.disabled}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Avatar</p>
+                    {users?.avatar?.length
+                      ? (
+                        <ImageField
+                          name={'avatar'}
+                          image={users?.avatar}
+                          className='w-20 h-20'
+                        />
+                      ) : <p>No Avatar</p>
+                    }
+                </div>
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>App Role</p>
+                    
+                    
+                    
+                    
+                        <p>{users?.app_role?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <>
+                    <p className={'block font-bold mb-2'}>Custom Permissions</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                    <th>Name</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.custom_permissions && Array.isArray(users.custom_permissions) &&
+                              users.custom_permissions.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/permissions/permissions-view/?id=${item.id}`)}>
+                                  
+                                    
+                                    
+                                  
+                                    
+                                    <td data-label="name">
+                                        { item.name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.custom_permissions?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{users?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>User_role_assignments User</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EffectiveFrom</th>
+                                
+                                
+                                
+                                <th>EffectiveTo</th>
+                                
+                                
+                                
+                                <th>IsPrimary</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.user_role_assignments_user && Array.isArray(users.user_role_assignments_user) &&
+                              users.user_role_assignments_user.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/user_role_assignments/user_role_assignments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="effective_from">
+                                        { dataFormatter.dateTimeFormatter(item.effective_from) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="effective_to">
+                                        { dataFormatter.dateTimeFormatter(item.effective_to) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="is_primary">
+                                        { dataFormatter.booleanFormatter(item.is_primary) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.user_role_assignments_user?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisitions RequestedBy</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>RequisitionNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>RequestedDate</th>
+                                
+                                
+                                
+                                <th>NeededBy</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Reason</th>
+                                
+                                
+                                
+                                <th>EstimatedTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.purchase_requisitions_requested_by && Array.isArray(users.purchase_requisitions_requested_by) &&
+                              users.purchase_requisitions_requested_by.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisitions/purchase_requisitions-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requisition_number">
+                                        { item.requisition_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="requested_date">
+                                        { dataFormatter.dateTimeFormatter(item.requested_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="needed_by">
+                                        { dataFormatter.dateTimeFormatter(item.needed_by) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="reason">
+                                        { item.reason }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="estimated_total">
+                                        { item.estimated_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.purchase_requisitions_requested_by?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_orders Buyer</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PONumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>OrderDate</th>
+                                
+                                
+                                
+                                <th>ExpectedDeliveryDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>DiscountTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.purchase_orders_buyer && Array.isArray(users.purchase_orders_buyer) &&
+                              users.purchase_orders_buyer.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_orders/purchase_orders-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="po_number">
+                                        { item.po_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="order_date">
+                                        { dataFormatter.dateTimeFormatter(item.order_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="expected_delivery_date">
+                                        { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_total">
+                                        { item.discount_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.purchase_orders_buyer?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipts ReceivedBy</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>GRNNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ReceiptDate</th>
+                                
+                                
+                                
+                                <th>PostedDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Remarks</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.goods_receipts_received_by && Array.isArray(users.goods_receipts_received_by) &&
+                              users.goods_receipts_received_by.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipts/goods_receipts-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="grn_number">
+                                        { item.grn_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="receipt_date">
+                                        { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="posted_date">
+                                        { dataFormatter.dateTimeFormatter(item.posted_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="remarks">
+                                        { item.remarks }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.goods_receipts_received_by?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Departments Manager</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>DepartmentName</th>
+                                
+                                
+                                
+                                <th>DepartmentCode</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>IsActive</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.departments_manager && Array.isArray(users.departments_manager) &&
+                              users.departments_manager.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/departments/departments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="department_name">
+                                        { item.department_name }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="department_code">
+                                        { item.department_code }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="is_active">
+                                        { dataFormatter.booleanFormatter(item.is_active) }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.departments_manager?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Documents Owner</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentNumber</th>
+                                
+                                
+                                
+                                <th>Title</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Priority</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>DocumentDate</th>
+                                
+                                
+                                
+                                <th>ReviewDueDate</th>
+                                
+                                
+                                
+                                <th>Summary</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Tags</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.documents_owner && Array.isArray(users.documents_owner) &&
+                              users.documents_owner.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_number">
+                                        { item.document_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="title">
+                                        { item.title }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="priority">
+                                        { item.priority }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="document_date">
+                                        { dataFormatter.dateTimeFormatter(item.document_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="review_due_date">
+                                        { dataFormatter.dateTimeFormatter(item.review_due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="summary">
+                                        { item.summary }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="tags">
+                                        { item.tags }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.documents_owner?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approvals RequestedBy</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>RequestedAt</th>
+                                
+                                
+                                
+                                <th>DecidedAt</th>
+                                
+                                
+                                
+                                <th>DecisionNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.approvals_requested_by && Array.isArray(users.approvals_requested_by) &&
+                              users.approvals_requested_by.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="requested_at">
+                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decided_at">
+                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decision_notes">
+                                        { item.decision_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.approvals_requested_by?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Approvals AssignedTo</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>RequestedAt</th>
+                                
+                                
+                                
+                                <th>DecidedAt</th>
+                                
+                                
+                                
+                                <th>DecisionNotes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.approvals_assigned_to && Array.isArray(users.approvals_assigned_to) &&
+                              users.approvals_assigned_to.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="requested_at">
+                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decided_at">
+                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="decision_notes">
+                                        { item.decision_notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.approvals_assigned_to?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Activity_logs Actor</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>EntityType</th>
+                                
+                                
+                                
+                                <th>EntityReference</th>
+                                
+                                
+                                
+                                <th>Action</th>
+                                
+                                
+                                
+                                <th>EventTime</th>
+                                
+                                
+                                
+                                <th>Message</th>
+                                
+                                
+                                
+                                <th>IPAddress</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {users.activity_logs_actor && Array.isArray(users.activity_logs_actor) &&
+                              users.activity_logs_actor.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/activity_logs/activity_logs-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="entity_type">
+                                        { item.entity_type }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="entity_reference">
+                                        { item.entity_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="action">
+                                        { item.action }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="event_time">
+                                        { dataFormatter.dateTimeFormatter(item.event_time) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="message">
+                                        { item.message }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="ip_address">
+                                        { item.ip_address }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!users?.activity_logs_actor?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/users/users-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+UsersView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_USERS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default UsersView;
\ No newline at end of file
diff --git a/frontend/src/pages/vendor_invoices/[vendor_invoicesId].tsx b/frontend/src/pages/vendor_invoices/[vendor_invoicesId].tsx
new file mode 100644
index 0000000..a03fbb6
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/[vendor_invoicesId].tsx
@@ -0,0 +1,1465 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/vendor_invoices/vendor_invoicesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditVendor_invoices = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'invoice_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    goods_receipt: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    invoice_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    due_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    currency: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'subtotal': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'grand_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    invoice_files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { vendor_invoices } = useAppSelector((state) => state.vendor_invoices)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { vendor_invoicesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: vendor_invoicesId }))
+  }, [vendor_invoicesId])
+
+  useEffect(() => {
+    if (typeof vendor_invoices === 'object') {
+      setInitialValues(vendor_invoices)
+    }
+  }, [vendor_invoices])
+
+  useEffect(() => {
+      if (typeof vendor_invoices === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (vendor_invoices)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [vendor_invoices])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: vendor_invoicesId, data }))
+    await router.push('/vendor_invoices/vendor_invoices-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit vendor_invoices')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit vendor_invoices'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="InvoiceNumber"
+    >
+        <Field
+            name="invoice_number"
+            placeholder="InvoiceNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='GoodsReceipt' labelFor='goods_receipt'>
+        <Field
+            name='goods_receipt'
+            id='goods_receipt'
+            component={SelectField}
+            options={initialValues.goods_receipt}
+            itemRef={'goods_receipts'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'grn_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="InvoiceDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.invoice_date ?
+                  new Date(
+                      dayjs(initialValues.invoice_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'invoice_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DueDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.due_date ?
+                  new Date(
+                      dayjs(initialValues.due_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'due_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="paid">paid</option>
+          
+            <option value="void">void</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Currency" labelFor="currency">
+        <Field name="currency" id="currency" component="select">
+          
+            <option value="USD">USD</option>
+          
+            <option value="EUR">EUR</option>
+          
+            <option value="GBP">GBP</option>
+          
+            <option value="AED">AED</option>
+          
+            <option value="SAR">SAR</option>
+          
+            <option value="INR">INR</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='InvoiceFiles'
+            color='info'
+            icon={mdiUpload}
+            path={'vendor_invoices/invoice_files'}
+            name='invoice_files'
+            id='invoice_files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Notes' hasTextareaHeight>
+        <Field
+            name='notes'
+            id='notes'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendor_invoices/vendor_invoices-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditVendor_invoices.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditVendor_invoices
diff --git a/frontend/src/pages/vendor_invoices/vendor_invoices-edit.tsx b/frontend/src/pages/vendor_invoices/vendor_invoices-edit.tsx
new file mode 100644
index 0000000..3d497e2
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/vendor_invoices-edit.tsx
@@ -0,0 +1,1462 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/vendor_invoices/vendor_invoicesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditVendor_invoicesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'invoice_number': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    vendor: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    purchase_order: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    goods_receipt: null,
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    invoice_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    due_date: new Date(),
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    currency: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'subtotal': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'tax_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'grand_total': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    invoice_files: [],
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+    notes: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { vendor_invoices } = useAppSelector((state) => state.vendor_invoices)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof vendor_invoices === 'object') {
+      setInitialValues(vendor_invoices)
+    }
+  }, [vendor_invoices])
+
+  useEffect(() => {
+      if (typeof vendor_invoices === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (vendor_invoices)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [vendor_invoices])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/vendor_invoices/vendor_invoices-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit vendor_invoices')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit vendor_invoices'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="InvoiceNumber"
+    >
+        <Field
+            name="invoice_number"
+            placeholder="InvoiceNumber"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Vendor' labelFor='vendor'>
+        <Field
+            name='vendor'
+            id='vendor'
+            component={SelectField}
+            options={initialValues.vendor}
+            itemRef={'vendors'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'vendor_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='PurchaseOrder' labelFor='purchase_order'>
+        <Field
+            name='purchase_order'
+            id='purchase_order'
+            component={SelectField}
+            options={initialValues.purchase_order}
+            itemRef={'purchase_orders'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'po_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='GoodsReceipt' labelFor='goods_receipt'>
+        <Field
+            name='goods_receipt'
+            id='goods_receipt'
+            component={SelectField}
+            options={initialValues.goods_receipt}
+            itemRef={'goods_receipts'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'grn_number'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="InvoiceDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.invoice_date ?
+                  new Date(
+                      dayjs(initialValues.invoice_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'invoice_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+      <FormField
+          label="DueDate"
+      >
+          <DatePicker
+              dateFormat="yyyy-MM-dd hh:mm"
+              showTimeSelect
+              selected={initialValues.due_date ?
+                  new Date(
+                      dayjs(initialValues.due_date).format('YYYY-MM-DD hh:mm'),
+                  ) : null
+              }
+              onChange={(date) => setInitialValues({...initialValues, 'due_date': date})}
+          />
+      </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="draft">draft</option>
+          
+            <option value="submitted">submitted</option>
+          
+            <option value="approved">approved</option>
+          
+            <option value="rejected">rejected</option>
+          
+            <option value="paid">paid</option>
+          
+            <option value="void">void</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Currency" labelFor="currency">
+        <Field name="currency" id="currency" component="select">
+          
+            <option value="USD">USD</option>
+          
+            <option value="EUR">EUR</option>
+          
+            <option value="GBP">GBP</option>
+          
+            <option value="AED">AED</option>
+          
+            <option value="SAR">SAR</option>
+          
+            <option value="INR">INR</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+        <FormField>
+          <Field
+            label='InvoiceFiles'
+            color='info'
+            icon={mdiUpload}
+            path={'vendor_invoices/invoice_files'}
+            name='invoice_files'
+            id='invoice_files'
+            schema={{
+                size: undefined,
+                formats: undefined,
+            }}
+            component={FormFilePicker}
+          ></Field>
+        </FormField>
+  
+
+
+
+  
+
+  
+
+  
+    <FormField label='Notes' hasTextareaHeight>
+        <Field
+            name='notes'
+            id='notes'
+            component={RichTextField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendor_invoices/vendor_invoices-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditVendor_invoicesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditVendor_invoicesPage
diff --git a/frontend/src/pages/vendor_invoices/vendor_invoices-list.tsx b/frontend/src/pages/vendor_invoices/vendor_invoices-list.tsx
new file mode 100644
index 0000000..1025754
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/vendor_invoices-list.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableVendor_invoices from '../../components/Vendor_invoices/TableVendor_invoices'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/vendor_invoices/vendor_invoicesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Vendor_invoicesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'InvoiceNumber', title: 'invoice_number'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'TaxTotal', title: 'tax_total', number: 'true'},{label: 'GrandTotal', title: 'grand_total', number: 'true'},
+          {label: 'InvoiceDate', title: 'invoice_date', date: 'true'},{label: 'DueDate', title: 'due_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'GoodsReceipt', title: 'goods_receipt'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','approved','rejected','paid','void']},{label: 'Currency', title: 'currency', type: 'enum', options: ['USD','EUR','GBP','AED','SAR','INR']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_VENDOR_INVOICES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getVendor_invoicesCSV = async () => {
+        const response = await axios({url: '/vendor_invoices?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'vendor_invoicesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Vendor_invoices')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Vendor_invoices" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/vendor_invoices/vendor_invoices-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getVendor_invoicesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/vendor_invoices/vendor_invoices-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+          <TableVendor_invoices
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Vendor_invoicesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Vendor_invoicesTablesPage
diff --git a/frontend/src/pages/vendor_invoices/vendor_invoices-new.tsx b/frontend/src/pages/vendor_invoices/vendor_invoices-new.tsx
new file mode 100644
index 0000000..ea64986
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/vendor_invoices-new.tsx
@@ -0,0 +1,863 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/vendor_invoices/vendor_invoicesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    invoice_number: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    purchase_order: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    goods_receipt: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    invoice_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    due_date: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'draft',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    currency: 'USD',
+    
+    
+    
+    
+    
+    
+    
+    subtotal: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    tax_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    grand_total: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    invoice_files: [],
+    
+    
+    
+    
+    
+    
+    
+    
+    notes: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const Vendor_invoicesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/vendor_invoices/vendor_invoices-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="InvoiceNumber"
+  >
+      <Field
+          name="invoice_number"
+          placeholder="InvoiceNumber"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Vendor" labelFor="vendor">
+      <Field name="vendor" id="vendor" component={SelectField} options={[]} itemRef={'vendors'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="PurchaseOrder" labelFor="purchase_order">
+      <Field name="purchase_order" id="purchase_order" component={SelectField} options={[]} itemRef={'purchase_orders'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="GoodsReceipt" labelFor="goods_receipt">
+      <Field name="goods_receipt" id="goods_receipt" component={SelectField} options={[]} itemRef={'goods_receipts'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="InvoiceDate"
+  >
+      <Field
+          type="datetime-local"
+          name="invoice_date"
+          placeholder="InvoiceDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="DueDate"
+  >
+      <Field
+          type="datetime-local"
+          name="due_date"
+          placeholder="DueDate"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="draft">draft</option>
+      
+        <option value="submitted">submitted</option>
+      
+        <option value="approved">approved</option>
+      
+        <option value="rejected">rejected</option>
+      
+        <option value="paid">paid</option>
+      
+        <option value="void">void</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Currency" labelFor="currency">
+      <Field name="currency" id="currency" component="select">
+      
+        <option value="USD">USD</option>
+      
+        <option value="EUR">EUR</option>
+      
+        <option value="GBP">GBP</option>
+      
+        <option value="AED">AED</option>
+      
+        <option value="SAR">SAR</option>
+      
+        <option value="INR">INR</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="Subtotal"
+    >
+        <Field
+            type="number"
+            name="subtotal"
+            placeholder="Subtotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="TaxTotal"
+    >
+        <Field
+            type="number"
+            name="tax_total"
+            placeholder="TaxTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField
+        label="GrandTotal"
+    >
+        <Field
+            type="number"
+            name="grand_total"
+            placeholder="GrandTotal"
+        />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField>
+      <Field
+          label='InvoiceFiles'
+          color='info'
+          icon={mdiUpload}
+          path={'vendor_invoices/invoice_files'}
+          name='invoice_files'
+          id='invoice_files'
+          schema={{
+            size: undefined,
+            formats: undefined,
+          }}
+          component={FormFilePicker}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+      <FormField label='Notes' hasTextareaHeight>
+          <Field
+              name='notes'
+              id='notes'
+              component={RichTextField}
+          ></Field>
+      </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendor_invoices/vendor_invoices-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Vendor_invoicesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Vendor_invoicesNew
diff --git a/frontend/src/pages/vendor_invoices/vendor_invoices-table.tsx b/frontend/src/pages/vendor_invoices/vendor_invoices-table.tsx
new file mode 100644
index 0000000..1711704
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/vendor_invoices-table.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableVendor_invoices from '../../components/Vendor_invoices/TableVendor_invoices'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/vendor_invoices/vendor_invoicesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const Vendor_invoicesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'InvoiceNumber', title: 'invoice_number'},{label: 'Notes', title: 'notes'},
+          
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'TaxTotal', title: 'tax_total', number: 'true'},{label: 'GrandTotal', title: 'grand_total', number: 'true'},
+          {label: 'InvoiceDate', title: 'invoice_date', date: 'true'},{label: 'DueDate', title: 'due_date', date: 'true'},
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+    
+    {label: 'Vendor', title: 'vendor'},
+    
+    
+    
+    {label: 'PurchaseOrder', title: 'purchase_order'},
+    
+    
+    
+    {label: 'GoodsReceipt', title: 'goods_receipt'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','approved','rejected','paid','void']},{label: 'Currency', title: 'currency', type: 'enum', options: ['USD','EUR','GBP','AED','SAR','INR']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_VENDOR_INVOICES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getVendor_invoicesCSV = async () => {
+        const response = await axios({url: '/vendor_invoices?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'vendor_invoicesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Vendor_invoices')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Vendor_invoices" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/vendor_invoices/vendor_invoices-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getVendor_invoicesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/vendor_invoices/vendor_invoices-list'}>
+                Back to <span className='capitalize'>kanban</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableVendor_invoices
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+Vendor_invoicesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default Vendor_invoicesTablesPage
diff --git a/frontend/src/pages/vendor_invoices/vendor_invoices-view.tsx b/frontend/src/pages/vendor_invoices/vendor_invoices-view.tsx
new file mode 100644
index 0000000..2e511c3
--- /dev/null
+++ b/frontend/src/pages/vendor_invoices/vendor_invoices-view.tsx
@@ -0,0 +1,1124 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/vendor_invoices/vendor_invoicesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const Vendor_invoicesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { vendor_invoices } = useAppSelector((state) => state.vendor_invoices)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View vendor_invoices')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View vendor_invoices')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/vendor_invoices/vendor_invoices-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendor_invoices?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>InvoiceNumber</p>
+                    <p>{vendor_invoices?.invoice_number}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Vendor</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendor_invoices?.vendor?.vendor_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PurchaseOrder</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendor_invoices?.purchase_order?.po_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>GoodsReceipt</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendor_invoices?.goods_receipt?.grn_number ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='InvoiceDate'>
+                    {vendor_invoices.invoice_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={vendor_invoices.invoice_date ?
+                        new Date(
+                          dayjs(vendor_invoices.invoice_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No InvoiceDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='DueDate'>
+                    {vendor_invoices.due_date ? <DatePicker
+                      dateFormat="yyyy-MM-dd hh:mm"
+                      showTimeSelect
+                      selected={vendor_invoices.due_date ?
+                        new Date(
+                          dayjs(vendor_invoices.due_date).format('YYYY-MM-DD hh:mm'),
+                        ) : null
+                      }
+                      disabled
+                    /> : <p>No DueDate</p>}
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{vendor_invoices?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Currency</p>
+                    <p>{vendor_invoices?.currency ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Subtotal</p>
+                  <p>{vendor_invoices?.subtotal || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>TaxTotal</p>
+                  <p>{vendor_invoices?.tax_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>GrandTotal</p>
+                  <p>{vendor_invoices?.grand_total || 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>InvoiceFiles</p>
+                    {vendor_invoices?.invoice_files?.length
+                      ? dataFormatter.filesFormatter(vendor_invoices.invoice_files).map(link => (
+                        <button
+                          key={link.publicUrl}
+                          onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                        >
+                            {link.name}
+                        </button>
+                      )) : <p>No InvoiceFiles</p>
+                    }
+                </div>
+              
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                  <p className={'block font-bold mb-2'}>Notes</p>
+                  {vendor_invoices.notes
+                    ? <p dangerouslySetInnerHTML={{__html: vendor_invoices.notes}}/>
+                    : <p>No data</p>
+                  }
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendor_invoices?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Invoice_lines VendorInvoice</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {vendor_invoices.invoice_lines_vendor_invoice && Array.isArray(vendor_invoices.invoice_lines_vendor_invoice) &&
+                              vendor_invoices.invoice_lines_vendor_invoice.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/invoice_lines/invoice_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!vendor_invoices?.invoice_lines_vendor_invoice?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Payments VendorInvoice</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PaymentReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>PaymentDate</th>
+                                
+                                
+                                
+                                <th>Amount</th>
+                                
+                                
+                                
+                                <th>Method</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {vendor_invoices.payments_vendor_invoice && Array.isArray(vendor_invoices.payments_vendor_invoice) &&
+                              vendor_invoices.payments_vendor_invoice.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_reference">
+                                        { item.payment_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_date">
+                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="amount">
+                                        { item.amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="method">
+                                        { item.method }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!vendor_invoices?.payments_vendor_invoice?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/vendor_invoices/vendor_invoices-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+Vendor_invoicesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDOR_INVOICES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default Vendor_invoicesView;
\ No newline at end of file
diff --git a/frontend/src/pages/vendors/[vendorsId].tsx b/frontend/src/pages/vendors/[vendorsId].tsx
new file mode 100644
index 0000000..fee05bc
--- /dev/null
+++ b/frontend/src/pages/vendors/[vendorsId].tsx
@@ -0,0 +1,904 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/vendors/vendorsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditVendors = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'vendor_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'vendor_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'contact_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phone': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    address: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'payment_terms': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { vendors } = useAppSelector((state) => state.vendors)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { vendorsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: vendorsId }))
+  }, [vendorsId])
+
+  useEffect(() => {
+    if (typeof vendors === 'object') {
+      setInitialValues(vendors)
+    }
+  }, [vendors])
+
+  useEffect(() => {
+      if (typeof vendors === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (vendors)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [vendors])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: vendorsId, data }))
+    await router.push('/vendors/vendors-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit vendors')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit vendors'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="VendorName"
+    >
+        <Field
+            name="vendor_name"
+            placeholder="VendorName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="VendorCode"
+    >
+        <Field
+            name="vendor_code"
+            placeholder="VendorCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="ContactName"
+    >
+        <Field
+            name="contact_name"
+            placeholder="ContactName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone"
+    >
+        <Field
+            name="phone"
+            placeholder="Phone"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="active">active</option>
+          
+            <option value="on_hold">on_hold</option>
+          
+            <option value="inactive">inactive</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PaymentTerms"
+    >
+        <Field
+            name="payment_terms"
+            placeholder="PaymentTerms"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendors/vendors-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditVendors.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditVendors
diff --git a/frontend/src/pages/vendors/vendors-edit.tsx b/frontend/src/pages/vendors/vendors-edit.tsx
new file mode 100644
index 0000000..300dce8
--- /dev/null
+++ b/frontend/src/pages/vendors/vendors-edit.tsx
@@ -0,0 +1,901 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/vendors/vendorsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditVendorsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'vendor_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'vendor_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'contact_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'email': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'phone': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    address: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    status: '',
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'payment_terms': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { vendors } = useAppSelector((state) => state.vendors)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof vendors === 'object') {
+      setInitialValues(vendors)
+    }
+  }, [vendors])
+
+  useEffect(() => {
+      if (typeof vendors === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (vendors)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [vendors])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/vendors/vendors-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit vendors')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit vendors'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="VendorName"
+    >
+        <Field
+            name="vendor_name"
+            placeholder="VendorName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="VendorCode"
+    >
+        <Field
+            name="vendor_code"
+            placeholder="VendorCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="ContactName"
+    >
+        <Field
+            name="contact_name"
+            placeholder="ContactName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="Phone"
+    >
+        <Field
+            name="phone"
+            placeholder="Phone"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label="Status" labelFor="status">
+        <Field name="status" id="status" component="select">
+          
+            <option value="active">active</option>
+          
+            <option value="on_hold">on_hold</option>
+          
+            <option value="inactive">inactive</option>
+          
+        </Field>
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="PaymentTerms"
+    >
+        <Field
+            name="payment_terms"
+            placeholder="PaymentTerms"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendors/vendors-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditVendorsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditVendorsPage
diff --git a/frontend/src/pages/vendors/vendors-list.tsx b/frontend/src/pages/vendors/vendors-list.tsx
new file mode 100644
index 0000000..1a1b102
--- /dev/null
+++ b/frontend/src/pages/vendors/vendors-list.tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableVendors from '../../components/Vendors/TableVendors'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/vendors/vendorsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const VendorsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'VendorName', title: 'vendor_name'},{label: 'VendorCode', title: 'vendor_code'},{label: 'ContactName', title: 'contact_name'},{label: 'Email', title: 'email'},{label: 'Phone', title: 'phone'},{label: 'Address', title: 'address'},{label: 'PaymentTerms', title: 'payment_terms'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          {label: 'Status', title: 'status', type: 'enum', options: ['active','on_hold','inactive']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_VENDORS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getVendorsCSV = async () => {
+        const response = await axios({url: '/vendors?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'vendorsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Vendors')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Vendors" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/vendors/vendors-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getVendorsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableVendors
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+VendorsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default VendorsTablesPage
diff --git a/frontend/src/pages/vendors/vendors-new.tsx b/frontend/src/pages/vendors/vendors-new.tsx
new file mode 100644
index 0000000..d8c7dd2
--- /dev/null
+++ b/frontend/src/pages/vendors/vendors-new.tsx
@@ -0,0 +1,591 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/vendors/vendorsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    vendor_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    vendor_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    contact_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    email: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    phone: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    address: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    status: 'active',
+    
+    
+    
+    
+    
+    
+    
+    payment_terms: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const VendorsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/vendors/vendors-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="VendorName"
+  >
+      <Field
+          name="vendor_name"
+          placeholder="VendorName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="VendorCode"
+  >
+      <Field
+          name="vendor_code"
+          placeholder="VendorCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="ContactName"
+  >
+      <Field
+          name="contact_name"
+          placeholder="ContactName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Email"
+  >
+      <Field
+          name="email"
+          placeholder="Email"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="Phone"
+  >
+      <Field
+          name="phone"
+          placeholder="Phone"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Status" labelFor="status">
+      <Field name="status" id="status" component="select">
+      
+        <option value="active">active</option>
+      
+        <option value="on_hold">on_hold</option>
+      
+        <option value="inactive">inactive</option>
+      
+      </Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="PaymentTerms"
+  >
+      <Field
+          name="payment_terms"
+          placeholder="PaymentTerms"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/vendors/vendors-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+VendorsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default VendorsNew
diff --git a/frontend/src/pages/vendors/vendors-table.tsx b/frontend/src/pages/vendors/vendors-table.tsx
new file mode 100644
index 0000000..5f6c1d2
--- /dev/null
+++ b/frontend/src/pages/vendors/vendors-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableVendors from '../../components/Vendors/TableVendors'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/vendors/vendorsSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const VendorsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'VendorName', title: 'vendor_name'},{label: 'VendorCode', title: 'vendor_code'},{label: 'ContactName', title: 'contact_name'},{label: 'Email', title: 'email'},{label: 'Phone', title: 'phone'},{label: 'Address', title: 'address'},{label: 'PaymentTerms', title: 'payment_terms'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          {label: 'Status', title: 'status', type: 'enum', options: ['active','on_hold','inactive']},
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_VENDORS');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getVendorsCSV = async () => {
+        const response = await axios({url: '/vendors?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'vendorsCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Vendors')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Vendors" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/vendors/vendors-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getVendorsCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/vendors/vendors-list'}>
+                Back to <span className='capitalize'>table</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableVendors
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+VendorsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default VendorsTablesPage
diff --git a/frontend/src/pages/vendors/vendors-view.tsx b/frontend/src/pages/vendors/vendors-view.tsx
new file mode 100644
index 0000000..50418bb
--- /dev/null
+++ b/frontend/src/pages/vendors/vendors-view.tsx
@@ -0,0 +1,936 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/vendors/vendorsSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const VendorsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { vendors } = useAppSelector((state) => state.vendors)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View vendors')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View vendors')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/vendors/vendors-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendors?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>VendorName</p>
+                    <p>{vendors?.vendor_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>VendorCode</p>
+                    <p>{vendors?.vendor_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>ContactName</p>
+                    <p>{vendors?.contact_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Email</p>
+                    <p>{vendors?.email}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Phone</p>
+                    <p>{vendors?.phone}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={vendors?.address} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Status</p>
+                    <p>{vendors?.status ?? 'No data'}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>PaymentTerms</p>
+                    <p>{vendors?.payment_terms}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{vendors?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_orders Vendor</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PONumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>OrderDate</th>
+                                
+                                
+                                
+                                <th>ExpectedDeliveryDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>DiscountTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {vendors.purchase_orders_vendor && Array.isArray(vendors.purchase_orders_vendor) &&
+                              vendors.purchase_orders_vendor.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_orders/purchase_orders-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="po_number">
+                                        { item.po_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="order_date">
+                                        { dataFormatter.dateTimeFormatter(item.order_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="expected_delivery_date">
+                                        { dataFormatter.dateTimeFormatter(item.expected_delivery_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_total">
+                                        { item.discount_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!vendors?.purchase_orders_vendor?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Vendor_invoices Vendor</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>InvoiceNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>InvoiceDate</th>
+                                
+                                
+                                
+                                <th>DueDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Currency</th>
+                                
+                                
+                                
+                                <th>Subtotal</th>
+                                
+                                
+                                
+                                <th>TaxTotal</th>
+                                
+                                
+                                
+                                <th>GrandTotal</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {vendors.vendor_invoices_vendor && Array.isArray(vendors.vendor_invoices_vendor) &&
+                              vendors.vendor_invoices_vendor.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/vendor_invoices/vendor_invoices-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_number">
+                                        { item.invoice_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="invoice_date">
+                                        { dataFormatter.dateTimeFormatter(item.invoice_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="due_date">
+                                        { dataFormatter.dateTimeFormatter(item.due_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="currency">
+                                        { item.currency }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="subtotal">
+                                        { item.subtotal }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_total">
+                                        { item.tax_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="grand_total">
+                                        { item.grand_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!vendors?.vendor_invoices_vendor?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Payments Vendor</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>PaymentReference</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>PaymentDate</th>
+                                
+                                
+                                
+                                <th>Amount</th>
+                                
+                                
+                                
+                                <th>Method</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                
+                                
+                                <th>Notes</th>
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {vendors.payments_vendor && Array.isArray(vendors.payments_vendor) &&
+                              vendors.payments_vendor.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_reference">
+                                        { item.payment_reference }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="payment_date">
+                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="amount">
+                                        { item.amount }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="method">
+                                        { item.method }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="notes">
+                                        { item.notes }
+                                    </td>
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!vendors?.payments_vendor?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/vendors/vendors-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+VendorsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_VENDORS'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default VendorsView;
\ No newline at end of file
diff --git a/frontend/src/pages/verify-email.tsx b/frontend/src/pages/verify-email.tsx
new file mode 100644
index 0000000..6cf0340
--- /dev/null
+++ b/frontend/src/pages/verify-email.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import axios from 'axios';
+
+export default function Verify() {
+    const [loading, setLoading] = React.useState(false);
+    const router = useRouter();
+    const { token } = router.query;
+    const notify = (type, msg) => toast(msg, { type });
+
+    React.useEffect(() => {
+        if (!token) {
+            router.push('/login');
+            return;
+        }
+        const handleSubmit = async () => {
+
+            setLoading(true);
+            await axios.put('/auth/verify-email', {
+                token,
+            }).then(verified => {
+                if (verified) {
+                    setLoading(false);
+                    notify('success', 'Your email was verified');
+                }
+            }).catch(error => {
+                setLoading(false);
+                console.log('error: ', error);
+                notify('error', error.response);
+            }).finally(async () => {
+                await router.push('/login');
+            });
+        };
+        handleSubmit().then();
+    }, [token]);
+
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Verify Email')}</title>
+            </Head>
+            <SectionFullScreen bg='violet'>
+                <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+                    <p>{loading ? 'Loading...' : ''}</p>
+                </CardBox>
+            </SectionFullScreen>
+
+            <ToastContainer />
+        </>
+    );
+}
+
+Verify.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/warehouses/[warehousesId].tsx b/frontend/src/pages/warehouses/[warehousesId].tsx
new file mode 100644
index 0000000..42a90dd
--- /dev/null
+++ b/frontend/src/pages/warehouses/[warehousesId].tsx
@@ -0,0 +1,704 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/warehouses/warehousesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditWarehouses = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'warehouse_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'warehouse_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    address: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_default: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { warehouses } = useAppSelector((state) => state.warehouses)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { warehousesId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: warehousesId }))
+  }, [warehousesId])
+
+  useEffect(() => {
+    if (typeof warehouses === 'object') {
+      setInitialValues(warehouses)
+    }
+  }, [warehouses])
+
+  useEffect(() => {
+      if (typeof warehouses === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (warehouses)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [warehouses])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: warehousesId, data }))
+    await router.push('/warehouses/warehouses-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit warehouses')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit warehouses'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WarehouseName"
+    >
+        <Field
+            name="warehouse_name"
+            placeholder="WarehouseName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WarehouseCode"
+    >
+        <Field
+            name="warehouse_code"
+            placeholder="WarehouseCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsDefault' labelFor='is_default'>
+        <Field
+            name='is_default'
+            id='is_default'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/warehouses/warehouses-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditWarehouses.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditWarehouses
diff --git a/frontend/src/pages/warehouses/warehouses-edit.tsx b/frontend/src/pages/warehouses/warehouses-edit.tsx
new file mode 100644
index 0000000..9543adf
--- /dev/null
+++ b/frontend/src/pages/warehouses/warehouses-edit.tsx
@@ -0,0 +1,701 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/warehouses/warehousesSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const EditWarehousesPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+      
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    company: null,
+    
+
+    
+    
+    
+    'warehouse_name': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+    'warehouse_code': '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+    address: '',
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_default: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    is_active: false,
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    organizations: null,
+    
+
+    
+    
+    
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { warehouses } = useAppSelector((state) => state.warehouses)
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof warehouses === 'object') {
+      setInitialValues(warehouses)
+    }
+  }, [warehouses])
+
+  useEffect(() => {
+      if (typeof warehouses === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (warehouses)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [warehouses])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/warehouses/warehouses-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit warehouses')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit warehouses'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='Company' labelFor='company'>
+        <Field
+            name='company'
+            id='company'
+            component={SelectField}
+            options={initialValues.company}
+            itemRef={'companies'}
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'company_name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WarehouseName"
+    >
+        <Field
+            name="warehouse_name"
+            placeholder="WarehouseName"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+    <FormField
+        label="WarehouseCode"
+    >
+        <Field
+            name="warehouse_code"
+            placeholder="WarehouseCode"
+        />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsDefault' labelFor='is_default'>
+        <Field
+            name='is_default'
+            id='is_default'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+    <FormField label='IsActive' labelFor='is_active'>
+        <Field
+            name='is_active'
+            id='is_active'
+            component={SwitchField}
+        ></Field>
+    </FormField>
+  
+
+  
+
+  
+
+    
+
+  
+
+
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+      
+        
+      
+        
+      
+        
+      
+        
+            showField={'name'}
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        ></Field>
+    </FormField>
+    
+
+  
+
+  
+
+    
+
+  
+
+
+  
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/warehouses/warehouses-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditWarehousesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'UPDATE_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditWarehousesPage
diff --git a/frontend/src/pages/warehouses/warehouses-list.tsx b/frontend/src/pages/warehouses/warehouses-list.tsx
new file mode 100644
index 0000000..b71c0be
--- /dev/null
+++ b/frontend/src/pages/warehouses/warehouses-list.tsx
@@ -0,0 +1,170 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableWarehouses from '../../components/Warehouses/TableWarehouses'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/warehouses/warehousesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const WarehousesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'WarehouseName', title: 'warehouse_name'},{label: 'WarehouseCode', title: 'warehouse_code'},{label: 'Address', title: 'address'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+          
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_WAREHOUSES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getWarehousesCSV = async () => {
+        const response = await axios({url: '/warehouses?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'warehousesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Warehouses')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Warehouses" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/warehouses/warehouses-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getWarehousesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+            <div className='md:inline-flex items-center ms-auto'>
+              <Link href={'/warehouses/warehouses-table'}>Switch to Table</Link>
+            </div>
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableWarehouses
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+WarehousesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default WarehousesTablesPage
diff --git a/frontend/src/pages/warehouses/warehouses-new.tsx b/frontend/src/pages/warehouses/warehouses-new.tsx
new file mode 100644
index 0000000..273d199
--- /dev/null
+++ b/frontend/src/pages/warehouses/warehouses-new.tsx
@@ -0,0 +1,432 @@
+import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+
+import { Field, Form, Formik } from 'formik'
+import FormField from '../../components/FormField'
+import BaseDivider from '../../components/BaseDivider'
+import BaseButtons from '../../components/BaseButtons'
+import BaseButton from '../../components/BaseButton'
+import FormCheckRadio from '../../components/FormCheckRadio'
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
+import FormFilePicker from '../../components/FormFilePicker'
+import FormImagePicker from '../../components/FormImagePicker'
+import { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/warehouses/warehousesSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+
+const initialValues = {
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    company: '',
+    
+    
+    
+    
+    warehouse_name: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    warehouse_code: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    address: '',
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_default: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    is_active: false,
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    organizations: '',
+    
+    
+    
+}
+
+
+const WarehousesNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+    
+    
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/warehouses/warehouses-list')
+  }
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+                
+                initialValues
+                
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="Company" labelFor="company">
+      <Field name="company" id="company" component={SelectField} options={[]} itemRef={'companies'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="WarehouseName"
+  >
+      <Field
+          name="warehouse_name"
+          placeholder="WarehouseName"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField
+      label="WarehouseCode"
+  >
+      <Field
+          name="warehouse_code"
+          placeholder="WarehouseCode"
+      />
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <FormField label="Address" hasTextareaHeight>
+        <Field name="address" as="textarea" placeholder="Address" />
+    </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsDefault' labelFor='is_default'>
+      <Field
+          name='is_default'
+          id='is_default'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label='IsActive' labelFor='is_active'>
+      <Field
+          name='is_active'
+          id='is_active'
+          component={SwitchField}
+      ></Field>
+  </FormField>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <FormField label="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+
+
+
+
+
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/warehouses/warehouses-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+WarehousesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+          permission={'CREATE_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default WarehousesNew
diff --git a/frontend/src/pages/warehouses/warehouses-table.tsx b/frontend/src/pages/warehouses/warehouses-table.tsx
new file mode 100644
index 0000000..d39af75
--- /dev/null
+++ b/frontend/src/pages/warehouses/warehouses-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js'
+import Head from 'next/head'
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react'
+import CardBox from '../../components/CardBox'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import TableWarehouses from '../../components/Warehouses/TableWarehouses'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import Link from "next/link";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/warehouses/warehousesSlice';
+
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+
+const WarehousesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+
+  const dispatch = useAppDispatch();
+
+
+  const [filters] = useState([{label: 'WarehouseName', title: 'warehouse_name'},{label: 'WarehouseCode', title: 'warehouse_code'},{label: 'Address', title: 'address'},
+          
+          
+          
+    
+    
+    {label: 'Company', title: 'company'},
+    
+    
+              
+          
+  ]);
+    
+    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_WAREHOUSES');
+    
+
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getWarehousesCSV = async () => {
+        const response = await axios({url: '/warehouses?filetype=csv', method: 'GET',responseType: 'blob'});
+        const type = response.headers['content-type']
+        const blob = new Blob([response.data], { type: type })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = 'warehousesCSV.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        await dispatch(uploadCsv(csvFile));
+        dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Warehouses')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Warehouses" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/warehouses/warehouses-new'} color='info' label='New Item'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getWarehousesCSV} />
+          
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+            
+              <Link href={'/warehouses/warehouses-list'}>
+                Back to <span className='capitalize'>card</span>
+              </Link>
+            
+          </div>
+        </CardBox>
+        <CardBox className="mb-6" hasTable>
+          <TableWarehouses
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+            />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+WarehousesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        
+        permission={'READ_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default WarehousesTablesPage
diff --git a/frontend/src/pages/warehouses/warehouses-view.tsx b/frontend/src/pages/warehouses/warehouses-view.tsx
new file mode 100644
index 0000000..44e6d05
--- /dev/null
+++ b/frontend/src/pages/warehouses/warehouses-view.tsx
@@ -0,0 +1,746 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import dayjs from "dayjs";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import {useRouter} from "next/router";
+import { fetch } from '../../stores/warehouses/warehousesSlice'
+import {saveFile} from "../../helpers/fileSaver";
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from "../../components/ImageField";
+import LayoutAuthenticated from "../../layouts/Authenticated";
+import {getPageTitle} from "../../config";
+import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
+import SectionMain from "../../components/SectionMain";
+import CardBox from "../../components/CardBox";
+import BaseButton from "../../components/BaseButton";
+import BaseDivider from "../../components/BaseDivider";
+import {mdiChartTimelineVariant} from "@mdi/js";
+import {SwitchField} from "../../components/SwitchField";
+import FormField from "../../components/FormField";
+
+import {hasPermission} from "../../helpers/userPermissions";
+
+
+const WarehousesView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { warehouses } = useAppSelector((state) => state.warehouses)
+    
+    const { currentUser } = useAppSelector((state) => state.auth);
+    
+
+    const { id } = router.query;
+    
+    function removeLastCharacter(str) {
+      console.log(str,`str`)
+      return str.slice(0, -1);
+    }
+
+    useEffect(() => {
+        dispatch(fetch({ id }));
+    }, [dispatch, id]);
+
+
+    return (
+      <>
+          <Head>
+              <title>{getPageTitle('View warehouses')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View warehouses')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/warehouses/warehouses-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+            
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Company</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{warehouses?.company?.company_name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>WarehouseName</p>
+                    <p>{warehouses?.warehouse_name}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>WarehouseCode</p>
+                    <p>{warehouses?.warehouse_code}</p>
+                </div>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+                <FormField label='Multi Text' hasTextareaHeight>
+                  <textarea className={'w-full'} disabled value={warehouses?.address} />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsDefault'>
+                    <SwitchField
+                      field={{name: 'is_default', value: warehouses?.is_default}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+                <FormField label='IsActive'>
+                    <SwitchField
+                      field={{name: 'is_active', value: warehouses?.is_active}}
+                      form={{setFieldValue: () => null}}
+                      disabled
+                    />
+                </FormField>
+              
+
+              
+
+              
+
+              
+
+              
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+
+              
+              
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                        <p>{warehouses?.organizations?.name ?? 'No data'}</p>
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                </div>
+                 
+              
+
+              
+
+              
+
+              
+              
+
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_requisition_lines Warehouse</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPriceEstimate</th>
+                                
+                                
+                                
+                                <th>LineTotalEstimate</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {warehouses.purchase_requisition_lines_warehouse && Array.isArray(warehouses.purchase_requisition_lines_warehouse) &&
+                              warehouses.purchase_requisition_lines_warehouse.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_requisition_lines/purchase_requisition_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price_estimate">
+                                        { item.unit_price_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total_estimate">
+                                        { item.line_total_estimate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!warehouses?.purchase_requisition_lines_warehouse?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Purchase_order_lines Warehouse</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>Description</th>
+                                
+                                
+                                
+                                <th>Quantity</th>
+                                
+                                
+                                
+                                <th>UnitPrice</th>
+                                
+                                
+                                
+                                <th>TaxRate</th>
+                                
+                                
+                                
+                                <th>DiscountRate</th>
+                                
+                                
+                                
+                                <th>LineTotal</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {warehouses.purchase_order_lines_warehouse && Array.isArray(warehouses.purchase_order_lines_warehouse) &&
+                              warehouses.purchase_order_lines_warehouse.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/purchase_order_lines/purchase_order_lines-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="description">
+                                        { item.description }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="quantity">
+                                        { item.quantity }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="unit_price">
+                                        { item.unit_price }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="tax_rate">
+                                        { item.tax_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="discount_rate">
+                                        { item.discount_rate }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="line_total">
+                                        { item.line_total }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!warehouses?.purchase_order_lines_warehouse?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                <>
+                    <p className={'block font-bold mb-2'}>Goods_receipts Warehouse</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+                                
+                                
+                                
+                                
+                                <th>GRNNumber</th>
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                <th>ReceiptDate</th>
+                                
+                                
+                                
+                                <th>PostedDate</th>
+                                
+                                
+                                
+                                <th>Status</th>
+                                
+                                
+                                
+                                <th>Remarks</th>
+                                
+                                
+                                
+                                
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {warehouses.goods_receipts_warehouse && Array.isArray(warehouses.goods_receipts_warehouse) &&
+                              warehouses.goods_receipts_warehouse.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/goods_receipts/goods_receipts-view/?id=${item.id}`)}>
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="grn_number">
+                                        { item.grn_number }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    
+                                    <td data-label="receipt_date">
+                                        { dataFormatter.dateTimeFormatter(item.receipt_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="posted_date">
+                                        { dataFormatter.dateTimeFormatter(item.posted_date) }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="status">
+                                        { item.status }
+                                    </td>
+                                    
+                                    
+                                    
+                                    <td data-label="remarks">
+                                        { item.remarks }
+                                    </td>
+                                    
+                                    
+                                    
+                                    
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!warehouses?.goods_receipts_warehouse?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/warehouses/warehouses-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+WarehousesView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated
+        
+        permission={'READ_WAREHOUSES'}
+        
+      >
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default WarehousesView;
\ No newline at end of file
diff --git a/frontend/src/stores/activity_logs/activity_logsSlice.ts b/frontend/src/stores/activity_logs/activity_logsSlice.ts
new file mode 100644
index 0000000..4da5b66
--- /dev/null
+++ b/frontend/src/stores/activity_logs/activity_logsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    activity_logs: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    activity_logs: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('activity_logs/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `activity_logs${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'activity_logs/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('activity_logs/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('activity_logs/deleteActivity_logs', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`activity_logs/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('activity_logs/createActivity_logs', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'activity_logs',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'activity_logs/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('activity_logs/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('activity_logs/updateActivity_logs', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `activity_logs/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const activity_logsSlice = createSlice({
+    name: 'activity_logs',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.activity_logs = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.activity_logs = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Activity_logs has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Activity_logs'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Activity_logs'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Activity_logs'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Activity_logs has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = activity_logsSlice.actions
+
+export default activity_logsSlice.reducer
diff --git a/frontend/src/stores/approval_steps/approval_stepsSlice.ts b/frontend/src/stores/approval_steps/approval_stepsSlice.ts
new file mode 100644
index 0000000..a8f5a66
--- /dev/null
+++ b/frontend/src/stores/approval_steps/approval_stepsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    approval_steps: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    approval_steps: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('approval_steps/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `approval_steps${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'approval_steps/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('approval_steps/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('approval_steps/deleteApproval_steps', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`approval_steps/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('approval_steps/createApproval_steps', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'approval_steps',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'approval_steps/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('approval_steps/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('approval_steps/updateApproval_steps', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `approval_steps/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const approval_stepsSlice = createSlice({
+    name: 'approval_steps',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.approval_steps = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.approval_steps = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approval_steps has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_steps'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_steps'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_steps'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approval_steps has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = approval_stepsSlice.actions
+
+export default approval_stepsSlice.reducer
diff --git a/frontend/src/stores/approval_workflows/approval_workflowsSlice.ts b/frontend/src/stores/approval_workflows/approval_workflowsSlice.ts
new file mode 100644
index 0000000..3a3f6d0
--- /dev/null
+++ b/frontend/src/stores/approval_workflows/approval_workflowsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    approval_workflows: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    approval_workflows: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('approval_workflows/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `approval_workflows${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'approval_workflows/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('approval_workflows/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('approval_workflows/deleteApproval_workflows', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`approval_workflows/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('approval_workflows/createApproval_workflows', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'approval_workflows',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'approval_workflows/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('approval_workflows/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('approval_workflows/updateApproval_workflows', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `approval_workflows/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const approval_workflowsSlice = createSlice({
+    name: 'approval_workflows',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.approval_workflows = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.approval_workflows = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approval_workflows has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_workflows'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_workflows'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approval_workflows'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approval_workflows has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = approval_workflowsSlice.actions
+
+export default approval_workflowsSlice.reducer
diff --git a/frontend/src/stores/approvals/approvalsSlice.ts b/frontend/src/stores/approvals/approvalsSlice.ts
new file mode 100644
index 0000000..4702546
--- /dev/null
+++ b/frontend/src/stores/approvals/approvalsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    approvals: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    approvals: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('approvals/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `approvals${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'approvals/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('approvals/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('approvals/deleteApprovals', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`approvals/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('approvals/createApprovals', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'approvals',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'approvals/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('approvals/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('approvals/updateApprovals', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `approvals/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const approvalsSlice = createSlice({
+    name: 'approvals',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.approvals = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.approvals = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approvals has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approvals'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approvals'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Approvals'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Approvals has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = approvalsSlice.actions
+
+export default approvalsSlice.reducer
diff --git a/frontend/src/stores/authSlice.ts b/frontend/src/stores/authSlice.ts
new file mode 100644
index 0000000..2eaa1f2
--- /dev/null
+++ b/frontend/src/stores/authSlice.ts
@@ -0,0 +1,124 @@
+import { createSlice, createAsyncThunk, createAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import jwt from 'jsonwebtoken';
+
+interface MainState {
+  isFetching: boolean;
+  errorMessage: string;
+  currentUser: any;
+  notify: any;
+  token: string;
+}
+
+const initialState: MainState = {
+  /* User */
+  isFetching: false,
+  errorMessage: '',
+  currentUser: null,
+  token: '',
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const resetAction = createAction('auth/passwordReset/reset')
+
+export const loginUser = createAsyncThunk(
+    'auth/loginUser',
+    async (creds: Record<string, string>, { rejectWithValue }) => {
+      try {
+        const response = await axios.post('auth/signin/local', creds);
+        return response.data;
+      } catch (error) {
+        if (!error.response) {
+          throw error;
+        }
+        return rejectWithValue(error.response.data);
+      }
+    }
+);
+
+export const passwordReset = createAsyncThunk(
+    'auth/passwordReset',
+    async (value: Record<string, string>, { rejectWithValue }) => {
+      try {
+        const { data: response } = await axios.put('/auth/password-reset', {
+          token: value.token,
+          password: value.password,
+          type: value.type,
+        });
+
+        return response.data;
+      } catch (error) {
+        if (!error.response) {
+          throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+      }
+    },
+);
+
+export const findMe = createAsyncThunk('auth/findMe', async () => {
+  const response = await axios.get('auth/me');
+  return response.data;
+});
+
+export const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    logoutUser: (state) => {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      axios.defaults.headers.common['Authorization'] = '';
+      state.currentUser = null;
+      state.token = '';
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(loginUser.pending, (state) => {
+      state.isFetching = true;
+    });
+    builder.addCase(loginUser.fulfilled, (state, action) => {
+      const token = action.payload;
+      const user = jwt.decode(token);
+
+      state.errorMessage = '';
+      state.token = token;
+      localStorage.setItem('token', token);
+      localStorage.setItem('user', JSON.stringify(user));
+      axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
+    });
+
+    builder.addCase(loginUser.rejected, (state, action) => {
+      state.errorMessage = String(action.payload) || 'Something went wrong. Try again';
+      state.isFetching = false;
+    });
+    builder.addCase(findMe.pending, () => {
+      console.log('Pending findMe');
+    });
+    builder.addCase(findMe.fulfilled, (state, action) => {
+      state.currentUser = action.payload;
+      state.isFetching = false;
+    });
+
+    builder.addCase(passwordReset.fulfilled, (state, action) => {
+      state.notify.showNotification = true;
+      state.notify.textNotification = 'Password has been reset successfully';
+    });
+
+    builder.addCase(resetAction, (state) => initialState);
+
+    builder.addCase(passwordReset.rejected, (state) => {
+      state.errorMessage = 'Something was wrong. Try again';
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { logoutUser } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/frontend/src/stores/companies/companiesSlice.ts b/frontend/src/stores/companies/companiesSlice.ts
new file mode 100644
index 0000000..83a84f1
--- /dev/null
+++ b/frontend/src/stores/companies/companiesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    companies: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    companies: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('companies/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `companies${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'companies/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('companies/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('companies/deleteCompanies', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`companies/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('companies/createCompanies', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'companies',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'companies/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('companies/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('companies/updateCompanies', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `companies/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const companiesSlice = createSlice({
+    name: 'companies',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.companies = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.companies = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Companies has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Companies'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Companies'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Companies'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Companies has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = companiesSlice.actions
+
+export default companiesSlice.reducer
diff --git a/frontend/src/stores/departments/departmentsSlice.ts b/frontend/src/stores/departments/departmentsSlice.ts
new file mode 100644
index 0000000..a7d4f8b
--- /dev/null
+++ b/frontend/src/stores/departments/departmentsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    departments: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    departments: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('departments/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `departments${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'departments/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('departments/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('departments/deleteDepartments', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`departments/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('departments/createDepartments', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'departments',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'departments/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('departments/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('departments/updateDepartments', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `departments/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const departmentsSlice = createSlice({
+    name: 'departments',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.departments = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.departments = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Departments has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Departments'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Departments'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Departments'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Departments has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = departmentsSlice.actions
+
+export default departmentsSlice.reducer
diff --git a/frontend/src/stores/document_links/document_linksSlice.ts b/frontend/src/stores/document_links/document_linksSlice.ts
new file mode 100644
index 0000000..5d08bf3
--- /dev/null
+++ b/frontend/src/stores/document_links/document_linksSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    document_links: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    document_links: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('document_links/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `document_links${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'document_links/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('document_links/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('document_links/deleteDocument_links', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`document_links/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('document_links/createDocument_links', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'document_links',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'document_links/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('document_links/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('document_links/updateDocument_links', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `document_links/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const document_linksSlice = createSlice({
+    name: 'document_links',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.document_links = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.document_links = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Document_links has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_links'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_links'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_links'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Document_links has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = document_linksSlice.actions
+
+export default document_linksSlice.reducer
diff --git a/frontend/src/stores/document_types/document_typesSlice.ts b/frontend/src/stores/document_types/document_typesSlice.ts
new file mode 100644
index 0000000..8287757
--- /dev/null
+++ b/frontend/src/stores/document_types/document_typesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    document_types: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    document_types: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('document_types/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `document_types${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'document_types/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('document_types/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('document_types/deleteDocument_types', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`document_types/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('document_types/createDocument_types', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'document_types',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'document_types/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('document_types/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('document_types/updateDocument_types', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `document_types/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const document_typesSlice = createSlice({
+    name: 'document_types',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.document_types = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.document_types = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Document_types has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_types'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_types'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Document_types'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Document_types has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = document_typesSlice.actions
+
+export default document_typesSlice.reducer
diff --git a/frontend/src/stores/documents/documentsSlice.ts b/frontend/src/stores/documents/documentsSlice.ts
new file mode 100644
index 0000000..06fcd18
--- /dev/null
+++ b/frontend/src/stores/documents/documentsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    documents: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    documents: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('documents/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `documents${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'documents/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('documents/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('documents/deleteDocuments', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`documents/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('documents/createDocuments', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'documents',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'documents/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('documents/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('documents/updateDocuments', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `documents/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const documentsSlice = createSlice({
+    name: 'documents',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.documents = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.documents = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Documents has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Documents'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Documents'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Documents'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Documents has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = documentsSlice.actions
+
+export default documentsSlice.reducer
diff --git a/frontend/src/stores/goods_receipt_lines/goods_receipt_linesSlice.ts b/frontend/src/stores/goods_receipt_lines/goods_receipt_linesSlice.ts
new file mode 100644
index 0000000..5a0627e
--- /dev/null
+++ b/frontend/src/stores/goods_receipt_lines/goods_receipt_linesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    goods_receipt_lines: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    goods_receipt_lines: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('goods_receipt_lines/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `goods_receipt_lines${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'goods_receipt_lines/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('goods_receipt_lines/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('goods_receipt_lines/deleteGoods_receipt_lines', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`goods_receipt_lines/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('goods_receipt_lines/createGoods_receipt_lines', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'goods_receipt_lines',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'goods_receipt_lines/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('goods_receipt_lines/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('goods_receipt_lines/updateGoods_receipt_lines', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `goods_receipt_lines/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const goods_receipt_linesSlice = createSlice({
+    name: 'goods_receipt_lines',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.goods_receipt_lines = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.goods_receipt_lines = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Goods_receipt_lines has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipt_lines'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipt_lines'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipt_lines'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Goods_receipt_lines has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = goods_receipt_linesSlice.actions
+
+export default goods_receipt_linesSlice.reducer
diff --git a/frontend/src/stores/goods_receipts/goods_receiptsSlice.ts b/frontend/src/stores/goods_receipts/goods_receiptsSlice.ts
new file mode 100644
index 0000000..28d3627
--- /dev/null
+++ b/frontend/src/stores/goods_receipts/goods_receiptsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    goods_receipts: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    goods_receipts: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('goods_receipts/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `goods_receipts${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'goods_receipts/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('goods_receipts/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('goods_receipts/deleteGoods_receipts', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`goods_receipts/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('goods_receipts/createGoods_receipts', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'goods_receipts',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'goods_receipts/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('goods_receipts/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('goods_receipts/updateGoods_receipts', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `goods_receipts/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const goods_receiptsSlice = createSlice({
+    name: 'goods_receipts',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.goods_receipts = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.goods_receipts = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Goods_receipts has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipts'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipts'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Goods_receipts'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Goods_receipts has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = goods_receiptsSlice.actions
+
+export default goods_receiptsSlice.reducer
diff --git a/frontend/src/stores/hooks.ts b/frontend/src/stores/hooks.ts
new file mode 100644
index 0000000..60a4163
--- /dev/null
+++ b/frontend/src/stores/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/frontend/src/stores/introSteps.ts b/frontend/src/stores/introSteps.ts
new file mode 100644
index 0000000..6867f44
--- /dev/null
+++ b/frontend/src/stores/introSteps.ts
@@ -0,0 +1,139 @@
+interface Step {
+  element: string;
+  intro: string;
+  position?: string;
+  tooltipClass?: string;
+  highlightClass?: string;
+  disableInteraction?: boolean;
+}
+
+interface Hint {
+  element: string;
+  hint: string;
+  hintPosition?: string;
+}
+
+export const loginSteps: Step[] = [
+
+  {
+    element: '#elementId1',
+    intro: `
+          <div class="text-center text-black ">
+            <img src="https://flatlogic.com/blog/wp-content/uploads/2024/10/good_img.png" alt="Description" class="w-full mb-2 object-cover" />
+            <p>Welcome to our app tutorial! Get a sneak peek into the key functionalities and learn how to navigate seamlessly. Here's a quick overview to get you started.</p>
+          </div>
+        `,
+    position: 'auto',
+    tooltipClass: ' good-img',
+  },
+  {
+    element: '#loginRoles',
+    intro:
+      'Choose your login role to proceed. Experience the app as  a Super Admin,  Admin, or  User, or create your own account to get started.',
+    position: 'auto',
+  },
+];
+
+export const appSteps: Step[] = [
+  {
+    element: '#profilEdit',
+    intro:
+      "Update your profile information, including name, email, and password. Don't forget to save your changes to keep your profile current.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#themeToggle',
+    intro: 'Switch between light and dark modes to suit your preference.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#logout',
+    intro:
+      'Log out or switch users/roles with ease to manage your access.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#search',
+    intro:
+      'Quickly find specific data or items by entering your query in the search field. Navigate directly to the desired element.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#widgetCreator',
+    intro:
+      'Use Text-to-Chart and Text-to-Widget to create charts or widgets from text descriptions. Type what you need, like "Orders by Month," and customize your dashboard.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#dashboard',
+    intro:
+      'View all the entities available to your role, offering insights into the data categories and total items in each.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro:
+      'Access various entities and manage your data. Find links to  Swagger API documentation for more information.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro: "Let's explore the User entity.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+];
+
+export const usersSteps: Step[] = [
+  {
+    element: '#usersList',
+    intro:
+      'Invite new users, filter data, and work with CSV files in this section.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#usersTable',
+    intro:
+      'View, modify, or delete items with the necessary permissions. Inline editing is available within the table.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro: "Let's explore the Roles entity.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+  
+];
+
+export const rolesSteps: Step[] = [
+  {
+    element: '#rolesTable',
+    intro:
+      'Super Admin can manage roles and permissions. Adjust access levels and permissions for each role or user in the Roles and Permissions sections.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#feedbackSection', 
+    intro: `
+    <div class="text-center ">
+      <img src="https://flatlogic.com/blog/wp-content/uploads/2024/10/end_guide.png" alt="Description" class="w-full mb-2 object-cover" />
+      <p>Thank you for completing the tour! We hope you now have a better understanding of the app.</p>
+      <p>If you have any questions, feel free to reach out to us at <a href="mailto:support@flatlogic.com" class="text-blue-500 underline">support@flatlogic.com</a>.</p>
+    </div>
+  `,
+    position: 'auto',
+    tooltipClass: 'end-img',
+  },
+];
+
diff --git a/frontend/src/stores/invoice_lines/invoice_linesSlice.ts b/frontend/src/stores/invoice_lines/invoice_linesSlice.ts
new file mode 100644
index 0000000..ce8cb55
--- /dev/null
+++ b/frontend/src/stores/invoice_lines/invoice_linesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    invoice_lines: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    invoice_lines: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('invoice_lines/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `invoice_lines${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'invoice_lines/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('invoice_lines/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('invoice_lines/deleteInvoice_lines', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`invoice_lines/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('invoice_lines/createInvoice_lines', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'invoice_lines',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'invoice_lines/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('invoice_lines/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('invoice_lines/updateInvoice_lines', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `invoice_lines/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const invoice_linesSlice = createSlice({
+    name: 'invoice_lines',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.invoice_lines = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.invoice_lines = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Invoice_lines has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Invoice_lines'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Invoice_lines'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Invoice_lines'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Invoice_lines has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = invoice_linesSlice.actions
+
+export default invoice_linesSlice.reducer
diff --git a/frontend/src/stores/mainSlice.ts b/frontend/src/stores/mainSlice.ts
new file mode 100644
index 0000000..4e026b8
--- /dev/null
+++ b/frontend/src/stores/mainSlice.ts
@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { UserPayloadObject } from '../interfaces'
+
+interface MainState {
+  userName: string
+  userEmail: null | string
+  userAvatar: null | string
+  isFieldFocusRegistered: boolean
+}
+
+const initialState: MainState = {
+  /* User */
+  userName: '',
+  userEmail: null,
+  userAvatar: null,
+
+  /* Field focus with ctrl+k (to register only once) */
+  isFieldFocusRegistered: false,
+}
+
+export const mainSlice = createSlice({
+  name: 'main',
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<UserPayloadObject>) => {
+      state.userName = action.payload.name
+      state.userEmail = action.payload.email
+      state.userAvatar = action.payload.avatar
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { setUser } = mainSlice.actions
+
+export default mainSlice.reducer
diff --git a/frontend/src/stores/openAiSlice.ts b/frontend/src/stores/openAiSlice.ts
new file mode 100644
index 0000000..1328235
--- /dev/null
+++ b/frontend/src/stores/openAiSlice.ts
@@ -0,0 +1,151 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+interface MainState {
+    isFetchingQuery: boolean;
+    errorMessage: string;
+    smartWidgets: any[];
+    gptResponse: string | null;
+    aiResponse: any | null;
+    isAskingQuestion: boolean;
+    isAskingResponse: boolean;
+    notify: {
+        showNotification: boolean;
+        textNotification: string;
+        typeNotification: string;
+    };
+}
+const initialState: MainState = {
+    isFetchingQuery: false,
+    errorMessage: '',
+    smartWidgets: [],
+    gptResponse: null,
+    aiResponse: null,
+    isAskingQuestion: false,
+    isAskingResponse: false,
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+};
+
+const fulfilledNotify = (state, msg, type?: string) => {
+    state.notify.textNotification = msg;
+    state.notify.typeNotification = type || 'success';
+    state.notify.showNotification = true;
+};
+
+export const aiPrompt = createAsyncThunk(
+    'openai/aiPrompt',
+    async (data: any, { rejectWithValue }) => {
+        try {
+            return await axios.post('/openai/create_widget', data);
+        } catch (error) {
+            if (!error.response) {
+                throw error;
+            }
+            return rejectWithValue(error.response.data);
+        }
+    },
+);
+
+export const askGpt = createAsyncThunk(
+    'openai/askGpt',
+    async (prompt: string, { rejectWithValue }) => {
+        try {
+            const response = await axios.post('/openai/ask-gpt', { prompt });
+            return response.data;
+        } catch (error) {
+            if (!error.response) {
+                throw error;
+            }
+            return rejectWithValue(error.response.data);
+        }
+    },
+);
+
+export const aiResponse = createAsyncThunk(
+    'openai/aiResponse',
+    async (payload: { input: Array<{ role: string; content: string }>; options?: Record<string, any> }, { rejectWithValue }) => {
+        try {
+            const response = await axios.post('/ai/response', payload);
+            return response.data;
+        } catch (error) {
+            if (!error.response) {
+                throw error;
+            }
+            return rejectWithValue(error.response.data);
+        }
+    },
+);
+
+export const openAiSlice = createSlice({
+    name: 'openAiSlice',
+    initialState,
+    reducers: {
+        resetNotify: (state) => {
+            state.notify.showNotification = false;
+            state.notify.typeNotification = '';
+            state.notify.textNotification = '';
+        },
+        setErrorNotification: (state, action) => {
+            fulfilledNotify(state, action.payload, 'error');
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(aiPrompt.pending, (state) => {
+            state.isFetchingQuery = true;
+        });
+        builder.addCase(aiPrompt.fulfilled, (state, action: Record<any, any>) => {
+            state.isFetchingQuery = false;
+            state.errorMessage = '';
+            state.smartWidgets.unshift(action.payload.data);
+        });
+
+        builder.addCase(aiPrompt.rejected, (state) => {
+            state.errorMessage = 'Something was wrong. Try again';
+            state.isFetchingQuery = false;
+            state.smartWidgets = null;
+        });
+
+        builder.addCase(askGpt.pending, (state) => {
+            state.isAskingQuestion = true;
+            state.gptResponse = null;
+            state.errorMessage = '';
+        });
+        builder.addCase(askGpt.fulfilled, (state, action) => {
+            state.isAskingQuestion = false;
+            state.gptResponse = action.payload.data;
+            state.errorMessage = '';
+        });
+        builder.addCase(askGpt.rejected, (state) => {
+            state.isAskingQuestion = false;
+            state.gptResponse = null;
+            state.errorMessage = 'Failed to get response from ChatGPT. Please try again.';
+            fulfilledNotify(state, 'Failed to get response from ChatGPT', 'error');
+        });
+
+        builder.addCase(aiResponse.pending, (state) => {
+            state.isAskingResponse = true;
+            state.aiResponse = null;
+            state.errorMessage = '';
+        });
+        builder.addCase(aiResponse.fulfilled, (state, action) => {
+            state.isAskingResponse = false;
+            state.aiResponse = action.payload;
+            state.errorMessage = '';
+        });
+        builder.addCase(aiResponse.rejected, (state) => {
+            state.isAskingResponse = false;
+            state.aiResponse = null;
+            state.errorMessage = 'Failed to get response from AI proxy. Please try again.';
+            fulfilledNotify(state, 'Failed to get response from AI proxy', 'error');
+        });
+    },
+});
+
+// Action creators are generated for each case reducer function
+export const { resetNotify, setErrorNotification } = openAiSlice.actions;
+
+export default openAiSlice.reducer;
diff --git a/frontend/src/stores/organizations/organizationsSlice.ts b/frontend/src/stores/organizations/organizationsSlice.ts
new file mode 100644
index 0000000..9167a7e
--- /dev/null
+++ b/frontend/src/stores/organizations/organizationsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    organizations: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    organizations: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('organizations/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `organizations${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'organizations/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('organizations/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('organizations/deleteOrganizations', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`organizations/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('organizations/createOrganizations', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'organizations',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'organizations/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('organizations/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('organizations/updateOrganizations', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `organizations/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const organizationsSlice = createSlice({
+    name: 'organizations',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.organizations = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.organizations = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Organizations has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Organizations'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Organizations'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Organizations'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Organizations has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = organizationsSlice.actions
+
+export default organizationsSlice.reducer
diff --git a/frontend/src/stores/payments/paymentsSlice.ts b/frontend/src/stores/payments/paymentsSlice.ts
new file mode 100644
index 0000000..f0fb035
--- /dev/null
+++ b/frontend/src/stores/payments/paymentsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    payments: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    payments: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('payments/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `payments${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'payments/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('payments/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('payments/deletePayments', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`payments/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('payments/createPayments', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'payments',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'payments/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('payments/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('payments/updatePayments', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `payments/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const paymentsSlice = createSlice({
+    name: 'payments',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.payments = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.payments = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Payments has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Payments'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Payments'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Payments'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Payments has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = paymentsSlice.actions
+
+export default paymentsSlice.reducer
diff --git a/frontend/src/stores/permissions/permissionsSlice.ts b/frontend/src/stores/permissions/permissionsSlice.ts
new file mode 100644
index 0000000..ad3648d
--- /dev/null
+++ b/frontend/src/stores/permissions/permissionsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    permissions: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    permissions: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('permissions/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `permissions${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'permissions/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('permissions/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('permissions/deletePermissions', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`permissions/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('permissions/createPermissions', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'permissions',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'permissions/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('permissions/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('permissions/updatePermissions', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `permissions/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const permissionsSlice = createSlice({
+    name: 'permissions',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.permissions = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.permissions = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Permissions has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Permissions has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = permissionsSlice.actions
+
+export default permissionsSlice.reducer
diff --git a/frontend/src/stores/product_categories/product_categoriesSlice.ts b/frontend/src/stores/product_categories/product_categoriesSlice.ts
new file mode 100644
index 0000000..ff70cab
--- /dev/null
+++ b/frontend/src/stores/product_categories/product_categoriesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    product_categories: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    product_categories: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('product_categories/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `product_categories${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'product_categories/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('product_categories/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('product_categories/deleteProduct_categories', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`product_categories/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('product_categories/createProduct_categories', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'product_categories',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'product_categories/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('product_categories/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('product_categories/updateProduct_categories', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `product_categories/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const product_categoriesSlice = createSlice({
+    name: 'product_categories',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.product_categories = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.product_categories = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Product_categories has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Product_categories'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Product_categories'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Product_categories'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Product_categories has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = product_categoriesSlice.actions
+
+export default product_categoriesSlice.reducer
diff --git a/frontend/src/stores/products/productsSlice.ts b/frontend/src/stores/products/productsSlice.ts
new file mode 100644
index 0000000..04a9df2
--- /dev/null
+++ b/frontend/src/stores/products/productsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    products: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    products: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('products/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `products${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'products/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('products/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('products/deleteProducts', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`products/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('products/createProducts', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'products',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'products/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('products/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('products/updateProducts', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `products/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const productsSlice = createSlice({
+    name: 'products',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.products = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.products = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Products has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Products'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Products'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Products'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Products has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = productsSlice.actions
+
+export default productsSlice.reducer
diff --git a/frontend/src/stores/purchase_order_lines/purchase_order_linesSlice.ts b/frontend/src/stores/purchase_order_lines/purchase_order_linesSlice.ts
new file mode 100644
index 0000000..56ccead
--- /dev/null
+++ b/frontend/src/stores/purchase_order_lines/purchase_order_linesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    purchase_order_lines: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    purchase_order_lines: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('purchase_order_lines/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `purchase_order_lines${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'purchase_order_lines/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('purchase_order_lines/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('purchase_order_lines/deletePurchase_order_lines', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`purchase_order_lines/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('purchase_order_lines/createPurchase_order_lines', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'purchase_order_lines',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'purchase_order_lines/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('purchase_order_lines/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('purchase_order_lines/updatePurchase_order_lines', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `purchase_order_lines/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const purchase_order_linesSlice = createSlice({
+    name: 'purchase_order_lines',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.purchase_order_lines = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.purchase_order_lines = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_order_lines has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_order_lines'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_order_lines'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_order_lines'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_order_lines has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = purchase_order_linesSlice.actions
+
+export default purchase_order_linesSlice.reducer
diff --git a/frontend/src/stores/purchase_orders/purchase_ordersSlice.ts b/frontend/src/stores/purchase_orders/purchase_ordersSlice.ts
new file mode 100644
index 0000000..974dea6
--- /dev/null
+++ b/frontend/src/stores/purchase_orders/purchase_ordersSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    purchase_orders: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    purchase_orders: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('purchase_orders/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `purchase_orders${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'purchase_orders/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('purchase_orders/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('purchase_orders/deletePurchase_orders', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`purchase_orders/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('purchase_orders/createPurchase_orders', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'purchase_orders',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'purchase_orders/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('purchase_orders/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('purchase_orders/updatePurchase_orders', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `purchase_orders/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const purchase_ordersSlice = createSlice({
+    name: 'purchase_orders',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.purchase_orders = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.purchase_orders = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_orders has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_orders'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_orders'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_orders'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_orders has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = purchase_ordersSlice.actions
+
+export default purchase_ordersSlice.reducer
diff --git a/frontend/src/stores/purchase_requisition_lines/purchase_requisition_linesSlice.ts b/frontend/src/stores/purchase_requisition_lines/purchase_requisition_linesSlice.ts
new file mode 100644
index 0000000..c486682
--- /dev/null
+++ b/frontend/src/stores/purchase_requisition_lines/purchase_requisition_linesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    purchase_requisition_lines: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    purchase_requisition_lines: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('purchase_requisition_lines/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `purchase_requisition_lines${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'purchase_requisition_lines/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('purchase_requisition_lines/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('purchase_requisition_lines/deletePurchase_requisition_lines', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`purchase_requisition_lines/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('purchase_requisition_lines/createPurchase_requisition_lines', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'purchase_requisition_lines',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'purchase_requisition_lines/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('purchase_requisition_lines/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('purchase_requisition_lines/updatePurchase_requisition_lines', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `purchase_requisition_lines/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const purchase_requisition_linesSlice = createSlice({
+    name: 'purchase_requisition_lines',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.purchase_requisition_lines = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.purchase_requisition_lines = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_requisition_lines has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisition_lines'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisition_lines'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisition_lines'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_requisition_lines has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = purchase_requisition_linesSlice.actions
+
+export default purchase_requisition_linesSlice.reducer
diff --git a/frontend/src/stores/purchase_requisitions/purchase_requisitionsSlice.ts b/frontend/src/stores/purchase_requisitions/purchase_requisitionsSlice.ts
new file mode 100644
index 0000000..789569a
--- /dev/null
+++ b/frontend/src/stores/purchase_requisitions/purchase_requisitionsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    purchase_requisitions: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    purchase_requisitions: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('purchase_requisitions/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `purchase_requisitions${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'purchase_requisitions/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('purchase_requisitions/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('purchase_requisitions/deletePurchase_requisitions', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`purchase_requisitions/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('purchase_requisitions/createPurchase_requisitions', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'purchase_requisitions',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'purchase_requisitions/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('purchase_requisitions/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('purchase_requisitions/updatePurchase_requisitions', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `purchase_requisitions/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const purchase_requisitionsSlice = createSlice({
+    name: 'purchase_requisitions',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.purchase_requisitions = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.purchase_requisitions = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_requisitions has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisitions'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisitions'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Purchase_requisitions'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Purchase_requisitions has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = purchase_requisitionsSlice.actions
+
+export default purchase_requisitionsSlice.reducer
diff --git a/frontend/src/stores/role_permission_mappings/role_permission_mappingsSlice.ts b/frontend/src/stores/role_permission_mappings/role_permission_mappingsSlice.ts
new file mode 100644
index 0000000..be040a3
--- /dev/null
+++ b/frontend/src/stores/role_permission_mappings/role_permission_mappingsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    role_permission_mappings: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    role_permission_mappings: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('role_permission_mappings/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `role_permission_mappings${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'role_permission_mappings/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('role_permission_mappings/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('role_permission_mappings/deleteRole_permission_mappings', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`role_permission_mappings/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('role_permission_mappings/createRole_permission_mappings', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'role_permission_mappings',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'role_permission_mappings/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('role_permission_mappings/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('role_permission_mappings/updateRole_permission_mappings', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `role_permission_mappings/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const role_permission_mappingsSlice = createSlice({
+    name: 'role_permission_mappings',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.role_permission_mappings = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.role_permission_mappings = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Role_permission_mappings has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Role_permission_mappings'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Role_permission_mappings'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Role_permission_mappings'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Role_permission_mappings has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = role_permission_mappingsSlice.actions
+
+export default role_permission_mappingsSlice.reducer
diff --git a/frontend/src/stores/roles/rolesSlice.ts b/frontend/src/stores/roles/rolesSlice.ts
new file mode 100644
index 0000000..8fe2ed7
--- /dev/null
+++ b/frontend/src/stores/roles/rolesSlice.ts
@@ -0,0 +1,280 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    roles: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    roles: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('roles/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `roles${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'roles/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('roles/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('roles/deleteRoles', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`roles/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('roles/createRoles', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'roles',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'roles/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('roles/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('roles/updateRoles', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `roles/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const removeWidget = createAsyncThunk(
+  'openai/removeWidget',
+  async (payload: any) => {
+      const result = await axios.delete(`openai/roles-info/${payload.id}`, {
+          params: {
+              roleId: payload.roleId,
+              infoId: payload.widgetId,
+              key: 'widgets',
+          },
+      });
+      return result.data;
+  },
+);
+
+export const fetchWidgets = createAsyncThunk(
+  'openai/fetchWidgets',
+  async (roleId: any) => {
+      const result = await axios.get(
+        `openai/info-by-key?key=widgets&roleId=${roleId}`,
+      );
+      return result.data;
+  },
+);
+
+
+export const rolesSlice = createSlice({
+    name: 'roles',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.roles = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.roles = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Roles has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Roles has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+        builder.addCase(removeWidget.pending, (state) => {
+            state.loading = true;
+        });
+        builder.addCase(removeWidget.fulfilled, (state) => {
+            state.loading = false;
+        });
+        builder.addCase(removeWidget.rejected, (state) => {
+            state.loading = false;
+        });
+
+
+        builder.addCase(fetchWidgets.pending, (state) => {
+            state.loading = true;
+            state.rolesWidgets = [];
+        });
+        builder.addCase(fetchWidgets.fulfilled, (state, action) => {
+            state.loading = false;
+            state.rolesWidgets = action.payload;
+        });
+        builder.addCase(fetchWidgets.rejected, (state) => {
+            state.loading = false;
+            state.rolesWidgets = [];
+        });
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = rolesSlice.actions
+
+export default rolesSlice.reducer
diff --git a/frontend/src/stores/store.ts b/frontend/src/stores/store.ts
new file mode 100644
index 0000000..030c965
--- /dev/null
+++ b/frontend/src/stores/store.ts
@@ -0,0 +1,79 @@
+import { configureStore } from '@reduxjs/toolkit';
+import styleReducer from './styleSlice';
+import mainReducer from './mainSlice';
+import authSlice from './authSlice';
+import openAiSlice from './openAiSlice';
+
+import usersSlice from "./users/usersSlice";
+import rolesSlice from "./roles/rolesSlice";
+import permissionsSlice from "./permissions/permissionsSlice";
+import organizationsSlice from "./organizations/organizationsSlice";
+import companiesSlice from "./companies/companiesSlice";
+import user_role_assignmentsSlice from "./user_role_assignments/user_role_assignmentsSlice";
+import role_permission_mappingsSlice from "./role_permission_mappings/role_permission_mappingsSlice";
+import vendorsSlice from "./vendors/vendorsSlice";
+import warehousesSlice from "./warehouses/warehousesSlice";
+import product_categoriesSlice from "./product_categories/product_categoriesSlice";
+import productsSlice from "./products/productsSlice";
+import purchase_requisitionsSlice from "./purchase_requisitions/purchase_requisitionsSlice";
+import purchase_requisition_linesSlice from "./purchase_requisition_lines/purchase_requisition_linesSlice";
+import purchase_ordersSlice from "./purchase_orders/purchase_ordersSlice";
+import purchase_order_linesSlice from "./purchase_order_lines/purchase_order_linesSlice";
+import goods_receiptsSlice from "./goods_receipts/goods_receiptsSlice";
+import goods_receipt_linesSlice from "./goods_receipt_lines/goods_receipt_linesSlice";
+import vendor_invoicesSlice from "./vendor_invoices/vendor_invoicesSlice";
+import invoice_linesSlice from "./invoice_lines/invoice_linesSlice";
+import paymentsSlice from "./payments/paymentsSlice";
+import departmentsSlice from "./departments/departmentsSlice";
+import document_typesSlice from "./document_types/document_typesSlice";
+import documentsSlice from "./documents/documentsSlice";
+import document_linksSlice from "./document_links/document_linksSlice";
+import approval_workflowsSlice from "./approval_workflows/approval_workflowsSlice";
+import approval_stepsSlice from "./approval_steps/approval_stepsSlice";
+import approvalsSlice from "./approvals/approvalsSlice";
+import activity_logsSlice from "./activity_logs/activity_logsSlice";
+import ui_announcementsSlice from "./ui_announcements/ui_announcementsSlice";
+
+export const store = configureStore({
+  reducer: {
+    style: styleReducer,
+    main: mainReducer,
+    auth: authSlice,
+    openAi: openAiSlice,
+
+users: usersSlice,
+roles: rolesSlice,
+permissions: permissionsSlice,
+organizations: organizationsSlice,
+companies: companiesSlice,
+user_role_assignments: user_role_assignmentsSlice,
+role_permission_mappings: role_permission_mappingsSlice,
+vendors: vendorsSlice,
+warehouses: warehousesSlice,
+product_categories: product_categoriesSlice,
+products: productsSlice,
+purchase_requisitions: purchase_requisitionsSlice,
+purchase_requisition_lines: purchase_requisition_linesSlice,
+purchase_orders: purchase_ordersSlice,
+purchase_order_lines: purchase_order_linesSlice,
+goods_receipts: goods_receiptsSlice,
+goods_receipt_lines: goods_receipt_linesSlice,
+vendor_invoices: vendor_invoicesSlice,
+invoice_lines: invoice_linesSlice,
+payments: paymentsSlice,
+departments: departmentsSlice,
+document_types: document_typesSlice,
+documents: documentsSlice,
+document_links: document_linksSlice,
+approval_workflows: approval_workflowsSlice,
+approval_steps: approval_stepsSlice,
+approvals: approvalsSlice,
+activity_logs: activity_logsSlice,
+ui_announcements: ui_announcementsSlice,
+  },
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch
diff --git a/frontend/src/stores/styleSlice.ts b/frontend/src/stores/styleSlice.ts
new file mode 100644
index 0000000..81b0c2c
--- /dev/null
+++ b/frontend/src/stores/styleSlice.ts
@@ -0,0 +1,103 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import * as styles from '../styles'
+import { localStorageDarkModeKey, localStorageStyleKey } from '../config'
+import { StyleKey } from '../interfaces'
+
+interface StyleState {
+  asideStyle: string
+  asideScrollbarsStyle: string
+  asideBrandStyle: string
+  asideMenuItemStyle: string
+  asideMenuItemActiveStyle: string
+  asideMenuDropdownStyle: string
+  navBarItemLabelStyle: string
+  navBarItemLabelHoverStyle: string
+  navBarItemLabelActiveColorStyle: string
+  overlayStyle: string
+  darkMode: boolean
+  bgLayoutColor: string;
+  iconsColor: string;
+  activeLinkColor: string;
+  cardsColor: string;
+  focusRingColor: string;
+  corners: string;
+  cardsStyle: string;
+  linkColor: string;
+  websiteHeder: string;
+  borders: string;
+  shadow: string;
+  websiteSectionStyle: string;
+  textSecondary: string;
+}
+
+
+const initialState: StyleState = {
+  asideStyle: styles.white.aside,
+  asideScrollbarsStyle: styles.white.asideScrollbars,
+  asideBrandStyle: styles.white.asideBrand,
+  asideMenuItemStyle: styles.white.asideMenuItem,
+  asideMenuItemActiveStyle: styles.white.asideMenuItemActive,
+  asideMenuDropdownStyle: styles.white.asideMenuDropdown,
+  navBarItemLabelStyle: styles.white.navBarItemLabel,
+  navBarItemLabelHoverStyle: styles.white.navBarItemLabelHover,
+  navBarItemLabelActiveColorStyle: styles.white.navBarItemLabelActiveColor,
+  overlayStyle: styles.white.overlay,
+  darkMode: false,
+  bgLayoutColor: styles.white.bgLayoutColor,
+  iconsColor: styles.white.iconsColor,
+  activeLinkColor: styles.white.activeLinkColor,
+  cardsColor: styles.white.cardsColor,
+  focusRingColor: styles.white.focusRingColor,
+  corners: styles.white.corners,
+  cardsStyle: styles.white.cardsStyle,
+  linkColor: styles.white.linkColor,
+  websiteHeder: styles.white.websiteHeder,
+  borders: styles.white.borders,
+  shadow: styles.white.shadow,
+  websiteSectionStyle: styles.white.websiteSectionStyle,
+  textSecondary: styles.white.textSecondary,
+}
+
+
+export const styleSlice = createSlice({
+  name: 'style',
+  initialState,
+  reducers: {
+    setDarkMode: (state, action: PayloadAction<boolean | null>) => {
+      state.darkMode = action.payload !== null ? action.payload : !state.darkMode
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(localStorageDarkModeKey, state.darkMode ? '1' : '0')
+      }
+
+      if (typeof document !== 'undefined') {
+        document.body.classList[state.darkMode ? 'add' : 'remove']('dark-scrollbars')
+
+        document.documentElement.classList[state.darkMode ? 'add' : 'remove'](
+          'dark-scrollbars-compat'
+        )
+      }
+    },
+
+    setStyle: (state, action: PayloadAction<StyleKey>) => {
+      if (!styles[action.payload]) {
+        return
+      }
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(localStorageStyleKey, action.payload)
+      }
+
+      const style = styles[action.payload]
+
+      for (const key in style) {
+        state[`${key}Style`] = style[key]
+      }
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { setDarkMode, setStyle } = styleSlice.actions
+
+export default styleSlice.reducer
diff --git a/frontend/src/stores/ui_announcements/ui_announcementsSlice.ts b/frontend/src/stores/ui_announcements/ui_announcementsSlice.ts
new file mode 100644
index 0000000..cf7bf6b
--- /dev/null
+++ b/frontend/src/stores/ui_announcements/ui_announcementsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    ui_announcements: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    ui_announcements: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('ui_announcements/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `ui_announcements${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'ui_announcements/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('ui_announcements/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('ui_announcements/deleteUi_announcements', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`ui_announcements/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('ui_announcements/createUi_announcements', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'ui_announcements',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'ui_announcements/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('ui_announcements/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('ui_announcements/updateUi_announcements', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `ui_announcements/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const ui_announcementsSlice = createSlice({
+    name: 'ui_announcements',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.ui_announcements = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.ui_announcements = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Ui_announcements has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Ui_announcements'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Ui_announcements'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Ui_announcements'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Ui_announcements has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = ui_announcementsSlice.actions
+
+export default ui_announcementsSlice.reducer
diff --git a/frontend/src/stores/user_role_assignments/user_role_assignmentsSlice.ts b/frontend/src/stores/user_role_assignments/user_role_assignmentsSlice.ts
new file mode 100644
index 0000000..87bb960
--- /dev/null
+++ b/frontend/src/stores/user_role_assignments/user_role_assignmentsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    user_role_assignments: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    user_role_assignments: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('user_role_assignments/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `user_role_assignments${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'user_role_assignments/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('user_role_assignments/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('user_role_assignments/deleteUser_role_assignments', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`user_role_assignments/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('user_role_assignments/createUser_role_assignments', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'user_role_assignments',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'user_role_assignments/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('user_role_assignments/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('user_role_assignments/updateUser_role_assignments', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `user_role_assignments/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const user_role_assignmentsSlice = createSlice({
+    name: 'user_role_assignments',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.user_role_assignments = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.user_role_assignments = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'User_role_assignments has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'User_role_assignments'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'User_role_assignments'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'User_role_assignments'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'User_role_assignments has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = user_role_assignmentsSlice.actions
+
+export default user_role_assignmentsSlice.reducer
diff --git a/frontend/src/stores/users/usersSlice.ts b/frontend/src/stores/users/usersSlice.ts
new file mode 100644
index 0000000..96013aa
--- /dev/null
+++ b/frontend/src/stores/users/usersSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    users: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    users: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('users/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `users${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'users/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('users/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('users/deleteUsers', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`users/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('users/createUsers', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'users',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'users/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('users/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('users/updateUsers', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `users/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const usersSlice = createSlice({
+    name: 'users',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.users = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.users = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Users has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Users'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Users'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Users'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Users has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = usersSlice.actions
+
+export default usersSlice.reducer
diff --git a/frontend/src/stores/usersSlice.ts b/frontend/src/stores/usersSlice.ts
new file mode 100644
index 0000000..c03ffc9
--- /dev/null
+++ b/frontend/src/stores/usersSlice.ts
@@ -0,0 +1,117 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+interface MainState {
+  users: any
+  loading: boolean
+  notify: {
+    showNotification: boolean
+    textNotification: string
+    typeNotification: string
+  }
+}
+
+const initialState: MainState = {
+  users: [],
+  loading: false,
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+}
+
+export const fetch = createAsyncThunk('users/fetch', async (data: any) => {
+  const { id, query } = data
+  const result = await axios.get(
+    `users${
+      query || (id ? `/${id}` : '')
+    }`
+  )
+  return id ? result.data : result.data.rows
+})
+
+export const deleteItem = createAsyncThunk('users/deleteUser', async (id: string, thunkAPI) => {
+  try {
+    await axios.delete(`users/${id}`)
+    thunkAPI.dispatch(fetch({ id: '', query: '' }))
+  } catch (error) {
+    console.log(error)
+  }
+
+  // showNotification('Users has been deleted', 'success');
+})
+
+export const create = createAsyncThunk('users/createUser', async (data: any) => {
+  const result = await axios.post(
+    'users',
+    { data }
+  )
+  // showNotification('Users has been created', 'success');
+  return result.data
+})
+
+export const update = createAsyncThunk('users/updateUser', async (payload: any) => {
+  const result = await axios.put(
+    `users/${payload.id}`,
+    { id: payload.id, data: payload.data }
+  )
+  return result.data
+})
+
+export const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true
+    })
+    builder.addCase(fetch.rejected, (state) => {
+      state.loading = false
+    })
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      state.users = action.payload
+      state.loading = false
+    })
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true
+    })
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false
+    })
+
+    builder.addCase(deleteItem.rejected, (state) => {
+      state.loading = false
+    })
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true
+    })
+    builder.addCase(create.rejected, (state) => {
+      state.loading = false
+    })
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false
+    })
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true
+    })
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false
+    })
+    builder.addCase(update.rejected, (state) => {
+      state.loading = false
+    })
+  },
+})
+
+// Action creators are generated for each case reducer function
+// export const {  } = usersSlice.actions
+
+export default usersSlice.reducer
diff --git a/frontend/src/stores/vendor_invoices/vendor_invoicesSlice.ts b/frontend/src/stores/vendor_invoices/vendor_invoicesSlice.ts
new file mode 100644
index 0000000..33b3e65
--- /dev/null
+++ b/frontend/src/stores/vendor_invoices/vendor_invoicesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    vendor_invoices: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    vendor_invoices: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('vendor_invoices/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `vendor_invoices${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'vendor_invoices/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('vendor_invoices/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('vendor_invoices/deleteVendor_invoices', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`vendor_invoices/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('vendor_invoices/createVendor_invoices', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'vendor_invoices',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'vendor_invoices/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('vendor_invoices/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('vendor_invoices/updateVendor_invoices', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `vendor_invoices/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const vendor_invoicesSlice = createSlice({
+    name: 'vendor_invoices',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.vendor_invoices = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.vendor_invoices = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Vendor_invoices has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendor_invoices'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendor_invoices'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendor_invoices'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Vendor_invoices has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = vendor_invoicesSlice.actions
+
+export default vendor_invoicesSlice.reducer
diff --git a/frontend/src/stores/vendors/vendorsSlice.ts b/frontend/src/stores/vendors/vendorsSlice.ts
new file mode 100644
index 0000000..a36b072
--- /dev/null
+++ b/frontend/src/stores/vendors/vendorsSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    vendors: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    vendors: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('vendors/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `vendors${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'vendors/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('vendors/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('vendors/deleteVendors', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`vendors/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('vendors/createVendors', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'vendors',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'vendors/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('vendors/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('vendors/updateVendors', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `vendors/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const vendorsSlice = createSlice({
+    name: 'vendors',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.vendors = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.vendors = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Vendors has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendors'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendors'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Vendors'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Vendors has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = vendorsSlice.actions
+
+export default vendorsSlice.reducer
diff --git a/frontend/src/stores/warehouses/warehousesSlice.ts b/frontend/src/stores/warehouses/warehousesSlice.ts
new file mode 100644
index 0000000..25a6e10
--- /dev/null
+++ b/frontend/src/stores/warehouses/warehousesSlice.ts
@@ -0,0 +1,231 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    warehouses: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    rolesWidgets: any[];
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    warehouses: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    rolesWidgets: [],
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('warehouses/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `warehouses${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'warehouses/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('warehouses/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('warehouses/deleteWarehouses', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`warehouses/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('warehouses/createWarehouses', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'warehouses',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const uploadCsv = createAsyncThunk(
+  'warehouses/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+      try {
+          const data = new FormData();
+          data.append('file', file);
+          data.append('filename', file.name);
+
+          const result = await axios.post('warehouses/bulk-import', data, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          });
+
+          return result.data;
+      } catch (error) {
+          if (!error.response) {
+              throw error;
+          }
+
+          return rejectWithValue(error.response.data);
+      }
+  },
+);
+
+export const update = createAsyncThunk('warehouses/updateWarehouses', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `warehouses/${payload.id}`,
+          { id: payload.id, data: payload.data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
+
+export const warehousesSlice = createSlice({
+    name: 'warehouses',
+    initialState,
+    reducers: {
+        setRefetch: (state, action: PayloadAction<boolean>) => {
+            state.refetch = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetch.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(fetch.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(fetch.fulfilled, (state, action) => {
+            if (action.payload.rows && action.payload.count >= 0) {
+                state.warehouses = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.warehouses = action.payload;
+            }
+            state.loading = false
+        })
+
+        builder.addCase(deleteItemsByIds.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        });
+
+        builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Warehouses has been deleted');
+        });
+
+        builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        });
+
+        builder.addCase(deleteItem.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+
+        builder.addCase(deleteItem.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Warehouses'.slice(0, -1)} has been deleted`);
+        })
+
+        builder.addCase(deleteItem.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(create.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(create.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Warehouses'.slice(0, -1)} has been created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `${'Warehouses'.slice(0, -1)} has been updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+
+        builder.addCase(uploadCsv.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(uploadCsv.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Warehouses has been uploaded');
+        })
+        builder.addCase(uploadCsv.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
+        
+    },
+})
+
+// Action creators are generated for each case reducer function
+ export const { setRefetch } = warehousesSlice.actions
+
+export default warehousesSlice.reducer
diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts
new file mode 100644
index 0000000..a969b60
--- /dev/null
+++ b/frontend/src/styles.ts
@@ -0,0 +1,107 @@
+interface StyleObject {
+  aside: string
+  asideScrollbars: string
+  asideBrand: string
+  asideMenuItem: string
+  asideMenuItemActive: string
+  asideMenuDropdown: string
+  navBarItemLabel: string
+  navBarItemLabelHover: string
+  navBarItemLabelActiveColor: string
+  overlay: string
+  activeLinkColor: string;
+  bgLayoutColor: string;
+  iconsColor: string;
+  cardsColor: string;
+  focusRingColor: string;
+  corners: string;
+  cardsStyle: string;
+  linkColor: string;
+  websiteHeder: string;
+  borders: string;
+  shadow: string;
+  websiteSectionStyle: string;
+  textSecondary: string;
+}
+
+export const white: StyleObject = {
+  aside: 'bg-white dark:text-white',
+  asideScrollbars: 'aside-scrollbars-light',
+  asideBrand: '',
+  asideMenuItem: 'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
+  asideMenuItemActive: 'font-bold text-black dark:text-white',
+  asideMenuDropdown: 'bg-gray-100/75',
+  navBarItemLabel: 'text-blue-600',
+  navBarItemLabelHover: 'hover:text-black',
+  navBarItemLabelActiveColor: 'text-black',
+  overlay: 'from-white via-gray-100 to-white',
+  activeLinkColor: 'bg-gray-100/70',
+  bgLayoutColor: 'bg-gray-50',
+  iconsColor: 'text-blue-500',
+  cardsColor: 'bg-white',
+  focusRingColor: 'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+  corners: 'rounded',
+  cardsStyle: 'bg-white border border-pavitra-400',
+  linkColor: 'text-blue-600',
+  websiteHeder: 'border-b border-gray-200',
+  borders: 'border-gray-200',
+  shadow: '', 
+  websiteSectionStyle: '',
+  textSecondary: 'text-gray-500',
+}
+   
+
+
+
+
+export const dataGridStyles = {
+  '& .MuiDataGrid-cell': {
+    paddingX: 3,
+    border: 'none',
+  },
+  '& .MuiDataGrid-columnHeader': {
+    paddingX: 3,
+  },
+  '& .MuiDataGrid-columnHeaderCheckbox': {
+    paddingX: 0,
+  },
+  '& .MuiDataGrid-columnHeaders': {
+    paddingY: 4,
+    borderStartStartRadius: 7,
+    borderStartEndRadius: 7,
+  },
+  '& .MuiDataGrid-footerContainer': {
+    paddingY: 0.5,
+    borderEndStartRadius: 7,
+    borderEndEndRadius: 7,
+  },
+  '& .MuiDataGrid-root': {
+    border: 'none',
+  },
+};
+
+export const basic: StyleObject = {
+    aside: 'bg-gray-800',
+    asideScrollbars: 'aside-scrollbars-gray',
+    asideBrand: 'bg-gray-900 text-white',
+    asideMenuItem: 'text-gray-300 hover:text-white',
+    asideMenuItemActive: 'font-bold text-white',
+    asideMenuDropdown: 'bg-gray-700/50',
+    navBarItemLabel: 'text-black',
+    navBarItemLabelHover: 'hover:text-blue-500',
+    navBarItemLabelActiveColor: 'text-blue-600',
+    overlay: 'from-gray-700 via-gray-900 to-gray-700',
+    activeLinkColor: 'bg-gray-100/70',
+    bgLayoutColor: 'bg-gray-50',
+    iconsColor: 'text-blue-500',
+    cardsColor: 'bg-white',
+    focusRingColor: 'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none dark:focus:ring-blue-600 border-gray-300 dark:focus:border-blue-600',
+    corners: 'rounded',
+    cardsStyle: 'bg-white border border-pavitra-400',
+    linkColor: 'text-black',
+    websiteHeder: '',
+    borders: '',
+    shadow: '',
+    websiteSectionStyle: '',
+    textSecondary: '',
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..a06c7d1
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,110 @@
+/* eslint-env node */
+/* eslint-disable-next-line */
+const plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    asideScrollbars: {
+      light: 'light',
+      gray: 'gray'
+    },
+    extend: {
+      zIndex: {
+        '-1': '-1'
+      },
+      flexGrow: {
+        5: '5'
+      },
+      maxHeight: {
+        'screen-menu': 'calc(100vh - 3.5rem)',
+        modal: 'calc(100vh - 160px)'
+      },
+      transitionProperty: {
+        position: 'right, left, top, bottom, margin, padding',
+        textColor: 'color'
+      },
+      keyframes: {
+        'fade-out': {
+          from: { opacity: 1 },
+          to: { opacity: 0 }
+        },
+        'fade-in': {
+          from: { opacity: 0 },
+          to: { opacity: 1 }
+        }
+      },
+      animation: {
+        'fade-out': 'fade-out 250ms ease-in-out',
+        'fade-in': 'fade-in 250ms ease-in-out'
+      },
+      colors: {
+        dark: {
+          900: '#131618',
+          800: '#21242A',
+          700: '#2C2F36',
+          600: '#9CA3AF',
+          500: '#CBD5E1',
+        },
+        green:{
+          text: '#45B26B',
+        },
+        'pavitra': {
+          'blue': '#0162FD',
+          'green': '#00B448',
+          'orange': '#FFAA00',
+          'red': '#F20041',
+          900: '#14142A',
+          800: '#4E4B66',
+          700: '#6E7191',
+          600: '#A0A3BD',
+          500: '#D9DBE9',
+          400: '#EFF0F6',
+          300: '#F7F7FC'
+        },
+         
+        
+        },
+         borderRadius: {
+        '3xl': '2rem', 
+      },
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'aside-scrollbars': (value) => {
+            const track = value === 'light' ? '100' : '900';
+            const thumb = value === 'light' ? '300' : '600';
+            const color = value === 'light' ? 'gray' : value;
+
+            return {
+              scrollbarWidth: 'thin',
+              scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(
+                `colors.${color}.${track}`,
+              )}`,
+              '&::-webkit-scrollbar': {
+                width: '8px',
+                height: '8px',
+              },
+              '&::-webkit-scrollbar-track': {
+                backgroundColor: theme(`colors.${color}.${track}`),
+              },
+              '&::-webkit-scrollbar-thumb': {
+                borderRadius: '0.25rem',
+                backgroundColor: theme(`colors.${color}.${thumb}`),
+              },
+            };
+          },
+        },
+        { values: theme('asideScrollbars') },
+      );
+    }),
+  ],
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..5bee8c4
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
new file mode 100644
index 0000000..5c2e352
--- /dev/null
+++ b/frontend/yarn.lock
@@ -0,0 +1,3608 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/generator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz"
+  integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
+  dependencies:
+    "@babel/parser" "^7.26.3"
+    "@babel/types" "^7.26.3"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-module-imports@^7.16.7":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.19.0.tgz"
+  integrity sha512-JyXXoCu1N8GLuKc2ii8y5RGma5FMpFeO2nAQIe0Yzrbq+rQnN+sFj47auLblR5ka6aHNGPDgv8G/iI2Grb0ldQ==
+  dependencies:
+    core-js-pure "^3.20.2"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.25.9":
+  version "7.26.4"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz"
+  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.3"
+    "@babel/parser" "^7.26.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.3"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.25.9", "@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@emotion/babel-plugin@^11.13.5":
+  version "11.13.5"
+  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz"
+  integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.3.3"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0", "@emotion/cache@^11.4.0":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz"
+  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.11.3", "@emotion/react@^11.8.1":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz"
+  integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/cache" "^11.14.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz"
+  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.2"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.11.0":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz"
+  integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz"
+  integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
+
+"@emotion/utils@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz"
+  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
+"@eslint/eslintrc@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz"
+  integrity sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.4.0"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.12"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
+"@humanwhocodes/config-array@^0.10.4":
+  version "0.10.4"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz"
+  integrity sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/gitignore-to-minimatch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz"
+  integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
+"@mdi/js@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz"
+  integrity sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==
+
+"@mui/core-downloads-tracker@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.13.tgz"
+  integrity sha512-xe5RwI0Q2O709Bd2Y7l1W1NIwNmln0y+xaGk5VgX3vDJbkQEqzdfTFZ73e0CkEZgJwyiWgk5HY0l8R4nysOxjw==
+
+"@mui/material@^5.15.7":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-5.16.13.tgz"
+  integrity sha512-FhLDkDPYDzvrWCHFsdXzRArhS4AdYufU8d69rmLL+bwhodPcbm2C7cS8Gq5VR32PsW6aKZb58gvAgvEVaiiJbA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/core-downloads-tracker" "^5.16.13"
+    "@mui/system" "^5.16.13"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.13"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.13.tgz"
+  integrity sha512-+s0FklvDvO7j0yBZn19DIIT3rLfub2fWvXGtMX49rG/xHfDFcP7fbWbZKHZMMP/2/IoTRDrZCbY1iP0xZlmuJA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.16.13"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.13.tgz"
+  integrity sha512-2XNHEG8/o1ucSLhTA9J+HIIXjzlnEc0OV7kneeUQ5JukErPYT2zc6KYBDLjlKWrzQyvnQzbiffjjspgHUColZg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.13.5"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-5.16.13.tgz"
+  integrity sha512-JnO3VH3yNoAmgyr44/2jiS1tcNwshwAqAaG5fTEEjHQbkuZT/mvPYj2GC1cON0zEQ5V03xrCNl/D+gU9AXibpw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.16.13"
+    "@mui/styled-engine" "^5.16.13"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.13"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.15":
+  version "7.2.20"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz"
+  integrity sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==
+
+"@mui/utils@^5.14.16", "@mui/utils@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.16.13.tgz"
+  integrity sha512-35kLiShnDPByk57Mz4PP66fQUodCFiOD92HfpW6dK9lc7kjhZsKHRKeYPgWuwEHeXwYsCSFtBCW4RZh/8WT+TQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
+
+"@mui/x-data-grid@^6.19.2":
+  version "6.20.4"
+  resolved "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.20.4.tgz"
+  integrity sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/utils" "^5.14.16"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+    reselect "^4.1.8"
+
+"@next/env@14.2.22":
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/@next/env/-/env-14.2.22.tgz"
+  integrity sha512-EQ6y1QeNQglNmNIXvwP/Bb+lf7n9WtgcWvtoFsHquVLCJUuxRs+6SfZ5EK0/EqkkLex4RrDySvKgKNN7PXip7Q==
+
+"@next/eslint-plugin-next@13.0.4":
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.4.tgz"
+  integrity sha512-jZ4urKT+aO9QHm3ttihrIQscQISDSKK8isAom750+EySn9o3LCSkTdPGBtvBqY7Yku+NqhfQempR5J58DqTaVg==
+  dependencies:
+    glob "7.1.7"
+
+"@next/swc-darwin-arm64@14.2.22":
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.22.tgz"
+  integrity sha512-HUaLiehovgnqY4TMBZJ3pDaOsTE1spIXeR10pWgdQVPYqDGQmHJBj3h3V6yC0uuo/RoY2GC0YBFRkOX3dI9WVQ==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/utils@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz"
+  integrity sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    is-glob "^4.0.3"
+    open "^8.4.0"
+    picocolors "^1.0.0"
+    tiny-glob "^0.2.9"
+    tslib "^2.4.0"
+
+"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
+"@reduxjs/toolkit@^2.1.0":
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz"
+  integrity sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
+
+"@restart/hooks@^0.4.7":
+  version "0.4.16"
+  resolved "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz"
+  integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==
+  dependencies:
+    dequal "^2.0.3"
+
+"@rushstack/eslint-patch@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz"
+  integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
+
+"@seznam/compose-react-refs@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz"
+  integrity sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@0.5.5":
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
+  integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    tslib "^2.4.0"
+
+"@tailwindcss/forms@^0.5.7":
+  version "0.5.9"
+  resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz"
+  integrity sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
+"@tailwindcss/typography@^0.5.13":
+  version "0.5.15"
+  resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz"
+  integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
+"@tinymce/tinymce-react@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-4.3.2.tgz"
+  integrity sha512-wJHZhPf2Mk3yTtdVC/uIGh+kvDgKuTw/qV13uzdChTNo68JI1l7jYMrSQOpyimDyn5LHAw0E1zFByrm1WHAVeA==
+  dependencies:
+    prop-types "^15.6.2"
+    tinymce "^6.0.0 || ^5.5.1"
+
+"@types/date-arithmetic@*":
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz"
+  integrity sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==
+
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/node@18.7.16":
+  version "18.7.16"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz"
+  integrity sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg==
+
+"@types/numeral@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@types/numeral/-/numeral-2.0.2.tgz"
+  integrity sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
+"@types/prop-types@*", "@types/prop-types@^15.7.12":
+  version "15.7.14"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
+
+"@types/react-big-calendar@^1.8.8":
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.16.0.tgz"
+  integrity sha512-1w2GXAJWlGmaPZOd9J9cyWA/XBNOGRZ4MmRNypEQhwEMIIL9cfd1UdcvzSrQsnBm0qYF/scqmsISNbUzPBE1vg==
+  dependencies:
+    "@types/date-arithmetic" "*"
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react-redux@^7.1.24":
+  version "7.1.24"
+  resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz"
+  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.10":
+  version "4.4.12"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz"
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
+
+"@types/react@*", "@types/react@>=16.9.11":
+  version "18.0.19"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz"
+  integrity sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
+"@types/warning@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz"
+  integrity sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==
+
+"@typescript-eslint/eslint-plugin@^5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.37.0.tgz"
+  integrity sha512-Fde6W0IafXktz1UlnhGkrrmnnGpAo1kyX7dnyHHVrmwJOn72Oqm3eYtddrpOwwel2W8PAK9F3pIL5S+lfoM0og==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.37.0"
+    "@typescript-eslint/type-utils" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.37.0", "@typescript-eslint/parser@^5.42.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz"
+  integrity sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.43.0"
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/typescript-estree" "5.43.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.37.0.tgz"
+  integrity sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
+
+"@typescript-eslint/scope-manager@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz"
+  integrity sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+
+"@typescript-eslint/type-utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.37.0.tgz"
+  integrity sha512-BSx/O0Z0SXOF5tY0bNTBcDEKz2Ec20GVYvq/H/XNKiUorUFilH7NPbFUuiiyzWaSdN3PA8JV0OvYx0gH/5aFAQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.37.0.tgz"
+  integrity sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==
+
+"@typescript-eslint/types@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.43.0.tgz"
+  integrity sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==
+
+"@typescript-eslint/typescript-estree@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.37.0.tgz"
+  integrity sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/typescript-estree@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz"
+  integrity sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.37.0.tgz"
+  integrity sha512-jUEJoQrWbZhmikbcWSMDuUSxEE7ID2W/QCV/uz10WtQqfOuKZUqFGjqLJ+qhDd17rjgp+QJPqTdPIBWwoob2NQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.37.0"
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/typescript-estree" "5.37.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/visitor-keys@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.37.0.tgz"
+  integrity sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@typescript-eslint/visitor-keys@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz"
+  integrity sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@vtaits/use-lazy-ref@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/@vtaits/use-lazy-ref/-/use-lazy-ref-0.1.3.tgz"
+  integrity sha512-ZTLuFBHSivPcgWrwkXe5ExVt6R3/ybD+N0yFPy4ClzCztk/9bUD/1udKQ/jd7eCal+lapSrRWXbffqI9jkpDlg==
+
+"@yr/monotone-cubic-spline@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz"
+  integrity sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+apexcharts@^3.45.2:
+  version "3.54.1"
+  resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz"
+  integrity sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==
+  dependencies:
+    "@yr/monotone-cubic-spline" "^1.0.3"
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
+array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.flat@^1.2.5:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz"
+  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+autoprefixer@^10.4.0:
+  version "10.4.9"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.9.tgz"
+  integrity sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==
+  dependencies:
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001394"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+axe-core@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz"
+  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
+
+axios@^1.6.7:
+  version "1.7.9"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz"
+  integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.3:
+  version "4.21.3"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz"
+  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
+
+busboy@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001394, caniuse-lite@^1.0.30001579:
+  version "1.0.30001690"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz"
+  integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chart.js@^4.4.1:
+  version "4.4.7"
+  resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz"
+  integrity sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chroma-js@^2.4.2:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz"
+  integrity sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==
+
+classnames@^2.2.6:
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+core-js-pure@^3.20.2:
+  version "3.25.1"
+  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz"
+  integrity sha512-7Fr74bliUDdeJCBMxkkIuQ4xfxn/SwrVg+HkJUAoNEXVqYLv55l6Af0dJ5Lq2YBUW9yKqSkLXaS5SYPK6MGa/A==
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2, csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+date-arithmetic@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz"
+  integrity sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==
+
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+dayjs@^1.11.10, dayjs@^1.11.7:
+  version "1.11.13"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
+debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+decode-uri-component@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz"
+  integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+electron-to-chromium@^1.4.202:
+  version "1.4.248"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.248.tgz"
+  integrity sha512-qShjzEYpa57NnhbW2K+g+Fl+eNoDvQ7I+2MRwWnU6Z6F0HhXekzsECCLv+y2OJUsRodjqoSfwHkIX42VUFtUzg==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5, es-abstract@^1.20.4:
+  version "1.20.4"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz"
+  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@^13.0.4:
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.4.tgz"
+  integrity sha512-moEC7BW2TK7JKq3QfnaauqRjWzVcEf71gp5DbClpFPHM6QXE0u0uVvSTiHlmOgtCe1vyWAO+AhF87ZITd8mIDw==
+  dependencies:
+    "@next/eslint-plugin-next" "13.0.4"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
+eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.2.tgz"
+  integrity sha512-zX4ebnnyXiykjhcBvKIf5TNvt8K7yX6bllTRZ14MiurKPjDpCAZujlszTdB8pcNXhZcOf+god4s9SjQa5GnytQ==
+  dependencies:
+    debug "^4.3.4"
+    enhanced-resolve "^5.10.0"
+    get-tsconfig "^4.2.0"
+    globby "^13.1.2"
+    is-core-module "^2.10.0"
+    is-glob "^4.0.3"
+    synckit "^0.8.4"
+
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
+    has "^1.0.3"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.6.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    aria-query "^4.2.2"
+    array-includes "^3.1.5"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.4.3"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.3.2"
+    language-tags "^1.0.5"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
+
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.31.7:
+  version "7.31.8"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz"
+  integrity sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==
+  dependencies:
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.1"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.7"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint@^8.23.1:
+  version "8.23.1"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz"
+  integrity sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==
+  dependencies:
+    "@eslint/eslintrc" "^1.3.2"
+    "@humanwhocodes/config-array" "^0.10.4"
+    "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.1"
+    globals "^13.15.0"
+    globby "^11.1.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+filter-obj@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz"
+  integrity sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==
+
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+formik@^2.4.5:
+  version "2.4.6"
+  resolved "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz"
+  integrity sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
+  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+get-tsconfig@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.2.0.tgz"
+  integrity sha512-X8u8fREiYOE6S8hLbq99PeykTDoLVnxvF4DjWKJmz9xy2nNRdUcV8ZN9tniJFeKyTU3qnC9lL8n4Chd6LmVKHg==
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.1, glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.3, glob@7.1.7:
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globalize@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/globalize/-/globalize-0.1.1.tgz"
+  integrity sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA==
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.15.0:
+  version "13.17.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalyzer@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz"
+  integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+globby@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
+graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+intro.js-react@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/intro.js-react/-/intro.js-react-1.0.0.tgz"
+  integrity sha512-zR8pbTyX20RnCZpJMc0nuHBpsjcr1wFkj3ZookV6Ly4eE/LGpFTQwPsaA61Cryzwiy/tTFsusf4hPU9NpI9UOg==
+
+intro.js@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/intro.js/-/intro.js-7.2.0.tgz"
+  integrity sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==
+
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.10.0, is-core-module@^2.16.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.16.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
+js-sdsl@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz"
+  integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonwebtoken@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz"
+  integrity sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^7.5.4"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
+krustykrab@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/krustykrab/-/krustykrab-1.1.0.tgz"
+  integrity sha512-xpX9MPbw+nJseewe6who9Oq46RQwrBfps+dO/N4fSjJhsf2+y4XWC2kz46oBGX8yzMHyYJj35ug0X5s5yxB6tA==
+
+language-subtag-registry@~0.3.2:
+  version "0.3.22"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz"
+  integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz"
+  integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz"
+  integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz"
+  integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz"
+  integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz"
+  integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.0.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+luxon@^3.2.1:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz"
+  integrity sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==
+
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
+minimatch@^3.0.4, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+moment-timezone@^0.5.40:
+  version "0.5.46"
+  resolved "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz"
+  integrity sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==
+  dependencies:
+    moment "^2.29.4"
+
+moment@^2.29.4:
+  version "2.30.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
+ms@^2.1.1, ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nanoid@^3.3.6, nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next@^14.1.0:
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/next/-/next-14.2.22.tgz"
+  integrity sha512-Ps2caobQ9hlEhscLPiPm3J3SYhfwfpMqzsoCMZGWxt9jBRK9hoBZj2A37i8joKhsyth2EuVKDVJCTF5/H4iEDw==
+  dependencies:
+    "@next/env" "14.2.22"
+    "@swc/helpers" "0.5.5"
+    busboy "1.6.0"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
+    postcss "8.4.31"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "14.2.22"
+    "@next/swc-darwin-x64" "14.2.22"
+    "@next/swc-linux-arm64-gnu" "14.2.22"
+    "@next/swc-linux-arm64-musl" "14.2.22"
+    "@next/swc-linux-x64-gnu" "14.2.22"
+    "@next/swc-linux-x64-musl" "14.2.22"
+    "@next/swc-win32-arm64-msvc" "14.2.22"
+    "@next/swc-win32-ia32-msvc" "14.2.22"
+    "@next/swc-win32-x64-msvc" "14.2.22"
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz"
+  integrity sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+open@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/open/-/open-8.4.0.tgz"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+postcss-import@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
+  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.4, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^3.2.4:
+  version "3.4.2"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz"
+  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+query-string@^8.1.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz"
+  integrity sha512-tUZIw8J0CawM5wyGBiDOAp7ObdRQh4uBor/fUR9ZjmbZVvw95OD9If4w3MQxr99rg0DJZ/9CIORcpEqU5hQG7g==
+  dependencies:
+    decode-uri-component "^0.4.1"
+    filter-obj "^5.1.0"
+    split-on-first "^3.0.0"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+react-apexcharts@^1.4.1:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz"
+  integrity sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==
+  dependencies:
+    prop-types "^15.8.1"
+
+react-big-calendar@^1.10.3:
+  version "1.17.1"
+  resolved "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.17.1.tgz"
+  integrity sha512-LltUAMSGODWQBKx4013bRe6R0jaINV9hrs970+F860KedpozwRGGMT66esV9mA3mAhfSKoazF/QH1WCyLkXYZA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    clsx "^1.2.1"
+    date-arithmetic "^4.1.0"
+    dayjs "^1.11.7"
+    dom-helpers "^5.2.1"
+    globalize "^0.1.1"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    luxon "^3.2.1"
+    memoize-one "^6.0.0"
+    moment "^2.29.4"
+    moment-timezone "^0.5.40"
+    prop-types "^15.8.1"
+    react-overlays "^5.2.1"
+    uncontrollable "^7.2.1"
+
+react-chartjs-2@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz"
+  integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
+
+react-datepicker@^4.10.0:
+  version "4.25.0"
+  resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz"
+  integrity sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==
+  dependencies:
+    "@popperjs/core" "^2.11.8"
+    classnames "^2.2.6"
+    date-fns "^2.30.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.13.0"
+    react-popper "^2.3.0"
+
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-is@^16.13.1, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-is@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz"
+  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-onclickoutside@^6.13.0:
+  version "6.13.1"
+  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"
+  integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==
+
+react-overlays@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz"
+  integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==
+  dependencies:
+    "@babel/runtime" "^7.13.8"
+    "@popperjs/core" "^2.11.6"
+    "@restart/hooks" "^0.4.7"
+    "@types/warning" "^3.0.0"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
+react-redux@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz"
+  integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
+react-select-async-paginate@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.npmjs.org/react-select-async-paginate/-/react-select-async-paginate-0.7.9.tgz"
+  integrity sha512-oGdmXWatj06MNUcLwFkyt8qLBA0km0gFvDF52qaQQEArRjprbTajaYwhtjVotKTw1IXfw3fiq3G9Lgsjfpjz/Q==
+  dependencies:
+    "@seznam/compose-react-refs" "^1.0.6"
+    "@vtaits/use-lazy-ref" "^0.1.3"
+    krustykrab "^1.1.0"
+    sleep-promise "^9.1.0"
+    use-is-mounted-ref "^1.5.0"
+    use-latest "^1.3.0"
+
+react-select@^5.7.0:
+  version "5.9.0"
+  resolved "https://registry.npmjs.org/react-select/-/react-select-5.9.0.tgz"
+  integrity sha512-nwRKGanVHGjdccsnzhFte/PULziueZxGD8LL2WojON78Mvnq7LdAMEtu2frrwld1fr3geixg3iiMBIc/LLAZpw==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.2.0"
+
+react-switch@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/react-switch/-/react-switch-7.1.0.tgz"
+  integrity sha512-4xVeyImZE8QOTDw2FmhWz0iqo2psoRiS7XzdjaZBCIP8Dzo3rT0esHUjLee5WsAPSFXWWl1eVA5arp9n2C6yQA==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-toastify@^9.1.2:
+  version "9.1.3"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
+react-transition-group@^4.3.0, react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react/-/react-19.0.0.tgz"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.4"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-buffer@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.7, semver@^7.5.4:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+sleep-promise@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/sleep-promise/-/sleep-promise-9.1.0.tgz"
+  integrity sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA==
+
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+split-on-first@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz"
+  integrity sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==
+
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.matchall@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+  dependencies:
+    client-only "0.0.1"
+
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz"
+  integrity sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz"
+  integrity sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5, svg.js@>=2.3.x:
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
+swr@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
+  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+
+synckit@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz"
+  integrity sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.4.0"
+
+tailwindcss@^3.4.1:
+  version "3.4.17"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+tiny-glob@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz"
+  integrity sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==
+  dependencies:
+    globalyzer "0.1.0"
+    globrex "^0.1.2"
+
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+"tinymce@^6.0.0 || ^5.5.1":
+  version "6.8.5"
+  resolved "https://registry.npmjs.org/tinymce/-/tinymce-6.8.5.tgz"
+  integrity sha512-qAL/FxL7cwZHj4BfaF818zeJJizK9jU5IQzTcSLL4Rj5MaJdiVblEj7aDr80VCV1w9h4Lak9hlnALhq/kVtN1g==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.0, tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typescript@^4.8.3:
+  version "4.8.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz"
+  integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
+update-browserslist-db@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz"
+  integrity sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-is-mounted-ref@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/use-is-mounted-ref/-/use-is-mounted-ref-1.5.0.tgz"
+  integrity sha512-p5FksHf/ospZUr5KU9ese6u3jp9fzvZ3wuSb50i0y6fdONaHWgmOqQtxR/PUcwi6hnhQDbNxWSg3eTK3N6m+dg==
+
+use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz"
+  integrity sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==
+
+use-latest@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz"
+  integrity sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uuid@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..926fcdd
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,96 @@
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    client_max_body_size 10M;
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        ''      close;
+    }
+
+    server {
+        listen 8080;
+
+        error_page 502 /502.html;
+        location = /502.html {
+            root /usr/share/nginx/html;
+            internal;
+        }
+
+        location /api/logError {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3001/api/logError;
+        }
+
+
+        location /api-docs/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3000/api-docs/;
+        }
+
+        location /api/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range';
+            add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range';
+            proxy_pass http://127.0.0.1:3000/api/;
+        }
+
+        location / {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3001/;
+        }
+
+        location /app-shell/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:4000/;
+        }
+
+        location /locales/ {
+            root /app/frontend/public;
+            expires 1h;
+            add_header Cache-Control "public, must-revalidate";
+            try_files $uri =404;
+        }
+
+        location ~ /_next/webpack-hmr {
+            proxy_pass http://127.0.0.1:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location ~ ^/_next/ {
+            proxy_pass http://127.0.0.1:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cf4ff37
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "app",
+  "version": "0.0.1",
+  "scripts": {
+    "build:production": "cd ./frontend && yarn install && yarn run build && rm -rf ./node_modules && cd ../backend && yarn install",
+    "start:production": "cd ./backend && NODE_ENV=production yarn start"
+  }
+}