feat: ingredient product

src/app/[lang]/(sa)/(private)/layout.tsx

@@ -0,0 +1,75 @@
+// MUI Imports
+import Button from '@mui/material/Button'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+import type { ChildrenType } from '@core/types'
+
+// Layout Imports
+import HorizontalLayout from '@layouts/HorizontalLayout'
+import LayoutWrapper from '@layouts/LayoutWrapper'
+import VerticalLayout from '@layouts/VerticalLayout'
+
+// Component Imports
+import Providers from '@components/Providers'
+import HorizontalFooter from '@components/layout/horizontal/Footer'
+import Header from '@components/layout/horizontal/Header'
+import VerticalFooter from '@components/layout/vertical/Footer'
+import Navbar from '@components/layout/vertical/Navbar'
+import Navigation from '@components/layout/vertical/Navigation'
+import ScrollToTop from '@core/components/scroll-to-top'
+
+// Config Imports
+import { i18n } from '@configs/i18n'
+
+// Util Imports
+import { getDictionary } from '@/utils/getDictionary'
+import { getMode, getSystemMode } from '@core/utils/serverHelpers'
+import RolesGuard from '../../../../hocs/RolesGuard'
+
+const Layout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {
+  const params = await props.params
+
+  const { children } = props
+
+  // Vars
+  const direction = i18n.langDirection[params.lang]
+  const dictionary = await getDictionary(params.lang)
+  const mode = await getMode()
+  const systemMode = await getSystemMode()
+
+  return (
+    <Providers direction={direction}>
+      <RolesGuard locale={params.lang}>
+        <LayoutWrapper
+          systemMode={systemMode}
+          verticalLayout={
+            <VerticalLayout
+              navigation={<Navigation dictionary={dictionary} mode={mode} />}
+              navbar={<Navbar />}
+              footer={<VerticalFooter />}
+            >
+              {children}
+            </VerticalLayout>
+          }
+          horizontalLayout={
+            <HorizontalLayout header={<Header dictionary={dictionary} />} footer={<HorizontalFooter />}>
+              {children}
+            </HorizontalLayout>
+          }
+        />
+        <ScrollToTop className='mui-fixed'>
+          <Button
+            variant='contained'
+            className='is-10 bs-10 rounded-full p-0 min-is-0 flex items-center justify-center'
+          >
+            <i className='tabler-arrow-up' />
+          </Button>
+        </ScrollToTop>
+        {/* <Customizer dir={direction} /> */}
+      </RolesGuard>
+    </Providers>
+  )
+}
+
+export default Layout

src/app/[lang]/(sa)/(private)/sa/organizations/list/page.tsx

@@ -0,0 +1,25 @@
+import OrganizationListTable from '../../../../../../../views/sa/organizations/list/OrganizationListTable'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const OrganizationsListTablePage = async () => {
+  return <OrganizationListTable />
+}
+
+export default OrganizationsListTablePage