@bjsdistribution/dms-client-return 0.0.3 → 0.0.4

package/src/components/order-view/notes/logs/fakeData.ts

@@ -1,50 +1,10 @@
-export const fakeData = [
-  {
-    product_id: 'GS600',
-    created_at: '15/01/2024 06:22:47',
-    updated_at: '15/01/2024 06:22:47',
-    created_by: 'BJS Validation Via API',
-    note: 'New Product Added as per above client',
-    id: 1,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 2,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 3,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 4,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 5,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 6,
+export const NotesTableData = [
+  {
+    tableHead: [
+      { key: 'startFinish', label: 'Created', alwaysVisible: true },
+      { key: 'routeDetails', label: 'Notes', alwaysVisible: true },
+    ],
+    tableBody: [
+    ],
   },
 ];

package/src/components/order-view/notes/logs/index.tsx

@@ -1,59 +1,20 @@
 import React from 'react';
-// import { tableColumns } from './helper';
 import styled from 'styled-components';
-import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
-import { NotesStyledTable, NotesStyledTableWrapper } from './NotestableStyles';
-import CustomScrollBar from '../../../../common/scrollbar';
-// import GenericAuditLogsTable from '../../../add-order/order-details/common/generic-table/AuditLogs';
-// import { fakeData } from './fakeData';
+import GenericAuditLogsTable from '../../generic-table/AuditLogs';
+// import CustomScrollBar from '../../../../common/scrollbar';
 
 function AuditLogs() {
   return (
     <Container>
-      <CustomScrollBar>
-        <NotesStyledTableWrapper id="tableScrolling">
-          <NotesStyledTable>
-            <thead>
-              <tr>
-                {/* <th className="emailInvoiceNo">Invoice No.</th> */}
-                <th>Created</th>
-                <th>Notes</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.map((invoice: any) => (
-                <tr key={invoice.id}>
-                  <td>
-                    <ul style={{ listStyleType: 'none', padding: 0 }}>
-                      <li
-                        style={{
-                          color: '#3A3630',
-                          fontWeight: 600,
-                          paddingLeft: 0,
-                        }}
-                      >
-                        {' '}
-                        {invoice?.notes}
-                      </li>
-                      <li style={{ color: '#888075' }}>{invoice?.date}</li>
-                    </ul>
-                  </td>
-                  <td>{invoice?.customer_name}</td>
-                </tr>
-              ))}
-            </tbody>
-          </NotesStyledTable>
-        </NotesStyledTableWrapper>
-        {/* <CustomScrollBar> */}
-        {/* <GenericAuditLogsTable columns={tableColumns} data={fakeData} /> */}
-        {/* </CustomScrollBar> */}
-      </CustomScrollBar>
+      {/* <CustomScrollBar> */}
+      <GenericAuditLogsTable />
+      {/* </CustomScrollBar> */}
     </Container>
   );
 }
 
 const Container = styled.div`
-  height: 230px; /* Set height to limit container size */
+  height: 295px; /* Set height to limit container size */
   overflow: auto; /* Enable scrolling */
   scrollbar-width: thin;
 `;

package/src/components/order-view/order-resources/collapsed-content/index.tsx

@@ -9,6 +9,6 @@ const Font = styled.div`
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 20px; /* 150% */
 `;
 export default CollapsedContent;

package/src/components/order-view/products-info/expanded-content/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ProductTable from '../../return-client-products/ProductTable';
 // import OrderDetailsFooter from '../../order-details/expanded-content/footer';
-import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
+// import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
 import { Button } from '@bjsdistribution/dms-component-library';
 
 function ExpandedContent() {
@@ -17,7 +17,7 @@ function ExpandedContent() {
           <Button style={{ borderRadius: '20px' }} onClick={SaveNote}>
             SAVE Details
           </Button>
-          <NewReturnDropdown />
+          {/* <NewReturnDropdown /> */}
         </SaveNoteContainer>
       </MidConatiner>
     </Container>

package/src/components/order-view/products-info/index.tsx

@@ -16,8 +16,9 @@ interface ApiResponse {
 }
 
 function ProductsInfo() {
-  const [Data] = useOrderDetails();
-  const customerData = Data;
+  const [data] = useOrderDetails();
+  const customerData = data;
+
   // For API Call
   const [, setAPidata] = useProductDetails();
   const [, setLoading] = useLoading();

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -4,27 +4,29 @@ import {
   StyledTableWrapper,
 } from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
 import { Checkbox } from '@bjsdistribution/dms-component-library';
-import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
+// import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useSelectedOrders } from '../../../store';
+import { useProductDetails } from '../../store';
 
 const ReturnProductTable = () => {
-  const [selectedInvoices, setSelectedInvoices] = useSelectedOrders();
-  const [selectAll, setSelectAll] = useState(false);
+  const [selectedInvoices] = useSelectedOrders();
+  const [selectAll] = useState(false);
+  const [productData] = useProductDetails();
 
-  const handleSelectAll = (e: any) => {
-    setSelectAll(e.target.checked);
-    if (e.target.checked) {
-      setSelectedInvoices(
-        data.map((invoice: any) => ({
-          id: invoice.id,
-          status_id: 3,
-        }))
-      );
-    } else {
-      setSelectedInvoices([]);
-    }
-  };
+  // const handleSelectAll = (e: any) => {
+  //   setSelectAll(e.target.checked);
+  //   if (e.target.checked) {
+  //     setSelectedInvoices(
+  //       productData.map((invoice: any) => ({
+  //         id: invoice.id,
+  //         status_id: 3,
+  //       }))
+  //     );
+  //   } else {
+  //     setSelectedInvoices([]);
+  //   }
+  // };
 
   return (
     <div>
@@ -33,7 +35,7 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailInvoiceCheckbox">
-                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                <Checkbox checked={selectAll} onChange={() => {}} />
               </th>
               <th> Location</th>
               <th>Sender</th>
@@ -45,7 +47,7 @@ const ReturnProductTable = () => {
             </tr>
           </thead>
           <tbody>
-            {data?.map((invoice: any) => (
+            {productData?.map((invoice: any) => (
               <tr key={invoice.id}>
                 <td>
                   <Checkbox
@@ -56,25 +58,19 @@ const ReturnProductTable = () => {
                   />
                 </td>
 
-                <td>{invoice?.customer_name}</td>
+                <td>{'N/A'}</td>
 
                 <td>
-                  <ul style={{ listStyleType: 'none', padding: 0 }}>
-                    <li
-                      style={{
-                        color: '#0099ff',
-                        fontWeight: 600,
-                        paddingLeft: 0,
-                      }}
-                    >
-                      {invoice?.customer_name}
-                    </li>
-                  </ul>
+                  {/* <ul style={{ listStyleType: 'none', padding: 0 }}> */}
+                  {/* <li> */}
+                  {'N/A'}
+                  {/* </li> */}
+                  {/* </ul> */}
                 </td>
 
-                <td>{invoice?.customer_name}</td>
-                <td>{invoice?.customer_name}</td>
-                <td>{invoice?.customer_name}</td>
+                <td>{invoice?.code}</td>
+                <td>{invoice?.description}</td>
+                <td>{'N/A'}</td>
                 <td>1 of 1</td>
 
                 {/* <td onClick={() => dispatch({ type: 'email-sent' })}>

package/src/components/order-view/store.ts

@@ -230,6 +230,42 @@ export const selectedProductIdAtom = atom<number | null>(null);
 
 export const selectedTabKeyAtom = atom<string>('1');
 
+const eventNotesData = atom<any>([]);
+function useEventNotesData() {
+  return useAtom(eventNotesData);
+}
+
+const orderProductSystemLogs = atom<any>([]);
+function useOrderProductSystemLogs() {
+  return useAtom(orderProductSystemLogs);
+}
+
+const moduleIds = atom<{
+  id?: string;
+  parentId?: string;
+} | null>(null);
+
+export function usemoduleIds() {
+  return useAtom(moduleIds);
+}
+
+const CallAPi = atom(false);
+
+export function useCallAPi() {
+  return useAtom(CallAPi);
+}
+
+const NotesLoading = atom<boolean>(true);
+export const UseNotesLoading = () => {
+  return useAtom(NotesLoading);
+};
+
+const notes = atom<any>([]);
+
+export function usegetNotes() {
+  return useAtom(notes);
+}
+
 export const errorAtom = atom({
   homeError: '',
   mobileError: '',
@@ -253,12 +289,14 @@ export {
   useClientData,
   useReturnData,
   useReturnAfterOrderData,
+  useEventNotesData,
+  useOrderProductSystemLogs,
 };
 // Popup state Manage
 const initialState = null;
 const popupReducer = (state: any, action: any) => {
-  if (action.type === 'bulkUpdate') {
-    state = 'bulkUpdate';
+  if (action.type === 'create-return') {
+    state = 'create-return';
     return { state };
   } else if (action.type === 'addProduct') {
     state = 'addProduct';

package/src/components/order-view/system-event-logs/collapsed-content/index.tsx

@@ -11,6 +11,6 @@ const Font = styled.div`
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 20px; /* 150% */
 `;
 export default SystemCollapsedContent;

package/src/components/order-view/system-event-logs/columns/Code.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function Code(props: any) {
+  const data = props?.row?.original.event_code;
+  return (
+    <RowContainer>
+      <Row>{data}</Row>
+    </RowContainer>
+  );
+}
+
+const RowContainer = styled.div``;
+
+const Row = styled.div``;
+
+export default Code;

package/src/components/order-view/system-event-logs/columns/Date.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { formatDate } from '../../order-actions/utils';
+
+function Date(props: any) {
+  const data = props?.row?.original.created_at;
+  return (
+    <RowContainer>
+      <Row>{formatDate(data)}</Row>
+    </RowContainer>
+  );
+}
+
+const RowContainer = styled.div``;
+
+const Row = styled.div``;
+
+export default Date;

package/src/components/order-view/system-event-logs/columns/Event.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useEventNotesData } from '../../store';
+
+function Event(props: any) {
+  const data = props?.row?.original.event_information_id;
+  const [notesData] = useEventNotesData();
+
+  const getDescription = (eventId: number | undefined) => {
+    if (eventId === undefined || notesData?.length === 0) return '';
+
+    const eventData = notesData?.find((note: any) => note?.id === eventId);
+    return eventData ? eventData?.description : 'N/A';
+  };
+  return (
+    <RowContainer>
+      <Row>{getDescription(data)}</Row>
+    </RowContainer>
+  );
+}
+
+const RowContainer = styled.div``;
+
+const Row = styled.div``;
+
+export default Event;

package/src/components/order-view/system-event-logs/columns/Note.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function Note(props: any) {
+  const data = props?.row?.original?.event_notes;
+
+  return (
+    <RowContainer title={data}>
+      <Row>{data}</Row>
+    </RowContainer>
+  );
+}
+
+const RowContainer = styled.div`
+  display: inline-block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Row = styled.div``;
+
+export default Note;

package/src/components/order-view/system-event-logs/columns/index.tsx

@@ -0,0 +1,6 @@
+export { default as Event } from './Event';
+export { default as Date } from './Date';
+// export { default as Actions } from './actions/index';
+export { default as Code } from './Code';
+
+export { default as Note } from './Note';

package/src/components/order-view/system-event-logs/expanded-content/index.tsx

@@ -1,17 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import CollapsedContent from '../collapsed-content';
 import styled from 'styled-components';
 import CollapsableForm from '../../../../common/expand-collapse';
-// import DynamicTable from '../../DynamicTable';
-// import { SystemEventColumns, systemLgsEvents } from '../../../fakeData';
-import SystemLogsTables from '../system-logs-table/SystemLogsTables';
+import DynamicTable from '../../DynamicTable';
+import {
+  useEventNotesData,
+  useOrderDetails,
+  useOrderProductSystemLogs,
+} from '../../store';
+import { tableColumns } from '../helper';
+import useGetEventNotes from '../../hooks/useGetEventNotes';
 
 function SystemLogs() {
+  const [systemLogs] = useOrderProductSystemLogs();
+
+  const [orderDetails] = useOrderDetails();
+  const systemLogsData = useGetEventNotes();
+  const [, setNotesData] = useEventNotesData();
+  const gsitId = orderDetails?.gsit_order_id;
+
+  const fetchReminderData = async () => {
+    try {
+      const result = await systemLogsData();
+      if (result) {
+        setNotesData(result);
+      }
+    } catch (error) {
+      console.error('Error fetching event notes:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (gsitId) {
+      fetchReminderData();
+    }
+  }, [gsitId, setNotesData]);
+
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        {/* <DynamicTable columns={SystemEventColumns} data={systemLgsEvents} /> */}
-        <SystemLogsTables />
+        <DynamicTable columns={tableColumns} data={systemLogs} />
       </CollapsableForm>
     </Table>
   );

package/src/components/order-view/system-event-logs/helper.ts

@@ -0,0 +1,29 @@
+import {Note,  Code, Event, Date } from "./columns";
+
+export const tableColumns = [
+  {
+    header: 'Date',
+    accessorKey: 'date',
+    cell: Date,
+    enableSorting: false,
+  },
+
+  {
+    header: 'Code',
+    accessorKey: 'code',
+    cell: Code,
+    enableSorting: false,
+  },
+  {
+    header: 'Event',
+    accessorKey: 'event',
+    cell: Event,
+    enableSorting: false,
+  },
+  {
+    header: 'Note',
+    accessorKey: 'note',
+    cell: Note,
+    enableSorting: false,
+  },
+];

package/src/index.tsx

@@ -1,22 +1,49 @@
-import React, { Suspense } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import React, { Suspense, useEffect } from 'react';
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 // import AddOrder from './components/add-order';
 import OrderView from './components/order-view';
 // import AllReminder from './components/order-view/all-reminder/AllReminder';
 import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
 import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
+import { useTableName } from './components/order-daily-overview/store/store';
+// import ReturnOrderTable from './components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable';
 import ReturnMainTable from './components/order-daily-overview';
 
 function ReturnClient() {
   const LoadingMessage = () => <div>Loading...</div>;
+  const [selectedClient] = useTableName();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!location.pathname.includes('/return')) {
+      localStorage.removeItem('clientName');
+      localStorage.removeItem('clientId');
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (selectedClient) {
+      navigate(`/return/${selectedClient}`);
+    }
+  }, [selectedClient, navigate]);
 
   return (
     <Suspense fallback={<LoadingMessage />}>
       <Routes>
         <Route path="" element={<ReturnMainTable />} />
-        <Route path="return" element={<ReturnTable />} />
-        <Route path="returntable" element={<ReturnAfterTable />} />\
-        <Route path="details" element={<OrderView />} />
+        <Route path="order-return" element={<ReturnAfterTable />} />
+        <Route path="order-return/:id" element={<OrderView />} />
+        <Route path="return/:selectedClient" element={<ReturnTable />} />
+        <Route
+          path=""
+          element={
+            selectedClient ? (
+              <Navigate to={`/return/${selectedClient}`} />
+            ) : (
+              <ReturnMainTable />
+            )
+          }
+        />
       </Routes>
     </Suspense>
   );

package/dist/components/order-view/system-event-logs/system-logs-table/SystemLogsTables.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const SystemLogsTables: () => React.JSX.Element;
-export default SystemLogsTables;

package/dist/components/order-view/system-event-logs/system-logs-table/SytemLogsStyles.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const SystemStyledTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SystemStyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;

package/src/components/order-view/system-event-logs/system-logs-table/SystemLogsTables.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { SystemStyledTable, SystemStyledTableWrapper } from './SytemLogsStyles';
-import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
-import styled from 'styled-components';
-import CustomScrollBar from '../../../../common/scrollbar';
-
-const SystemLogsTables = () => {
-  return (
-    <Container>
-      <CustomScrollBar>
-        <SystemStyledTableWrapper id="tableScrolling">
-          <SystemStyledTable>
-            <thead>
-              <tr>
-                {/* <th className="emailInvoiceNo">Invoice No.</th> */}
-                <th>Date</th>
-                <th>Event</th>
-                <th>Notes</th>
-                <th>Code</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.map((invoice: any) => (
-                <tr key={invoice.id}>
-                  {/* <td>
-                  <ul style={{ listStyleType: 'none', padding: 0 }}>
-                    <li
-                      style={{
-                        color: '#0099ff',
-                        fontWeight: 600,
-                        paddingLeft: 0,
-                      }}
-                    ></li>
-                    <li style={{ color: '#888075' }}>
-                      {invoice?.customer_name}
-                    </li>
-                  </ul>
-                </td> */}
-                  <td>{invoice?.date}</td>
-                  <td>{invoice?.name}</td>
-                  <td>{invoice?.customer_name}</td>
-                  <td>{invoice?.account_number}</td>
-                </tr>
-              ))}
-            </tbody>
-          </SystemStyledTable>
-        </SystemStyledTableWrapper>
-      </CustomScrollBar>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  height: 230px; /* Set height to limit container size */
-  overflow: auto; /* Enable scrolling */
-  scrollbar-width: thin;
-`;
-
-export default SystemLogsTables;