@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,263 @@
+import { atom, useAtom } from 'jotai';
+import { atomWithReducer } from 'jotai/utils';
+import { CreateProduct, OrderActionsType, OrdersType, UnRecieveOrderProduct, UpdateOrderProduct } from './types';
+// OrderActionsType
+const activeTabAtom = atom<string>('active');
+const infoAtom = atom<boolean | undefined>(false);
+const orderResources = atom<[]>([]);
+const currentActionAtom = atom<OrderActionsType | undefined>(undefined);
+const isOnHold = atom<Boolean>(false);
+const date = atom(new Date());
+
+const orderStaticDataAtom = atom<any>({});
+
+export const ordersInitialValue: OrdersType = {
+  depot_id: null,
+  gsit_order_id: null,
+  customer_id: null,
+  trading_name: null,
+  recipient_reference: null,
+  order_locked: true,
+  lock_notes: null,
+  order_type_id: null,
+  allow_live_tracking: null,
+  weight: null,
+  cube: null,
+  rescheduled: null,
+  zone_code: null,
+  status: null,
+  status_value: null,
+  order_status_note: null,
+  print_pod: null,
+  order_number: null,
+  consignment: null,
+  action_date: null,
+  other_instructions: null,
+  schedule_after: null,
+  vehicle_type: null,
+  order_recipient: {
+    id: null,
+    order_id: null,
+    recipient_name: null,
+    address: null,
+    postcode: null,
+    postcode_district: null,
+    postcode_short: null,
+    latitude: null,
+    longitude: null,
+    what_3words_address: null,
+    contact_home: null,
+    contact_work: null,
+    contact_mobile: null,
+    contact_email: null,
+    is_comms_enabled: null,
+  },
+  order_services_detail: {
+    order_id: null,
+    timed_service_id: null,
+    order_delivery_point_id: null,
+    order_service_level_id: null,
+    heavy_order: null,
+    heavy_item: null,
+    bulky_order: null,
+    bulky_item: null,
+    id: null,
+  },
+  order_services: [
+    {
+      order_id: null,
+      order_service_list_id: null,
+      service_time: null,
+      is_refused: null,
+      service_note: null,
+      id: null,
+      service_category_id: 0,
+    },
+  ],
+  order_routes: null,
+  order_eta_updates: [],
+  order_delivery_declined_dates: [],
+  order_communications: [],
+  id: null,
+};
+
+export const orderProductInitialvalue: CreateProduct = {
+  code: '',
+  description: '',
+  sku: '',
+  weight: 0,
+  cube: 0,
+  order_id: 0,
+  product_type_id: 0,
+};
+
+export const unrecieveOrderProducts: UnRecieveOrderProduct = {
+    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
+};
+
+export const usedate = () => {
+  return useAtom(date);
+};
+function useTabType() {
+  return useAtom(activeTabAtom);
+}
+function useInfoType() {
+  return useAtom(infoAtom);
+}
+function useOrderResources() {
+  return useAtom(orderResources);
+}
+function useCurrentAction() {
+  return useAtom(currentActionAtom);
+}
+
+function useOrderStaticData() {
+  return useAtom(orderStaticDataAtom);
+}
+
+// Define initial modal state
+export const initialModalState = {
+  openModalType: null,
+};
+function useIsOnHoldOrder() {
+  return useAtom(isOnHold);
+}
+//value
+const orderId = atom<number | undefined>(undefined);
+export const useOrderId = () => {
+  return useAtom(orderId);
+};
+
+export {
+  useTabType,
+  useInfoType,
+  useOrderResources,
+  useCurrentAction,
+  useIsOnHoldOrder,
+  useOrderStaticData,
+};
+// Remainder count
+const OrderDetails = atom<OrdersType>(ordersInitialValue);
+function useOrderDetails() {
+  return useAtom(OrderDetails);
+}
+
+const prevOrderDetails = atom<OrdersType>(ordersInitialValue);
+function usePrevOrderDetails() {
+  return useAtom(prevOrderDetails);
+}
+
+const customerDetails = atom<any>(0);
+function useCustomerDetails() {
+  return useAtom(customerDetails);
+}
+
+const DepotDeatils = atom<any>(0);
+function useDepotDetails() {
+  return useAtom(DepotDeatils);
+}
+const productDetails = atom<any>([]);
+function useProductDetails() {
+  return useAtom(productDetails);
+}
+const StatusDeatils = atom<any>(0);
+function useStatusDetails() {
+  return useAtom(StatusDeatils);
+}
+
+const depotOptions = atom<any>([]);
+function useDepotOptions() {
+  return useAtom(depotOptions);
+}
+
+const deleteProdId = atom<any[]>([]);
+function useDeleteProdsID() {
+  return useAtom(deleteProdId);
+}
+
+const createOrderProduct = atom<any>(orderProductInitialvalue);
+function useCreateOrderProducts() {
+  return useAtom(createOrderProduct);
+}
+
+const unrevieveOrderProduct = atom<UnRecieveOrderProduct>(unrecieveOrderProducts);
+function useRecieveOrderProducts() {
+  return useAtom(unrevieveOrderProduct);
+}
+
+const updateOrderProduct = atom<UpdateOrderProduct>(updateOrderProducts);
+function useUpdateOrderProducts() {
+  return useAtom(updateOrderProduct);
+}
+
+export const selectedProductIdAtom = atom<number | null>(null);
+
+export const selectedTabKeyAtom = atom<string>('1');
+
+export const errorAtom = atom({
+  homeError: '',
+  mobileError: '',
+  emailError: '',
+  w3wError: ''
+});
+
+export {
+  useAtom,
+  useOrderDetails,
+  useCustomerDetails,
+  useProductDetails,
+  useDepotDetails,
+  useStatusDetails,
+  useDepotOptions,
+  usePrevOrderDetails,
+  useDeleteProdsID,
+  useCreateOrderProducts,
+  useRecieveOrderProducts,
+  useUpdateOrderProducts
+};
+// Popup state Manage
+const initialState = null;
+const popupReducer = (state: any, action: any) => {
+  if (action.type === 'bulkUpdate') {
+    state = 'bulkUpdate';
+    return { state };
+  } else if (action.type === 'addProduct') {
+    state = 'addProduct';
+    return { state };
+  } else if (action.type === 'deleteProduct') {
+    state = 'deleteProduct';
+    return { state };
+  } else if (action.type === 'defectsModal') {
+    state = 'defectsModal';
+    return { state };
+  } else if (action.type === 'repackModal') {
+    state = 'repackModal';
+    return { state };
+  } else if (action.type === 'qclog') {
+    state = 'qclog';
+    return { state };
+  } else if (action.type === 'qclogtable') {
+    state = 'qclogtable';
+    return { state };
+  } else if (action.type === 'repack') {
+    state = 'repack';
+    return { state };
+  } else if (action.type === 'close') {
+    state = null;
+    return { state };
+  } else {
+    throw new Error('unknown action type');
+  }
+};
+export const countReducerAtom = atomWithReducer(initialState, popupReducer);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+// import styled from 'styled-components';
+
+function SystemCollapsedContent() {
+  return <Font>SYSTEM EVENT LOGS</Font>;
+}
+
+const Font = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+`;
+export default SystemCollapsedContent;

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

@@ -0,0 +1,22 @@
+import React 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';
+
+function SystemLogs() {
+  return (
+    <Table>
+      <CollapsableForm collapsedContent={<CollapsedContent />}>
+        {/* <DynamicTable columns={SystemEventColumns} data={systemLgsEvents} /> */}
+        <SystemLogsTables />
+      </CollapsableForm>
+    </Table>
+  );
+}
+const Table = styled.div`
+  width: 100%;
+`;
+export default SystemLogs;

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

@@ -0,0 +1,59 @@
+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;

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

@@ -0,0 +1,239 @@
+import styled from 'styled-components';
+
+// Styled components
+export const SystemStyledTableWrapper = styled.div`
+  overflow-x: auto;
+  max-height: calc(100vh - 396px);
+  scrollbar-width: none;
+  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
+  &::-webkit-scrollbar {
+    width: 5px;
+    border-radius: 100px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #777;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #7b61ff;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #7b61ff;
+  }
+`;
+
+export const SystemStyledTable = styled.table`
+  border-spacing: 0 10px;
+  width: 100%;
+  /* min-width: 1600px; */
+  thead {
+    white-space: nowrap;
+    tr {
+      border-radius: 40px;
+      border-spacing: 0 10px;
+      .emailInvoiceCheckbox {
+        padding-right: 0px;
+        width: 0;
+        > div {
+          width: fit-content;
+        }
+      }
+      .emailInvoiceNo {
+        padding-left: 0px;
+      }
+      .emailInvoiceShare {
+        width: 100px;
+      }
+      th {
+        color: #3a3630;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        padding: 11px 15px;
+        background: #f0f2f2;
+        border-right: none;
+        border-left: none;
+        text-align: left;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-width: 1px 0;
+        &:first-child {
+          border-radius: 100px 0 0 100px;
+          border-left: 1px solid rgba(0, 0, 0, 0.08);
+        }
+        &:last-child {
+          border-radius: 0px 100px 100px 0;
+          border-right: 1px solid rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        color: #3a3630;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        padding: 12px 15px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-right: none;
+        border-left: none;
+        .actionbox {
+          display: flex;
+          gap: 5px;
+        }
+        .shareIconContainer {
+          display: flex;
+          padding: 2px 12px;
+          align-items: center;
+          gap: 8px;
+          border-radius: 20px;
+          border: 1px solid var(--tonal-brown-101, #e2e0db);
+          background: #fff;
+          list-style-type: none;
+          /* padding-left: 0; */
+          /* fontWeight: 600,
+          paddingLeft: 0, */
+          cursor: pointer;
+        }
+        .statustext {
+          color: #1f9254;
+          font-family: 'Open Sans';
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+        }
+        .downloadcontainer {
+          display: flex;
+          padding: 2px 12px;
+          align-items: center;
+
+          width: 28px;
+          height: 28px;
+          flex-direction: column;
+
+          border-radius: 14px;
+          border: 1px solid #e2e0db;
+          background: #fff;
+        }
+        .statuscontainer {
+          display: flex;
+          padding: 5px 30px 5px 30px;
+          justify-content: center;
+          align-items: center;
+          gap: 5px;
+          flex: 1 0 0;
+          border-radius: 22px;
+          background: rgba(41, 204, 106, 0.15);
+        }
+      }
+      &:nth-child(even) td {
+        background: #f6fbff;
+      }
+      td:first-child {
+        border-radius: 100px 0 0 100px;
+        border-left: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      td:last-child {
+        border-radius: 0px 100px 100px 0;
+        border-right: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      .flex {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        height: 29px;
+        align-items: center;
+      }
+
+      &.insideTable {
+        td {
+          border-radius: 0;
+          border: none;
+          &:last-child {
+            border-radius: 0;
+            border-right: none;
+          }
+        }
+        table {
+          border-spacing: 0;
+          width: 100%;
+          border-radius: 5px;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          overflow: hidden;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
+          thead {
+            tr {
+              border-bottom: none;
+              th {
+                padding: 14px 20px;
+                text-align: left;
+                border-top: 0;
+                border-right: 0;
+                border-left: 0;
+                background: #f8fafc;
+
+                &:first-child {
+                  border-radius: 0;
+                  border-left: 1px solid rgba(0, 0, 0, 0.08);
+                  border-top-left-radius: 15px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                }
+              }
+            }
+          }
+          tbody {
+            tr {
+              td {
+                padding: 14px 20px;
+                text-align: left;
+                border-bottom: 1px solid rgba(58, 54, 48, 0.15);
+                background: #fff;
+                > svg {
+                  transform: scale(1.5);
+                  background-color: #edebe8;
+                  border-radius: 20px;
+                  padding: 5px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                  border-right: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    > svg {
+      transform: scale(1.5);
+      background-color: #edebe8;
+      border-radius: 20px;
+      padding: 5px;
+    }
+
+    .close-icon {
+      transform: scale(1.3);
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+// import styled from 'styled-components';
+
+function TomTomCollapsedContent() {
+  return <Font>TOMTOM LOGS</Font>;
+}
+
+const Font = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+`;
+export default TomTomCollapsedContent;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import CollapsedContent from '../collapsed-content';
+// import styled from 'styled-components';
+import styled from 'styled-components';
+import CollapsableForm from '../../../../common/expand-collapse';
+import DynamicTable from '../../DynamicTable';
+import { TomTomColumns, tomtomResources } from '../../../fakeData';
+
+function TomTomLogs() {
+  return (
+    <Table>
+      <CollapsableForm collapsedContent={<CollapsedContent />}>
+        <DynamicTable columns={TomTomColumns} data={tomtomResources} />
+      </CollapsableForm>
+    </Table>
+  );
+}
+const Table = styled.div`
+  width: 100%;
+`;
+export default TomTomLogs;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+// import styled from 'styled-components';
+
+function CollapsedContent() {
+  return <Font>TOOLBOX RESOURCES</Font>;
+}
+
+const Font = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+`;
+export default CollapsedContent;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import CollapsedContent from '../collapsed-content';
+import styled from 'styled-components';
+import CollapsableForm from '../../../../common/expand-collapse';
+import DynamicTable from '../../DynamicTable';
+import { toolboxColumns, toolboxResources } from '../../../fakeData';
+
+function Toolbox() {
+  return (
+    <Table>
+      <CollapsableForm collapsedContent={<CollapsedContent />}>
+        <DynamicTable columns={toolboxColumns} data={toolboxResources} />
+      </CollapsableForm>
+    </Table>
+  );
+}
+
+const Table = styled.div`
+  width: 100%;
+`;
+
+export default Toolbox;