Chia-Network · wwills2 · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024
diff --git a/index.html b/index.html
@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-
     <link rel="icon" type="image/svg+xml" href="./logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sprout UI - Chia dApp ProjectsList</title>
+    <title>Climate Action Data Trust</title>
   </head>
   <body class="h-screen w-screen dark:bg-gray-800 dark:text-white">
     <div id="root" class="h-screen w-screen dark:bg-gray-800 dark:text-white"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "electron:package:linux": "npm run clean && npm run build && electron-builder -l -c.extraMetadata.main=build/main.js"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.2.1",
+    "@reduxjs/toolkit": "^2.2.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@types/styled-components": "^5.1.34",
@@ -35,15 +35,15 @@
     "chia-wallet": "^1.0.18",
     "chia-web2-gateway": "^1.0.10",
     "components": "^0.1.0",
-    "express": "^4.18.3",
+    "express": "^4.19.2",
     "flowbite": "^2.3.0",
-    "flowbite-react": "^0.7.3",
+    "flowbite-react": "^0.7.6",
     "flowbite-typography": "^1.0.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-content-loader": "^7.0.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.6.2",
+    "react-intl": "^6.6.4",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
     "react-webview": "^0.1.0",
@@ -56,28 +56,28 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.1.0",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "electron": "^28.2.7",
+    "electron": "^28.2.9",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "postcss": "^8.4.37",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
     "wait-on": "^7.2.0"
   },
   "standard-version": {

diff --git a/src/renderer/api/cadt/v1/index.ts b/src/renderer/api/cadt/v1/index.ts
@@ -2,16 +2,17 @@ import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
 
 const projectsTag: string = 'projects';
 const organizationsTag: string = 'organizations';
+const unitsTag: string = 'projects';
 
 const baseQuery = fetchBaseQuery({
   baseUrl: '/',
 });
 
-export { projectsTag, organizationsTag};
+export { projectsTag, organizationsTag, unitsTag};
 
 export const cadtApi = createApi({
   baseQuery,
   reducerPath: 'cadtApi',
-  tagTypes: [projectsTag, organizationsTag],
+  tagTypes: [projectsTag, organizationsTag, unitsTag],
   endpoints: () => ({}),
 });
diff --git a/src/renderer/api/cadt/v1/projects/projects.api.ts b/src/renderer/api/cadt/v1/projects/projects.api.ts
@@ -1,4 +1,4 @@
-import {cadtApi, projectsTag} from "../";
+import {cadtApi, projectsTag,} from "../";
 import {Project} from "@/schemas/Project.schema";
 
 const host: string = 'http://localhost:31310'
@@ -36,7 +36,7 @@ const projectsApi = cadtApi.injectEndpoints({
           method: 'GET',
         };
       },
-      providesTags: [projectsTag],
+      providesTags: (_response, _error, {orgUid}) => [{type: projectsTag, id: orgUid}],
     })
   })
 });

diff --git a/src/renderer/api/cadt/v1/units/index.ts b/src/renderer/api/cadt/v1/units/index.ts
@@ -0,0 +1 @@
+export * from './units.api';
diff --git a/src/renderer/api/cadt/v1/units/units.api.ts b/src/renderer/api/cadt/v1/units/units.api.ts
@@ -0,0 +1,45 @@
+import {cadtApi, unitsTag} from "../";
+
+const host: string = 'http://localhost:31310'
+
+interface GetUnitsParams {
+  page: number;
+  orgUid?: string;
+  search?: string;
+}
+
+interface GetUnitsResponse {
+  page: number,
+  pageCount: number,
+  data: any[]
+}
+
+const unitsApi = cadtApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getUnits: builder.query<GetUnitsResponse, GetUnitsParams>({
+      query: ({ page, orgUid, search }: GetUnitsParams) => {
+        // Initialize the params object with page and limit
+        const params: GetUnitsParams & {limit: number} = { page, limit: 10 };
+
+        if (orgUid) {
+          params.orgUid = orgUid;
+        }
+
+        if (search) {
+          params.search = search.replace(/[^a-zA-Z0-9 _.-]+/, '');
+        }
+
+        return {
+          url: `${host}/v1/units`,
+          params, // Use the constructed params object
+          method: 'GET',
+        };
+      },
+      providesTags: (_response, _error, {orgUid}) => [{type: unitsTag, id: orgUid}],
+    })
+  })
+});
+
+export const {
+  useGetUnitsQuery
+} = unitsApi;
diff --git a/src/renderer/api/index.ts b/src/renderer/api/index.ts
@@ -1 +1,3 @@
+export * from './cadt/v1/organizations';
+export * from './cadt/v1/units';
 export * from './cadt/v1/projects';
diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { IoMenu } from 'react-icons/io5';
 import { FormattedMessage } from 'react-intl';
-import { Sidebar } from 'flowbite-react';
+import { Sidebar } from '@/components';
 import ROUTES from '@/routes/route-constants';
 
 const LeftNav = () => {
@@ -57,6 +57,13 @@ const LeftNav = () => {
               >
                 <FormattedMessage id="projects-list" />
               </Sidebar.Item>
+              <Sidebar.Item
+                style={{ cursor: 'pointer' }}
+                active={isActive(ROUTES.UNITS_LIST)}
+                onClick={() => navigate(ROUTES.UNITS_LIST)}
+              >
+                <FormattedMessage id="units-list" />
+              </Sidebar.Item>
               {/* Add more Sidebar.Item as needed */}
             </Sidebar.ItemGroup>
           </Sidebar.Items>

diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { DebouncedFunc }from 'lodash'
 import { DataTable, PageCounter, Pagination } from '@/components';
 
 interface TableProps {
   data: any[];
   isLoading: boolean;
   currentPage: number;
-  onPageChange: () => void;
+  onPageChange: DebouncedFunc<(page: any) => void>;
   totalPages: number;
   totalCount: number;
 }

diff --git a/src/renderer/components/blocks/tables/SkeletonTable.tsx b/src/renderer/components/blocks/tables/SkeletonTable.tsx
@@ -47,24 +47,28 @@ const SkeletonTable: React.FC = () => {
         columns={columns}
         data={[
           {
+            id: 1,
             column1: 'value1',
             column2: 'value2',
             column3: 'value3',
             column4: 'value3',
           },
           {
+            id: 2,
             column1: 'value1',
             column2: 'value2',
             column3: 'value3',
             column4: 'value3',
           },
           {
+            id: 3,
             column1: 'value1',
             column2: 'value2',
             column3: 'value3',
             column4: 'value3',
           },
           {
+            id: 4,
             column1: 'value1',
             column2: 'value2',
             column3: 'value3',

diff --git a/src/renderer/components/blocks/tables/UnitsListTable.tsx b/src/renderer/components/blocks/tables/UnitsListTable.tsx
@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { DebouncedFunc }from 'lodash'
+import { DataTable, PageCounter, Pagination } from '@/components';
+
+interface TableProps {
+  data: any[];
+  isLoading: boolean;
+  currentPage: number;
+  onPageChange: DebouncedFunc<(page: any) => void>;
+  totalPages: number;
+  totalCount: number;
+}
+
+const UnitsListTable: React.FC<TableProps> = ({
+  data,
+  isLoading,
+  currentPage,
+  onPageChange,
+  totalPages,
+  totalCount,
+}) => {
+  const columns = useMemo(
+    () => [
+      {
+        title: <FormattedMessage id={'unit-owner'} />,
+        key: 'unitOwner',
+      },
+      {
+        title: <FormattedMessage id={'country-jurisdiction-of-owner'} />,
+        key: 'countryJurisdictionOfOwner',
+      },
+      {
+        title: <FormattedMessage id={'serial-number-block'} />,
+        key: 'serialNumberBlock',
+      },
+      {
+        title: <FormattedMessage id={'unit-count'} />,
+        key: 'unitCount',
+      },
+      {
+        title: <FormattedMessage id={'vintage-year'} />,
+        key: 'vintageYear',
+      },
+      {
+        title: <FormattedMessage id={'unit-type'} />,
+        key: 'unitType',
+      },
+      {
+        title: <FormattedMessage id={'marketplace'} />,
+        key: 'marketplace',
+      },
+      {
+        title: <FormattedMessage id={'unit-tags'} />,
+        key: 'unitTags',
+      },
+      {
+        title: <FormattedMessage id={'unit-status'} />,
+        key: 'unitStatus',
+      },
+      {
+        title: <FormattedMessage id={'corresponding-adjustment-declaration'} />,
+        key: 'correspondingAdjustmentDeclaration',
+      },
+      {
+        title: <FormattedMessage id={'corresponding-adjustment-status'} />,
+        key: 'correspondingAdjustmentStatus',
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={columns}
+        data={data}
+        primaryKey="warehouseUnitId"
+        isLoading={isLoading}
+        footer={
+          <>
+            <PageCounter currentPage={currentPage} totalCount={totalCount} />
+            <Pagination
+              currentPage={currentPage}
+              layout="pagination"
+              onPageChange={onPageChange}
+              showIcons={true}
+              totalPages={totalPages || 1}
+            />
+          </>
+        }
+      />
+    </div>
+  );
+};
+
+export { UnitsListTable };
diff --git a/src/renderer/components/blocks/tables/index.ts b/src/renderer/components/blocks/tables/index.ts
@@ -1,2 +1,3 @@
 export * from './ProjectsListTable';
-export * from './SkeletonTable';
+export * from './SkeletonTable';
+export * from './UnitsListTable';
diff --git a/src/renderer/components/icons/AppLogo.tsx b/src/renderer/components/icons/AppLogo.tsx
@@ -1,4 +1,5 @@
 import logo from '@/assets/img/CAD-Logo-RGB-Full-Colour.png';
+import React from "react";
 
 interface AppLogoProps {
   width: string,

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
@@ -3,4 +3,5 @@ export * from './layout';
 export * from './blocks';
 export * from './typography';
 export * from './form';
-export * from './proxy';
+export * from './proxy';
+export * from './icons';