@bjsdistribution/dms-client-return 0.0.3 → 0.0.5

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

@@ -1,9 +1,107 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import AddNote from './AddNote';
 import AuditLogs from './logs';
-
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  useCallAPi,
+  usegetNotes,
+  usemoduleIds,
+  UseNotesLoading,
+  useOrderId,
+} from '../store';
+import { useLocation } from 'react-router-dom';
 function Notes() {
+  const [moduleIds, setModuleIds] = usemoduleIds();
+  const [orderId] = useOrderId();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const orderIdLocaation = pathname.split('/')[1];
+  const [, setNoteLoadingStore] = UseNotesLoading();
+  const [, setNotes] = usegetNotes();
+  const [loderStatus] = useCallAPi();
+
+  // Declare `allIds` state to store the comma-separated IDs
+  // const [allIds, setAllIds] = useState<string | null>(null);
+
+  // Fetch module IDs
+  const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
+    endpoint: 'audit_logs/modules/',
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (!apiLoading && fetchedData?.data) {
+      const modules =
+        fetchedData?.data
+          .filter((item: any) => item?.name === 'ORDER')
+          .flatMap((item: any) =>
+            item?.static_child_mappings?.map((child: any) => ({
+              id: child?.child_module?.id,
+              name: child?.child_module?.name,
+              parentId: child?.parent_module?.id,
+              parentName: child?.parent_module?.name,
+            }))
+          ) || [];
+
+      // console.log(modules, 'modulesmodules');
+
+      // const ids = modules?.map((module: any) => module.id).join(',');
+      // setAllIds(ids);
+
+      // console.log(ids, 'allIds');
+
+      const orderNoteModule = modules?.find(
+        (module: any) => module?.name === 'ORDER-NOTE'
+      );
+
+      setModuleIds(orderNoteModule || modules[0] || null);
+    }
+  }, [apiLoading, fetchedData]);
+
+  // Fetch Notes Data when `allIds` is available
+  const {
+    data: NotesData,
+    loading: NotesLoading,
+    setShouldPerformAction,
+  } = useApiHook<{ data: any }>({
+    // Use `allIds` in the endpoint if it's set
+    endpoint: `audit_logs/?module_id=${
+      moduleIds?.parentId
+    }&module_object_id=${orderId || orderIdLocaation}
+    `,
+    method: 'GET',
+    performAction: false,
+  });
+
+  // &sub_module_ids=${allIds}
+
+  useEffect(() => {
+    setNoteLoadingStore(true);
+    if (moduleIds) {
+      // Ensure `allIds` is set
+      setShouldPerformAction(true);
+    }
+    if (!NotesLoading && NotesData?.data) {
+      const updatedData = NotesData?.data
+        // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
+        // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
+        .flat()
+        .filter(Boolean);
+
+      const combinedArray = updatedData.flat();
+      combinedArray.sort(
+        (a: any, b: any) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      );
+      setNotes(combinedArray);
+      setNoteLoadingStore(NotesLoading);
+      loderStatus
+        ? setShouldPerformAction(true)
+        : setShouldPerformAction(false);
+    }
+  }, [moduleIds, NotesLoading, loderStatus]); // Add `allIds` to dependencies
+
   return (
     <Container>
       <CardHeader>NOTES</CardHeader>
@@ -31,7 +129,6 @@ const CardHeader = styled.div`
   text-transform: uppercase;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
-
 `;
 
 const CustomizedFormSection = styled.div`

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,
+  },
+];