feat: skeleton of projects modal

feat: modal proxy
feat: tabs proxy

src/renderer/components/blocks/modals/ProjectModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Modal, Tabs } from '@/components';
+import { FormattedMessage } from 'react-intl';
+
+interface ProjectModalProps {
+  warehouseProjectId: string;
+  onClose: () => void;
+}
+
+const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose }: ProjectModalProps) => {
+  return (
+    <Modal onClose={onClose} show={true} size={'8xl'}>
+      <Modal.Header>
+        <FormattedMessage id={'detailed-project-view'} />
+      </Modal.Header>
+      <Modal.Body>
+        <Tabs>
+          <Tabs.Item title={<FormattedMessage id={'project'} />}>
+            this is the project tab for warehouse project {warehouseProjectId}
+          </Tabs.Item>
+          <Tabs.Item title={<FormattedMessage id={'issuance'} />}>this is the issuance tab</Tabs.Item>
+          <Tabs.Item title={<FormattedMessage id={'project-locations'} />}>this is the project locations tab</Tabs.Item>
+          <Tabs.Item title={<FormattedMessage id={'estimations'} />}>this is the project estimations tab</Tabs.Item>
+        </Tabs>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export { ProjectModal };

src/renderer/components/blocks/modals/index.ts

@@ -1 +1 @@
-export {}
+export * from './ProjectModal';

src/renderer/components/proxy/Modal.tsx

@@ -0,0 +1,23 @@
+import { Modal as FlowbiteModal, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps } from 'flowbite-react';
+
+function Modal({ children, ...props }: ModalProps) {
+  return <FlowbiteModal {...props}>{children}</FlowbiteModal>;
+}
+
+function Body({ children, ...props }: ModalBodyProps) {
+  return <FlowbiteModal.Body {...props}>{children}</FlowbiteModal.Body>;
+}
+
+function Header({ children, ...props }: ModalHeaderProps) {
+  return <FlowbiteModal.Header {...props}>{children}</FlowbiteModal.Header>;
+}
+
+function Footer({ children, ...props }: ModalFooterProps) {
+  return <FlowbiteModal.Footer {...props}>{children}</FlowbiteModal.Footer>;
+}
+
+Modal.Body = Body;
+Modal.Header = Header;
+Modal.Footer = Footer;
+
+export { Modal };

src/renderer/components/proxy/Tabs.tsx

@@ -0,0 +1,17 @@
+import { TabItemProps, Tabs as FlowbiteTabs, TabsProps } from 'flowbite-react';
+
+function Tabs({ children, ...props }: TabsProps) {
+  return <FlowbiteTabs {...props}>{children}</FlowbiteTabs>;
+}
+
+function Item({ children, ...props }: TabItemProps) {
+  return (
+    <FlowbiteTabs.Item className={'active:on:bg-gray-100 text-cyan-600 dark:bg-gray-800 dark:text-cyan-500'} {...props}>
+      {children}
+    </FlowbiteTabs.Item>
+  );
+}
+
+Tabs.Item = Item;
+
+export { Tabs };

src/renderer/components/proxy/index.ts

@@ -4,4 +4,6 @@ export * from './Dropdown';
 export * from './TextInput';
 export * from './Spinner';
 export * from './Sidebar';
-export * from './Tooltip';
+export * from './Tooltip';
+export * from './Modal';
+export * from './Tabs';

src/renderer/pages/ProjectsList/ProjectsListPage.tsx

@@ -1,15 +1,14 @@
 import React, { useCallback } from 'react';
 import { useGetProjectsQuery } from '@/api';
-import { useQueryParamState, useColumnOrderHandler } from '@/hooks';
-import { debounce, DebouncedFunc } from 'lodash';
+import { useColumnOrderHandler, useQueryParamState, useWildCardUrlHash } from '@/hooks';
+import { debounce } from 'lodash';
 import {
-  OrganizationSelector,
   IndeterminateProgressOverlay,
-  SkeletonTable,
+  OrganizationSelector,
+  ProjectModal,
   ProjectsListTable,
   SearchBox,
-  SyncIndicator,
-  OrgUidBadge,
+  SkeletonTable,
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
@@ -19,6 +18,7 @@ const ProjectsListPage: React.FC = () => {
   const [search, setSearch] = useQueryParamState('search', undefined);
   const [order, setOrder] = useQueryParamState('order', undefined);
   const handleSetOrder = useColumnOrderHandler(order, setOrder);
+  const [projectDetailsFragment, projectDetailsModalActive, setProjectModalActive] = useWildCardUrlHash('project-');
 
   const {
     data: projectsData,
@@ -27,7 +27,7 @@ const ProjectsListPage: React.FC = () => {
     error: projectsError,
   } = useGetProjectsQuery({ page: Number(currentPage), orgUid, search, order });
 
-  const handlePageChange: DebouncedFunc<any> = useCallback(
+  const handlePageChange = useCallback(
     debounce((page) => setCurrentPage(page), 800),
     [setCurrentPage],
   );
@@ -39,7 +39,7 @@ const ProjectsListPage: React.FC = () => {
     [setOrgUid],
   );
 
-  const handleSearchChange: DebouncedFunc<any> = useCallback(
+  const handleSearchChange = useCallback(
     debounce((event: any) => {
       setSearch(event.target.value);
     }, 800),
@@ -61,15 +61,9 @@ const ProjectsListPage: React.FC = () => {
   return (
     <>
       {projectsFetching && <IndeterminateProgressOverlay />}
-      <div className="flex flex-col lg:flex-row gap-6 pl-1 my-2.5 relative z-30">
+      <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange} />
-        <OrganizationSelector
-          onSelect={handleOrganizationSelected}
-          defaultOrgUid={orgUid}
-          noSelectionLabel="All Organizations"
-        />
-        <SyncIndicator detailed={true} orgUid={orgUid} />
-        <OrgUidBadge orgUid={orgUid} />
+        <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
       </div>
 
       {projectsLoading ? (
@@ -86,6 +80,12 @@ const ProjectsListPage: React.FC = () => {
           totalCount={projectsData.pageCount * 10}
         />
       )}
+      {projectDetailsModalActive && (
+        <ProjectModal
+          onClose={() => setProjectModalActive(false)}
+          warehouseProjectId={projectDetailsFragment.replace('project-', '')}
+        />
+      )}
     </>
   );
 };

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

@@ -39,5 +39,10 @@
   "validation-body": "Validation Body",
   "glossary": "Glossary",
   "term": "Term",
-  "description": "Description"
+  "description": "Description",
+  "detailed-project-view": "Detailed Project View",
+  "project": "Project",
+  "issuance": "Issuance",
+  "project-locations": "Project Locations",
+  "estimations": "Estimations"
 }