Merge branch 'refactor/refactor-base' into refactor/projects-modal

src/renderer/api/cadt/v1/audit/audit.api.ts

@@ -1,7 +1,5 @@
 import {cadtApi, auditTag} from "../";
 
-const host: string = 'http://localhost:31310'
-
 interface GetAuditParams {
   page: number;
   orgUid: string;
@@ -31,8 +29,8 @@ const auditApi = cadtApi.injectEndpoints({
         }
 
         return {
-          url: `${host}/v1/audit`,
-          params, // Use the constructed params object
+          url: `/v1/audit`,
+          params,
           method: 'GET',
         };
       },

src/renderer/api/cadt/v1/governance/governance.api.ts

@@ -2,8 +2,6 @@ import { cadtApi } from '../';
 // @ts-ignore
 import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
 
-const host: string = 'http://localhost:31310';
-
 interface BaseQueryResult {
   [key: string]: string[];
 }
@@ -22,7 +20,7 @@ const governanceApi = cadtApi.injectEndpoints({
   endpoints: (builder) => ({
     getGlossary: builder.query<GlossaryItem[], void>({
       query: () => ({
-        url: `${host}/v1/governance/meta/glossary`,
+        url: `/v1/governance/meta/glossary`,
         method: 'GET',
       }),
       transformResponse: (baseQueryReturnValue: BaseQueryResult): GlossaryItem[] => {

src/renderer/api/cadt/v1/index.ts

@@ -1,19 +1,41 @@
-import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import initialState from '@/store/slices/app/app.initialstate';  // Ensure this path is correct
 
-const projectsTag: string = 'projects';
-const organizationsTag: string = 'organizations';
-const unitsTag: string = 'projects';
-const auditTag: string = 'audit';
+const projectsTag = 'projects';
+const organizationsTag = 'organizations';
+const unitsTag = 'projects';
+const auditTag = 'audit';
 
 const baseQuery = fetchBaseQuery({
   baseUrl: '/',
 });
 
-export { projectsTag, organizationsTag, unitsTag, auditTag};
+const baseQueryWithDynamicHost = async (args, api, extraOptions) => {
+  let modifiedArgs = args;
+  const state = api.getState();
+  const currentHost = state.app.apiHost;
+
+  // Check if currentHost is equal to the initialState's apiHost
+  const effectiveHost = (currentHost === initialState.apiHost && import.meta.env.VITE_API_HOST) ? import.meta.env.VITE_API_HOST : currentHost;
+
+  // Modify the URL based on the effectiveHost
+  if (typeof args === 'string') {
+    modifiedArgs = `${effectiveHost}${args}`;
+  } else if (args && typeof args === 'object') {
+    modifiedArgs = {
+      ...args,
+      url: `${effectiveHost}${args.url}`,
+    };
+  }
+
+  return await baseQuery(modifiedArgs, api, extraOptions);
+};
 
 export const cadtApi = createApi({
-  baseQuery,
+  baseQuery: baseQueryWithDynamicHost,
   reducerPath: 'cadtApi',
   tagTypes: [projectsTag, organizationsTag, unitsTag, auditTag],
   endpoints: () => ({}),
 });
+
+export { projectsTag, organizationsTag, unitsTag, auditTag };

src/renderer/api/cadt/v1/organizations/organizations.api.ts

@@ -3,8 +3,6 @@ import {cadtApi, organizationsTag} from "../";
 import {BaseQueryResult} from "@reduxjs/toolkit/dist/query/baseQueryTypes";
 import {Organization} from "@/schemas/Organization.schema";
 
-const host: string = 'http://localhost:31310'
-
 interface GetOrgnaizationsMapResponse {
   [index: string]: Organization
 }
@@ -13,7 +11,7 @@ const organizationsApi = cadtApi.injectEndpoints({
   endpoints: (builder) => ({
     getOrganizationsList: builder.query<Organization[], void | null>({
       query: () => ({
-        url: `${host}/v1/organizations`,
+        url: `/v1/organizations`,
         method: 'GET',
       }),
       providesTags: [organizationsTag],
@@ -24,7 +22,7 @@ const organizationsApi = cadtApi.injectEndpoints({
 
     getOrganizationsMap: builder.query<GetOrgnaizationsMapResponse, void | null>({
       query: () => ({
-        url: `${host}/v1/organizations`,
+        url: `/v1/organizations`,
         method: 'GET',
       }),
       providesTags: [organizationsTag],

src/renderer/api/cadt/v1/projects/projects.api.ts

@@ -1,8 +1,6 @@
 import {cadtApi, projectsTag,} from "../";
 import {Project} from "@/schemas/Project.schema";
 
-const host: string = 'http://localhost:31310'
-
 interface GetProjectsParams {
   page: number;
   orgUid?: string;
@@ -36,8 +34,8 @@ const projectsApi = cadtApi.injectEndpoints({
         }
 
         return {
-          url: `${host}/v1/projects`,
-          params, // Use the constructed params object
+          url: `/v1/projects`,
+          params,
           method: 'GET',
         };
       },

src/renderer/api/cadt/v1/units/units.api.ts

@@ -1,8 +1,6 @@
 import {cadtApi, unitsTag} from "../";
 import {Unit} from "@/schemas/Unit.schema";
 
-const host: string = 'http://localhost:31310'
-
 interface GetUnitsParams {
   page: number;
   orgUid?: string;
@@ -36,8 +34,8 @@ const unitsApi = cadtApi.injectEndpoints({
         }
 
         return {
-          url: `${host}/v1/units`,
-          params, // Use the constructed params object
+          url: `/v1/units`,
+          params,
           method: 'GET',
         };
       },

src/renderer/components/blocks/layout/LeftNav.tsx

@@ -2,8 +2,9 @@ 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 '@/components';
+import {Sidebar, WarehouseIcon} from '@/components';
 import ROUTES from '@/routes/route-constants';
+import {Card} from "@/components";
 
 const LeftNav = () => {
   const navigate = useNavigate();
@@ -66,6 +67,14 @@ const LeftNav = () => {
       {/* Original Desktop LeftNav Layout */}
       <div className="hidden md:block">
         <Sidebar aria-label="App Navigation">
+          <Card className="max-w-sm mb-6 shadow-none">
+            <div className={'flex space-x-3 justify-center'}>
+              <WarehouseIcon height={24} width={24}/>
+              <div>
+                <FormattedMessage id={'warehouse'}/>
+              </div>
+            </div>
+          </Card>
           <Sidebar.Items>
             <Sidebar.ItemGroup>
               <Sidebar.Item

src/renderer/components/icons/WarehouseIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface WarehouseIconProps {
+  width: number | string | undefined;
+  height: number | string | undefined;
+}
+
+const WarehouseIcon: React.FC<WarehouseIconProps> = ({ width, height }: WarehouseIconProps) => {
+  return (
+    <svg
+      width={`${width}px`}
+      height={`${height}px`}
+      viewBox="0 0 22 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.5 7.45312H6.49998C6.39685 7.45312 6.31248 7.5375 6.31248 7.64062V17.0625C6.31248 17.1656 6.39685 17.25 6.49998 17.25H15.5C15.6031 17.25 15.6875 17.1656 15.6875 17.0625V7.64062C15.6875 7.5375 15.6031 7.45312 15.5 7.45312ZM7.81248 8.95312H14.1875V11.6953H7.81248V8.95312ZM14.1875 15.75H7.81248V13.0078H14.1875V15.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.93748 14.5312C8.93748 14.7302 9.01649 14.9209 9.15715 15.0616C9.2978 15.2022 9.48856 15.2812 9.68748 15.2812C9.88639 15.2812 10.0772 15.2022 10.2178 15.0616C10.3585 14.9209 10.4375 14.7302 10.4375 14.5312C10.4375 14.3323 10.3585 14.1416 10.2178 14.0009C10.0772 13.8603 9.88639 13.7812 9.68748 13.7812C9.48856 13.7812 9.2978 13.8603 9.15715 14.0009C9.01649 14.1416 8.93748 14.3323 8.93748 14.5312ZM8.93748 10.3594C8.93748 10.5583 9.01649 10.7491 9.15715 10.8897C9.2978 11.0304 9.48856 11.1094 9.68748 11.1094C9.88639 11.1094 10.0772 11.0304 10.2178 10.8897C10.3585 10.7491 10.4375 10.5583 10.4375 10.3594C10.4375 10.1605 10.3585 9.9697 10.2178 9.82904C10.0772 9.68839 9.88639 9.60938 9.68748 9.60938C9.48856 9.60938 9.2978 9.68839 9.15715 9.82904C9.01649 9.9697 8.93748 10.1605 8.93748 10.3594Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0181 5.64609C16.9447 2.8125 14.2095 0.796875 11.0056 0.796875C7.8017 0.796875 5.06655 2.81016 3.99311 5.64375C1.97514 6.17578 0.489205 8.02031 0.500923 10.2094C0.514986 12.6562 2.41342 14.6461 4.80405 14.8594C4.9142 14.8687 5.00795 14.782 5.00795 14.6719V13.2562C5.00795 13.1625 4.93764 13.0828 4.84389 13.0711C4.21108 12.9914 3.61342 12.7148 3.15405 12.2625C2.59155 11.7117 2.28217 10.9711 2.28217 10.1859C2.28217 9.52969 2.49545 8.91094 2.89624 8.39531C3.28764 7.89375 3.83842 7.53047 4.44545 7.37109L5.33374 7.13672L5.65952 6.27656C5.86108 5.74219 6.14233 5.24062 6.49624 4.78828C6.84545 4.33828 7.2603 3.94453 7.72436 3.61641C8.68764 2.93906 9.82202 2.58047 11.0056 2.58047C12.1892 2.58047 13.3236 2.93906 14.2869 3.61875C14.7533 3.94687 15.1658 4.34062 15.515 4.79062C15.8689 5.24297 16.1501 5.74453 16.3517 6.27891L16.6751 7.13672L17.5611 7.37109C18.8314 7.70859 19.7197 8.86406 19.7197 10.1836C19.7197 10.9711 19.4103 11.7094 18.8478 12.2602C18.3908 12.7102 17.7955 12.9891 17.1626 13.0687C17.0689 13.0805 17.0009 13.1602 17.0009 13.2539V14.6719C17.0009 14.782 17.097 14.8687 17.2072 14.8594C19.5908 14.6437 21.4845 12.6562 21.5009 10.2141C21.515 8.025 20.0314 6.18047 18.0181 5.64609Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { WarehouseIcon };

src/renderer/components/icons/index.ts

@@ -1 +1,2 @@
-export * from './AppLogo';
+export * from './AppLogo';
+export * from './WarehouseIcon';

src/renderer/components/proxy/Card.tsx

@@ -0,0 +1,9 @@
+import {Card as FlowbiteCard, CardProps} from 'flowbite-react';
+
+function Card({ children, ...props }: CardProps) {
+  return (
+    <FlowbiteCard {...props}>{children}</FlowbiteCard>
+  );
+}
+
+export {Card};

src/renderer/components/proxy/Sidebar.tsx

@@ -3,7 +3,7 @@ import {
   SidebarProps,
   SidebarItemProps,
   SidebarItemsProps,
-  SidebarItemGroupProps
+  SidebarItemGroupProps,
 } from 'flowbite-react';
 
 function Sidebar({ children, ...props }: SidebarProps) {
@@ -26,7 +26,7 @@ function ItemGroup({children, ...props}: SidebarItemGroupProps) {
 
 function Item({children, ...props}: SidebarItemProps) {
   return (
-    <FlowbiteSidebar.Item {...props}>{children}</FlowbiteSidebar.Item>
+    <FlowbiteSidebar.Item className={'active:bg-green-500 dark:active:bg-green-500'} {...props}>{children}</FlowbiteSidebar.Item>
   );
 }
 

src/renderer/components/proxy/index.ts

@@ -7,3 +7,4 @@ export * from './Sidebar';
 export * from './Tooltip';
 export * from './Modal';
 export * from './Tabs';
+export * from './Card';

src/renderer/store/slices/app/app.initialstate.ts

@@ -1,3 +1,4 @@
 export default {
   locale: null,
+  apiHost: 'http://localhost:31310'
 };

src/renderer/store/slices/app/app.slice.ts

@@ -8,11 +8,14 @@ export const appSlice = createSlice({
     setLocale: (state, { payload }) => {
       state.locale = payload;
     },
+    setHost: (state, { payload }) => {
+      state.apiHost = payload;
+    },
   },
 });
 
-export const {
-  setLocale,
-} = appSlice.actions;
+export const { setLocale, setHost } = appSlice.actions;
+
+export const selectCurrentHost = (state) => state.app.host;
 
 export default appSlice.reducer;

src/renderer/translations/tokens/en-US.json

@@ -45,4 +45,5 @@
   "issuance": "Issuance",
   "project-locations": "Project Locations",
   "estimations": "Estimations"
+  "warehouse": "Warehouse"
 }