@bjsdistribution/dms-client-return 0.0.1 → 0.0.3

package/src/components/order-daily-overview/table/ReturnTable.tsx

@@ -1,217 +1,205 @@
-import React from 'react';
-// import { ApiResponse, Column } from './types';
-// import MyTable from '../../common/table/Mytable';
-// import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import { useReadyForInvoiceOverview, useReadyForInvoiceView } from './store';
-// import MultiRFI from './ReadyforInvoicemulti';
-// import { useAtom } from 'jotai';
-import { Column } from '../../types';
-import MyTable from './table-data/MyTable';
-import { data } from './table-data/Fakedata';
-// import useInfiniteScroll from './InfiniteScrolling';
-// import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
-// import {
-//   usePrevSelectedClients,
-//   useSelectedClients,
-// } from '../header-for-invoice/store';
-// import ClientView from './client-view';
+import React, { useEffect } from 'react';
+import { useClientData, useOrderStaticData } from '../../order-view/store';
+import { useLoading } from '../store/store';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from './table-data/styles';
+import { Empty, Skeleton } from 'antd';
 
-const ReturnTable: React.FC = () => {
-  //   const [, setClient] = useSelectedClients();
-  //   const [
-  //     readyForInvoiceView,
-  //     setReadyForInvoiceView,
-  //   ] = useReadyForInvoiceView();
-  //   const [filterState, dispatchOverviewFilter] = useAtom(
-  //     overviewFiltersReducerAtom
-  //   );
-  //   const [, setPrevSelectedClients] = usePrevSelectedClients();
-  // const [, dispatchFilters] = useAtom(overviewFiltersReducerAtom);
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+}
 
-  //   const getId = (data: any) => {
-  //     setClient([data]);
-  //     setPrevSelectedClients([data]); // to disable apply button if client is clickec from table
-  //     setReadyForInvoiceView('client');
-  //     dispatchOverviewFilter({
-  //       type: 'SET_CUSTOMER_FILTER',
-  //       payload: [data.value],
-  //     });
-  //   };
+const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
+  const [clientData] = useClientData();
 
-  const columns: Column[] = [
-    {
-      Header: 'Trading Name',
-      accessor: 'name',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Client',
-      accessor: 'customer_name',
-      //   callback: getId,
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Orders',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Products',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'RTS',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Pending',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Dispose',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Re-allocate',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Re-Del',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Recycle',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'unknown',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    // {
-    //   Header: 'Amount',
-    //   accessor: 'total_amount',
-    //   sortable: true,
-    //   showIcon: true,
-    // },
-    // { Header: 'VAT', accessor: 'vat_rate', sortable: true, showIcon: true },
-    // { Header: 'Total', accessor: 'total', sortable: true, showIcon: false },
-  ];
+  const [, setLoading] = useLoading();
 
-  // const [invoiceData, setInvoiceData] = useInvoiceData();
-  //   const [
-  //     readyForInvoiceOverview,
-  //     setReadyForInvoiceOverview,
-  //   ] = useReadyForInvoiceOverview();
-  // const [filterApplied] = usefilterApplied();
+  const [, setOrderStaticData] = useOrderStaticData();
 
-  //   const { 'x-filters': filters, 'x-pagination': pagination } = filterState;
-  //   const {
-  //     data: fetchedOverviewData,
-  //     setShouldPerformAction, // need for  infinite
-  //     paginationData, // need for  infinite
-  //     loadingskeleton, // need for  infinite
-  //   } = useApiHook<ApiResponse>({
-  //     endpoint: `/invoices/ready_for_invoice/overview/`,
-  //     method: 'GET',
-  //     filters: filters,
-  //     pagination: pagination,
-  //     performAction: true,
-  //   });
-  //   //  infinite scrolling code start here
-  //   const { page, scrollActivated } = useInfiniteScroll(
-  //     paginationData,
-  //     setShouldPerformAction,
-  //     'tableScrolling'
-  //   );
-  //   useEffect(() => {
-  //     dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
-  //   }, [page]);
+  const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/getStaticData/all/`,
+    method: 'GET',
+  });
+  console.log('fetchedStaticData', fetchedStaticData);
 
-  //   useEffect(() => {
-  //     if (fetchedOverviewData && fetchedOverviewData?.data) {
-  //       const invoiceData = fetchedOverviewData?.data;
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedStaticData && fetchedStaticData.data) {
+      const result = fetchedStaticData?.data;
+      setOrderStaticData(result[0]);
+    }
+  }, [staticDataLoading, fetchedStaticData]);
 
-  //       if (scrollActivated) {
-  //         setReadyForInvoiceOverview((prev: any) => {
-  //           const newData = invoiceData?.filter(
-  //             (newItem: any) =>
-  //               !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
-  //           );
-  //           return [...prev, ...newData];
-  //         });
-  //       } else {
-  //         setReadyForInvoiceOverview(invoiceData);
-  //       }
-  //     }
-  //   }, [fetchedOverviewData, scrollActivated]);
-
-  //   const renderContent = () => {
-
-  //     <MyTable
-  //     columns={columns}
-  //     data={data}
-  //     loading={false}
-  //     // loadingskeleton={loadingskeleton}
-  //     view="rfi"
-  //   />
+  return (
+    <>
+      <StyledTableWrapper id="tableScrolling">
+        <StyledTable>
+          <thead>
+            <tr>
+              <th>Trading Name</th>
+              <th>Client</th>
+              <th>Orders</th>
+              <th>Products</th>
+              <th>Dispose</th>
+              <th>Re-allocate</th>
+              <th>Re-Del</th>
+              <th>Recycle</th>
+              <th>Unknown</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loadingskeleton ? (
+              <tr>
+                <td colSpan={9}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : clientData?.length === 0 ? (
+              <tr>
+                <td colSpan={9}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              Object.keys(clientData[0]).map(key => {
+                const clientReturn = clientData[0][key];
+                return (
+                  <tr key={key}>
+                    <td>{clientReturn?.trading_as}</td>
 
-  // switch (readyForInvoiceView) {
-  //   case 'client':
-  //     return (
-  //       <div
-  //         style={{
-  //           display: 'flex',
-  //           flexDirection: 'column',
-  //           gap: '10px',
-  //           marginTop: '10px',
-  //         }}
-  //       >
-  //         {/* <ClientView /> */}
-  //       </div>
-  //     );
-  //   default:
-  //     return (
-  //       <MyTable
-  //         columns={columns}
-  //         data={data}
-  //         loading={false}
-  //         // loadingskeleton={loadingskeleton}
-  //         view="rfi"
-  //       />
-  //     );
-  // }
-  //   };
+                    <td>
+                      {' '}
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          {clientReturn?.customer_name}
+                        </li>
+                      </ul>{' '}
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.return_orders}
+                      </div>
+                    </td>
 
-  return (
-    <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
-      {/* {renderContent} */}
-      <MyTable
-        columns={columns}
-        data={data}
-        loading={false}
-        // loadingskeleton={loadingskeleton}
-        view="rfi"
-      />
-    </div>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.return_order_products}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.DISPOSE}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.['RE-ALLOCATE']}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.['RE-DEL']}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.RECYCLE}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          background: 'rgba(153, 153, 153, 0.10)',
+                          padding: '3px 12px',
+                          borderRadius: '4px',
+                          color: '#6A7378',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {clientReturn?.UNKNOWN}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
   );
 };
 

package/src/components/order-view/details-filters/DetailsFilters.tsx

@@ -25,9 +25,10 @@ const Flex = styled.div`
   gap: 10px;
   align-self: stretch;
   position: relative;
-  margin-top: -30px;
+  margin-bottom: -71px;
   width: 97%;
-  margin-left: 28px;
+  margin-left: 21px;
+  top: -40px;
   justify-content: space-between;
 `;
 export default DetailsFilters;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/PrintDropDown.tsx

@@ -1,52 +1,63 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+import { PrintIconMap } from '../../../../order-daily-overview/shared/utlis';
+import { PrintData } from '../../../../order-daily-overview/shared/interface';
+import { optionsPrint } from '../../../../order-daily-overview/common/fakedata';
+// import { PrintIconMap } from '../utils';
+// import { optionsPrint } from '../fakeData';
+// import { PrintData } from '../interface';
 
-import { DropDownContainer } from './DropdownStyles';
-import DropDownMenu from './DropDownMenu';
-import DropDownItem from './DropDownItem';
-import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
-
-const Options = [
-  { label: 'Return notes', value: 'return-notes' },
-  { label: 'Product Labels', value: 'product-labels' },
-  { label: 'Returns Cover Note', value: 'cover-note' },
-];
-
-const PrintDropDown: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
-  };
-
-  const handleSelect = (value: string) => {
-    console.log(`Selected: ${value}`);
-    setIsOpen(false);
-  };
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+const options: PrintData[] = optionsPrint;
 
+const PrintDropDown = () => {
+  const downloadFiles = () => {};
   return (
-    <DropDownContainer ref={dropdownRef}>
-      <DropDownItem
-        label="Print"
-        icon={<DropDownLarge />}
-        onClick={handleClick}
-      />
-      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
-    </DropDownContainer>
+    <OptionsList>
+      {options.map((item, index) => {
+        const IconComponent = PrintIconMap[item.icon];
+
+        return (
+          <OptionsListLi key={index} onClick={downloadFiles}>
+            {IconComponent && <IconComponent />} {item.label}
+          </OptionsListLi>
+        );
+      })}
+    </OptionsList>
   );
 };
+
 export default PrintDropDown;
+
+export const OptionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  border-radius: 6px;
+  border: 1px solid rgba(224, 226, 231, 0.5);
+  background: #fff;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  width: 177px;
+  padding: 5px 1px 3px 1px;
+  position: absolute;
+  /* top: 34px;
+  right: 0; */
+
+  top: 530px;
+  right: 25px;
+  z-index: 99;
+  min-width: 194px;
+`;
+
+export const OptionsListLi = styled.li`
+  border-bottom: 1px solid #f0f2f2;
+  padding: 8px 10px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  font-size: 13px;
+  cursor: pointer;
+  &:last-child {
+    border: none;
+  }
+`;

package/src/components/order-view/general-information/Status.tsx

@@ -95,7 +95,7 @@ const Heading = styled.div`
 `;
 
 const Container = styled.div`
-  padding: 15px;
+  margin-top: 35px;
 `;
 
 const TextContainer = styled.div`

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

@@ -41,7 +41,7 @@ interface ApiResponse {
 }
 
 function OrderView() {
-  const [orderId, setOrderId] = useOrderId();
+  const [, setOrderId] = useOrderId();
 
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
@@ -57,6 +57,7 @@ function OrderView() {
   const [, setDepotOptions] = useDepotOptions();
   const location = useLocation();
   const paths = splitPath(location.pathname);
+  const orderId = 192;
 
   const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
     data: OrdersType[];
@@ -206,15 +207,16 @@ const Section = styled.div`
   border-radius: 12px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
   border: 1px solid #e0e0e0;
+  padding: 12px;
 `;
 /* // `; */
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;
-    background: #fff;
-    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    /* background: #fff; */
+    /* box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1); */
     display: block;
-    padding: 15px 20px;
+    padding: 15px 0px;
   }
   .headerWrap,
   .tableData,

package/src/components/order-view/modalsPopup/UnReceiveProduct.tsx

@@ -1,7 +1,7 @@
 import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import Notes from '../../order-view/order-actions/actions/log-service-refusal/Notes';
+import Notes from '../order-actions/actions/log-service-refusal/Notes';
 import {
   useOrderStaticData,
   useProductDetails,

package/src/components/order-view/order-actions/actions/escalation/EscalationModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import { useCurrentAction } from '../../../store';
-import NewEscalation from '../escalation/NewEscalation';
+import NewEscalation from './NewEscalation';
 
 const EscalationModal: React.FC = () => {
   const [, setCurrentAction] = useCurrentAction();

package/src/components/order-view/order-details/expanded-content/customer-section/RecipientName.tsx

@@ -58,6 +58,7 @@ const Container = styled.div`
 `;
 const InputStyled = styled(Input)`
   /* Hide autofill suggestions in Safari */
+  border-radius: 25px;
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 100px white inset;
     -webkit-text-fill-color: black;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactEmail.tsx

@@ -51,6 +51,7 @@ function ContactEmail() {
         placeholder="Email"
         value={orderRecipient?.contact_email || ''}
         onChange={onChange}
+        style={{ borderRadius: '25px' }}
       />
       {errors.emailError && <ErrorText>{errors.emailError}</ErrorText>}
     </Container>

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx

@@ -62,6 +62,7 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
+  border-radius: 25px;
   // @media (max-width: 1024px) {
   //   width: 80%;
   // }

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx

@@ -68,7 +68,7 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactWork.tsx

@@ -66,6 +66,7 @@ const Wrapper = styled.div`
 `;
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   width: 100%;
 
   &::-webkit-outer-spin-button,

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Address.tsx

@@ -60,6 +60,7 @@ const Container = styled.div`
 const TextContainer = styled(TextArea)`
   resize: none;
   height: 70%;
+  border-radius: 15px;
 `;
 
 export default Address;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx

@@ -39,6 +39,7 @@ function Latitude() {
 }
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;