@bjsdistribution/dms-client-return 0.0.3 → 0.0.4

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnFilter.tsx

@@ -3,13 +3,17 @@ import {
   StyledFIlterELements,
   StyledFiter,
   StyledTableFilter,
+  Text,
 } from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
+import { useParams } from 'react-router-dom';
 
 const ReturnFilter = () => {
+  const { selectedClient } = useParams();
   return (
     <>
       <StyledFiter>
+        <Text> {selectedClient}</Text>
         <StyledFIlterELements>
           <StyledTableFilter />
         </StyledFIlterELements>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -1,17 +1,22 @@
-import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  Checkbox,
+  displayValueOrNA,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import { useAtom } from 'jotai';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
 import { useSelectedOrders } from '../../../store';
 import { useReturnData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
-import { StyledTable, StyledTableWrapper } from './returnstyles';
+import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../../assets/icons/DownIcon';
-import { useLoading } from '../../store/store';
+import { useLoading, usePrintOptionTOggle } from '../../store/store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
+import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
 
 const ReturnOrderTable = ({ loadingskeleton }: any) => {
   const [state] = useAtom(filtersReducerAtom);
@@ -21,6 +26,30 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const [returnData, setReturnData] = useReturnData();
   const [, setLoading] = useLoading();
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle(prevIndex => (prevIndex === index ? null : index));
+  };
+
+  // Close dropdown outside click
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setPrintToggle(null);
+    }
+  };
+
   const { data: fetchedOrderData, loading: staticDataLoading } = useApiHook<
     ApiResponse
   >({
@@ -105,7 +134,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                 </td>
               </tr>
             ) : (
-              returnData?.map((item: any) => (
+              returnData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
                     <Checkbox
@@ -117,9 +146,11 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                     />
                   </td>
 
-                  <td>N/A</td>
+                  <td>
+                    {displayValueOrNA(item?.orders_products_stock?.location)}
+                  </td>
 
-                  <td>{item?.return_location}</td>
+                  <td> {displayValueOrNA(item?.return_location)}</td>
 
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -130,26 +161,45 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           paddingLeft: 0,
                         }}
                       >
-                        {item?.order_data?.order_recipient?.recipient_name}
+                        {displayValueOrNA(
+                          item?.order_data?.order_recipient?.recipient_name
+                        )}
                       </li>
                       <li style={{ color: '#888075' }}>
-                        {item?.order_data?.order_recipient?.postcode}
+                        {displayValueOrNA(
+                          item?.order_data?.order_recipient?.postcode
+                        )}
                       </li>
                     </ul>
                   </td>
-                  <td>{item?.code}</td>
-                  <td>{item?.description}</td>
+                  <td>{displayValueOrNA(item?.code)}</td>
+                  <td>{displayValueOrNA(item?.description)}</td>
                   <td>N/A</td>
-                  <td>{item?.weight}</td>
-                  <td>{item?.cube}</td>
-                  <td>{item?.return_reasons?.reason}</td>
+                  <td>{displayValueOrNA(item?.weight)}KG</td>
+                  <td>{displayValueOrNA(item?.cube)}</td>
+                  <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
                   <td>N/A</td>
-                  <td>{item?.collection_reasons?.reason}</td>
+                  <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
                   <td>
-                    <div className="shareIconContainer">
-                      <PrinterIcon />
-                      <DownIcon />
-                    </div>
+                    <ul className="actionbox">
+                      <CustomDrop
+                        ref={dropdownRefParent}
+                        className={printToogle === index ? 'active' : ''}
+                      >
+                        <li
+                          className="shareIconContainer"
+                          onClick={() => OpenDropDown(index)}
+                        >
+                          <PrinterIcon />
+                          <DownIcon />
+                          {printToogle == index && (
+                            <div ref={dropdownRef}>
+                              <PrintDropDown />
+                            </div>
+                          )}
+                        </li>
+                      </CustomDrop>
+                    </ul>
                   </td>
                 </tr>
               ))

package/src/components/order-daily-overview/return-order-table/return-orders-filters/RightFilters.tsx

@@ -4,49 +4,39 @@ import { StyledBulkItem } from '../../filters/BulkFilterStyle';
 import SearchType from '../../header/route-header/search/SearchType';
 import styled from 'styled-components';
 import DownloadIcon from '../../../../assets/icons/DownloadIcon';
+import { countReducerAtom, useAtom } from '../../../order-view/store';
+import { useSelectedOrders } from '../../../store';
 
 const RightFilters = () => {
+  const [, dispatch] = useAtom(countReducerAtom);
+  const [selectedReturnOrder] = useSelectedOrders();
+
   return (
     <Container>
-      <TextConatiner>
-        <Text>Create Return</Text>
-      </TextConatiner>
-      
+      <ButtonText
+        onClick={() => dispatch({ type: 'create-return' })}
+        disabled={selectedReturnOrder?.length === 0}
+      >
+        Create Return
+      </ButtonText>
       <StyledBulkItem>
         <SearchType />
       </StyledBulkItem>
       <IconConatiner>
         <Mid>
           <IconText>Export</IconText>
-          <DownloadIcon/>
+          <DownloadIcon />
         </Mid>
       </IconConatiner>
-     
     </Container>
   );
-
-
-  //   return (
-  //     // <StyledBulkFilterCover>
-
-  //       <StyledBulkItem>
-  //       <SearchType />
-  //       </StyledBulkItem>
-  //       /* {showTableFilter && (
-  //         <StyledBulkItem>
-  //           <TableFilter tableData={TableData[0].tableHead} />
-  //         </StyledBulkItem>
-  //       )} */
-  //     // </StyledBulkFilterCover>
-  //   );
 };
 const Container = styled.div`
   display: flex;
-/* align-items: flex-start; */
-gap: 16px;
-align-items: center;
-
-`
+  /* align-items: flex-start; */
+  gap: 16px;
+  align-items: center;
+`;
 const Mid = styled.div`
   display: flex;
   padding: 4px 10px;
@@ -55,24 +45,31 @@ const Mid = styled.div`
   align-self: stretch;
   border-radius: 15px 0px 0px 15px;
 `;
-const TextConatiner = styled.div`
+
+const ButtonText = styled.button`
+  color: white;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+
   display: flex;
   padding: 7px 12px;
   justify-content: center;
   align-items: center;
   gap: 2px;
   border-radius: 15px;
-  background: rgba(136, 128, 117, 0.35);
-`;
-const Text = styled.div`
-  color: #888075;
-  font-family: "'Lato";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px;
-`;
+  background: #3a3630;
+  font-family: 'Lato';
+  cursor: pointer;
+  border: none;
 
+  &:disabled {
+    border-radius: 15px;
+    background: rgba(136, 128, 117, 0.35);
+    color: #888075;
+    cursor: not-allowed;
+  }
+`;
 
 const IconConatiner = styled.div`
   /* display: flex;
@@ -82,7 +79,7 @@ const IconConatiner = styled.div`
   border-radius: 8px 8px 8px 8px; */
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   background: #f0f2f2;
-  border: 1px solid  #e2e0db;
+  border: 1px solid #e2e0db;
   display: flex;
   padding: 7px 12px;
   justify-content: center;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -232,7 +232,7 @@ export const EmptyDataContainer = styled.div`
 export const StyledTable = styled.table`
   border-spacing: 0 10px;
   width: 100%;
-  min-width: 1600px;
+  /* min-width: 1600px; */
   thead {
     white-space: nowrap;
     tr {
@@ -305,6 +305,7 @@ export const StyledTable = styled.table`
           /* fontWeight: 600,
           paddingLeft: 0, */
           cursor: pointer;
+          position: relative;
         }
         .statusCancelled {
           color: #e95252;
@@ -385,6 +386,10 @@ export const StyledTable = styled.table`
           border-radius: 22px;
           background: rgba(41, 204, 106, 0.15);
         }
+        ul > li > a {
+          text-decoration: none !important;
+          color: #0099ff;
+        }
       }
       &:nth-child(even) td {
         background: #f6fbff;
@@ -493,6 +498,7 @@ export const StyledTableWrapper = styled.div`
   overflow-x: auto;
   max-height: calc(100vh - 396px);
   scrollbar-width: none;
+  height: 400px;
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
   &::-webkit-scrollbar {
     width: 5px;

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

@@ -3,7 +3,9 @@ import { useClientData, useOrderStaticData } from '../../order-view/store';
 import { useLoading } from '../store/store';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
+  ColumStyle,
   EmptyDataContainer,
+  GreyBox,
   StyledTable,
   StyledTableWrapper,
 } from './table-data/styles';
@@ -19,9 +21,7 @@ interface ApiResponse {
 
 const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
   const [clientData] = useClientData();
-
   const [, setLoading] = useLoading();
-
   const [, setOrderStaticData] = useOrderStaticData();
 
   const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
@@ -30,7 +30,6 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
     endpoint: `/orders/getStaticData/all/`,
     method: 'GET',
   });
-  console.log('fetchedStaticData', fetchedStaticData);
 
   useEffect(() => {
     setLoading(staticDataLoading);
@@ -73,11 +72,10 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                 </td>
               </tr>
             ) : (
-              Object.keys(clientData[0]).map(key => {
-                const clientReturn = clientData[0][key];
+              clientData?.map((key: any, index: any) => {
                 return (
-                  <tr key={key}>
-                    <td>{clientReturn?.trading_as}</td>
+                  <tr key={index}>
+                    <td>{key?.trading_as}</td>
 
                     <td>
                       {' '}
@@ -89,108 +87,48 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                             paddingLeft: 0,
                           }}
                         >
-                          {clientReturn?.customer_name}
+                          {key?.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>
+                      <ColumStyle>
+                        <GreyBox>
+                          {key?.return_orders}
+                          {/* </div> */}
+                        </GreyBox>
+                      </ColumStyle>
                     </td>
 
                     <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>
+                      <ColumStyle>
+                        <GreyBox>{key?.return_order_products}</GreyBox>
+                      </ColumStyle>
                     </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>
+                      <ColumStyle>
+                        <GreyBox>{key?.DISPOSE}</GreyBox>
+                      </ColumStyle>
                     </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>
+                      <ColumStyle>
+                        <GreyBox>{key?.['RE-ALLOCATE']}</GreyBox>{' '}
+                      </ColumStyle>
                     </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>
+                      <ColumStyle>
+                        <GreyBox>{key?.['RE-DEL']}</GreyBox>
+                      </ColumStyle>
                     </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>
+                      <ColumStyle>
+                        <GreyBox>{key?.RECYCLE}</GreyBox>
+                      </ColumStyle>
                     </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>
+                      <ColumStyle>
+                        <GreyBox>{key?.UNKNOWN}</GreyBox>
+                      </ColumStyle>
                     </td>
                   </tr>
                 );

package/src/components/order-daily-overview/table/table-data/styles.ts

@@ -1,5 +1,20 @@
 import styled from 'styled-components';
 
+export const ColumStyle = styled.div`
+  display: flex;
+  width: 67px;
+  align-items: center;
+  gap: 7px;
+`;
+
+export const GreyBox = styled.div`
+  display: flex;
+  padding: 3px 12px;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: rgba(153, 153, 153, 0.1);
+`;
 // Styled components
 export const StyledTableWrapper = styled.div`
   overflow-x: auto;

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import Details from './right-side-filters/Details';
-import ActionsMenu from './left-side-filters/ActionsMenu';
+// import ActionsMenu from './left-side-filters/ActionsMenu';
 
 const DetailsFilters = () => {
   return (
     <Flex>
       <Details />
-      <ActionsMenu />
+      {/* <ActionsMenu /> */}
     </Flex>
   );
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import PrintDropDown from './PrintDropDown';
 import OptionsDropDown from './OptionsDropDown';
 import MenuDropDown from './MenuDropDown';
 // components
@@ -11,7 +10,6 @@ function DropDowns() {
       <DashBoardWrapper>
         <MenuDropDown />
         <OptionsDropDown />
-        <PrintDropDown />
       </DashBoardWrapper>
     </>
   );

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

@@ -40,11 +40,8 @@ export const OptionsList = styled.ul`
   width: 177px;
   padding: 5px 1px 3px 1px;
   position: absolute;
-  /* top: 34px;
-  right: 0; */
-
-  top: 530px;
-  right: 25px;
+  top: 26px;
+  right: 0;
   z-index: 99;
   min-width: 194px;
 `;

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+import React from 'react';
+import { Skeleton } from 'antd';
+import { formatDateTime } from '@bjsdistribution/dms-component-library';
+import { usegetNotes, UseNotesLoading } from '../store';
+import { NotesTableData } from '../notes/logs/fakeData';
+
+const GenericAuditLogsTable = () => {
+  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const [getNotes] = usegetNotes();
+  const [isLoading] = UseNotesLoading();
+
+  return (
+    <ScrollableTableWrapper>
+      <AuditTableWrapper>
+        <table>
+          <thead>
+            <tr>
+              {tableHeadData.map(column => (
+                <th key={column.key}>{column.label}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr>
+                <td className="noBoder" colSpan={tableHeadData?.length}>
+                  <Skeleton />
+                </td>
+              </tr>
+            ) : getNotes && getNotes?.length > 0 ? (
+              getNotes?.map((note: any) => (
+                <tr key={note?.id}>
+                  <td>
+                    <div className="bold" title={note?.created_by}>
+                      {note?.created_by}
+                    </div>
+                    <div>{formatDateTime(note?.created_at)}</div>
+                  </td>
+                  <td>{note?.description}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={tableHeadData?.length}>No data found</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </AuditTableWrapper>
+    </ScrollableTableWrapper>
+  );
+};
+
+const ScrollableTableWrapper = styled.div``;
+
+export const AuditTableWrapper = styled.div`
+  height: 250px;
+  min-height: 200px;
+  /* overflow: auto; */
+
+  table {
+    border-spacing: 0;
+    width: 100%;
+    text-align: left;
+
+    thead {
+      th {
+        border-bottom: 1px solid rgba(58, 54, 48, 0.25);
+        background: #faf9f9;
+        padding: 14px 12px;
+        color: #3a3630;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+    tbody {
+      td {
+        color: #667085;
+        font-family: Lato;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        padding: 10px;
+        .bold {
+          font-weight: 500;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`;
+
+export default GenericAuditLogsTable;