@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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 { useSelectedEmail } from '../../../store';
+// 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] = useSelectedEmail();
-  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

@@ -1,6 +1,13 @@
 import { atom, useAtom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
-import { CreateProduct, OrderActionsType, OrdersType, UnRecieveOrderProduct, UpdateOrderProduct } from './types';
+import {
+  CreateProduct,
+  OrderActionsType,
+  OrdersType,
+  UnRecieveOrderProduct,
+  UpdateOrderProduct,
+} from './types';
+import { ClientData } from '../order-daily-overview/common/interface';
 // OrderActionsType
 const activeTabAtom = atom<string>('active');
 const infoAtom = atom<boolean | undefined>(false);
@@ -11,6 +18,11 @@ const date = atom(new Date());
 
 const orderStaticDataAtom = atom<any>({});
 
+const clientDataAtom = atom<ClientData[]>([]);
+const returnDataAtom = atom<any[]>([]);
+
+const returnAfterOrderAtom = atom<any[]>([]);
+
 export const ordersInitialValue: OrdersType = {
   depot_id: null,
   gsit_order_id: null,
@@ -92,18 +104,18 @@ export const orderProductInitialvalue: CreateProduct = {
 };
 
 export const unrecieveOrderProducts: UnRecieveOrderProduct = {
-    unrecieve_reason_id: 0,
-    unrecieve_note: '',
-    // id: 0
+  unrecieve_reason_id: 0,
+  unrecieve_note: '',
+  // id: 0
 };
 
 export const updateOrderProducts: UpdateOrderProduct = {
   id: 0,
-    order_id: 0,
-    product_type_id: 0,
-    product_return_action_id: 0,
-    return_location: '',
-    return_reason_id: 0
+  order_id: 0,
+  product_type_id: 0,
+  product_return_action_id: 0,
+  return_location: '',
+  return_reason_id: 0,
 };
 
 export const usedate = () => {
@@ -126,6 +138,17 @@ function useOrderStaticData() {
   return useAtom(orderStaticDataAtom);
 }
 
+function useClientData() {
+  return useAtom(clientDataAtom);
+}
+
+function useReturnData() {
+  return useAtom(returnDataAtom);
+}
+
+function useReturnAfterOrderData() {
+  return useAtom(returnAfterOrderAtom);
+}
 // Define initial modal state
 export const initialModalState = {
   openModalType: null,
@@ -191,7 +214,9 @@ function useCreateOrderProducts() {
   return useAtom(createOrderProduct);
 }
 
-const unrevieveOrderProduct = atom<UnRecieveOrderProduct>(unrecieveOrderProducts);
+const unrevieveOrderProduct = atom<UnRecieveOrderProduct>(
+  unrecieveOrderProducts
+);
 function useRecieveOrderProducts() {
   return useAtom(unrevieveOrderProduct);
 }
@@ -205,11 +230,47 @@ 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: '',
   emailError: '',
-  w3wError: ''
+  w3wError: '',
 });
 
 export {
@@ -224,13 +285,18 @@ export {
   useDeleteProdsID,
   useCreateOrderProducts,
   useRecieveOrderProducts,
-  useUpdateOrderProducts
+  useUpdateOrderProducts,
+  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/components/store.ts

@@ -21,6 +21,12 @@ const reminderTableData = atom<any[]>([]);
 
 const inQueueDataAtom = atom<any>({});
 
+const customerData = atom<any>([]);
+
+const actionTypeData = atom<any>([]);
+
+const locationData = atom<any>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -49,10 +55,10 @@ function useEmailInvoice() {
   return useAtom(emailInvoiceData);
 }
 
-const selectedEmailList = atom<any[]>([]);
+const selectedOrderlList = atom<any[]>([]);
 
-function useSelectedEmail() {
-  return useAtom(selectedEmailList);
+function useSelectedOrders() {
+  return useAtom(selectedOrderlList);
 }
 
 // Sticky menu state
@@ -61,6 +67,18 @@ export const useStickyStatus = () => {
   return useAtom(stickyStatus);
 };
 
+function useCustomerData() {
+  return useAtom(customerData);
+}
+
+function useActionType() {
+  return useAtom(actionTypeData);
+}
+
+function useLocationData() {
+  return useAtom(locationData);
+}
+
 export {
   useAtom,
   useFilter,
@@ -70,5 +88,9 @@ export {
   useReminderData,
   useInQueueData,
   useEmailInvoice,
-  useSelectedEmail
+  // useSelectedEmail,
+  useCustomerData,
+  useActionType,
+  useLocationData,
+  useSelectedOrders,
 };

package/src/components/types.ts

@@ -9,10 +9,6 @@ export type SelectDateType = {
 
 export type OrderViewType = 'add' | 'view' | 'edit';
 
-
-
-
-
 export interface ColumnConfig {
   key: string;
   label: string;
@@ -33,7 +29,7 @@ export interface Column {
   render?: (data: any, row: TableRow) => React.ReactNode;
   callback?: (data: any) => void;
   sortable?: boolean;
-  showIcon?: boolean
+  showIcon?: boolean;
 }
 
 export interface TableRow {
@@ -45,7 +41,7 @@ export interface ApiResponse {
   code: number;
   error: string | null;
   error_traceback: string | null;
-  data: any;
+  data: any[];
 }
 
 export interface InvoiceData {

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-daily-overview/table/InfiniteScrolling.d.ts

@@ -1,5 +0,0 @@
-declare const useInfiniteScroll: (paginationData: any, setShouldPerformAction: Function, tableScrolling: any) => {
-    page: number;
-    scrollActivated: boolean;
-};
-export default useInfiniteScroll;

package/dist/components/order-daily-overview/table/Return.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const RFI: React.FC;
-export default RFI;

package/dist/components/order-daily-overview/table/table-data/MyTable.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Column } from '../../../types';
-export declare const selectedValueAtom: import("jotai/esm/").PrimitiveAtom<null> & {
-    init: null;
-};
-export declare const selectedIDAtom: import("jotai/esm/").PrimitiveAtom<null> & {
-    init: null;
-};
-interface MyTableProps {
-    columns: Column[];
-    data: any;
-    loading: boolean;
-    loadingskeleton?: boolean;
-    view?: 'rfi';
-}
-declare const MyTable: React.FC<MyTableProps>;
-export default MyTable;
-export declare const CoverDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/order-daily-overview/table/table-data/Table.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Column } from '../../../types';
-export declare const selectedValueAtom: import("jotai/esm/").PrimitiveAtom<null> & {
-    init: null;
-};
-export declare const selectedIDAtom: import("jotai/esm/").PrimitiveAtom<null> & {
-    init: null;
-};
-interface MyTableProps {
-    columns: Column[];
-    data: any;
-    loading: boolean;
-    loadingskeleton?: boolean;
-    view?: 'rfi';
-}
-declare const Table: React.FC<MyTableProps>;
-export default Table;
-export declare const CoverDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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;