@bjsdistribution/dms-client-return 0.0.80 → 0.0.82

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.80",
+  "version": "0.0.82",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/header/route-header/search/SearchType.tsx

@@ -1,14 +1,45 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 //common
 import styled from 'styled-components';
 import { SearchIcon } from '../../../../../assets/icons';
+import { useAtom } from 'jotai';
+import { overviewfiltersReducerAtom } from '../../../header-filters/overViewFilter';
+import { CrossIcon } from '@bjsdistribution/dms-component-library';
 
 const SearchType = () => {
   const [searchText, setSearchText] = useState('');
+  const [debouncedSearchText, setDebouncedSearchText] = useState('');
+  const [, dispatch] = useAtom(overviewfiltersReducerAtom);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
   };
 
+  // Debouncing effect
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchText(searchText);
+    }, 1000);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchText]);
+  useEffect(() => {
+    if (debouncedSearchText) {
+      dispatch({
+        type: 'SET_COMP_RETURN_FILTERS',
+        payload: debouncedSearchText,
+      });
+    }
+  }, [debouncedSearchText, dispatch]);
+
+  const handleClear = () => {
+    setSearchText('');
+    dispatch({
+      type: 'CLEAR_SEARCH',
+    });
+  };
+
   return (
     <Search>
       <SearchIcon />
@@ -18,6 +49,11 @@ const SearchType = () => {
         value={searchText}
         onChange={handleInputChange}
       />
+      {searchText && (
+        <ClearButton className="clear" onClick={handleClear}>
+          <CrossIcon />
+        </ClearButton>
+      )}
     </Search>
   );
 };
@@ -29,8 +65,23 @@ const Search = styled.div`
     top: 50%;
     transform: translateY(-50%);
   }
+  .clear {
+    position: absolute;
+    right: 32px;
+    top: 50%;
+  }
+`;
+const ClearButton = styled.button`
+  position: relative;
+  border: none;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  padding: 0 8px;
+  font-size: 14px;
+  &:hover {
+    color: #000;
+  }
 `;
-Search;
 const SearchInput = styled.input`
   border-radius: 20px;
   border: 1px solid #e0e2e7;
@@ -42,5 +93,10 @@ const SearchInput = styled.input`
   gap: 8px;
   align-self: stretch;
   padding-left: 39px;
+  &:focus {
+    outline: none;
+    border-color: gray;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 `;
 export default SearchType;

package/src/components/order-daily-overview/header-filters/overViewFilter.ts

@@ -9,6 +9,7 @@ interface Filter {
   field: string;
   op: string;
   value: any;
+  join?: any;
 }
 
 interface Pagination {
@@ -20,26 +21,48 @@ interface FilterState {
   'x-filters': Filter[];
   'x-pagination': Pagination;
 }
-// let todayDate = new Date();
 const initialState: FilterState = {
-  'x-filters': [
-    // {
-    //   field: 'action_date',
-    //   op: '>=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
-    // },
-    // {
-    //   field: 'action_date',
-    //   op: '<=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
-    // },
-    // { field: 'status', op: 'count', value: '' },
-  ],
+  'x-filters': [],
   'x-pagination': { page: 1, per_page: 50 },
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
   switch (action.type) {
+    case 'SET_COMP_RETURN_FILTERS':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(
+            f => f.field !== 'customer_name' && f.field !== 'trading_as'
+          ),
+          {
+            field: 'customer_name',
+            op: 'like',
+            value: `%${action.payload}%`,
+            join: 'or',
+          },
+          {
+            field: 'trading_as',
+            op: 'like',
+            value: `%${action.payload}%`,
+            join: 'or',
+          },
+        ],
+        'x-pagination': { ...state['x-pagination'], page: 1 },
+      };
+
+    case 'CLEAR_SEARCH':
+      return {
+        ...state,
+        'x-filters': [...initialState['x-filters']],
+        'x-pagination': { ...initialState['x-pagination'], page: 1 },
+      };
+
+    case 'CLEAR_ALL_FILTER':
+      return {
+        ...state,
+      };
+
     case 'SET_PAGE':
       return {
         ...state,

package/src/components/order-daily-overview/index.tsx

@@ -23,7 +23,7 @@ function ReturnMainTable() {
   const [paginationObj, setPaginationObject] = UsePaginationOverviewData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerOverviewPage();
-  const { 'x-pagination': pagination } = state;
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const { page, total } = paginationObj;
   // const [selectedClient] = useTableName();
   const [isScrolled] = useStickyStatus();
@@ -52,6 +52,7 @@ function ReturnMainTable() {
     method: 'GET',
     //@ts-ignore
     pagination: pagination,
+    filters: filters,
   });
 
   useEffect(() => {

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

@@ -7,16 +7,18 @@ import {
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import CustomScrollBar from '../../common/scrollbar';
-// import { ChevronDownIcon } from '@bjsdistribution/dms-component-library';
+import { atom, useAtom } from 'jotai';
+export const selectedID = atom<any>([]);
 
 interface DynamicTableProps {
   columns: any;
   data: any[];
 }
 
-function DynamicTable({ columns, data }: DynamicTableProps) {
+function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
   const tableColumns = useMemo(() => columns, [columns]);
   const tableData = useMemo(() => data, [data]);
+
   const table = useReactTable({
     columns: tableColumns,
     data: tableData,
@@ -26,6 +28,9 @@ function DynamicTable({ columns, data }: DynamicTableProps) {
 
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
+  const action = props;
+  const [selectedRows] = useAtom(selectedID);
+
   const smallColumns = [
     'types',
     'sources',
@@ -33,11 +38,11 @@ function DynamicTable({ columns, data }: DynamicTableProps) {
     'code',
     'type',
     'route',
-    'category',
     'action',
   ];
-  const mediumColumns = ['date'];
-  const largeColumns = ['reference', 'notes', 'details', 'datetime'];
+  const mediumColumns = ['date', 'reference', 'note', 'category'];
+  const largeColumns = ['details', 'datetime'];
+  const noFlexColumns = ['id'];
 
   return (
     <MainContainer>
@@ -46,79 +51,76 @@ function DynamicTable({ columns, data }: DynamicTableProps) {
           <CustomScrollBar>
             <Table>
               <TableHead>
-                {headerGroups.map(headerGroup => (
+                {headerGroups?.map(headerGroup => (
                   <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map(header => {
-                      return (
-                        <TableHeadData
-                          className={`col 
-                              ${
-                                smallColumns.includes(header?.id)
-                                  ? 'sm'
-                                  : mediumColumns.includes(header?.id)
-                                  ? 'md'
-                                  : largeColumns.includes(header?.id)
-                                  ? 'lg'
-                                  : ''
-                              }`}
-                          key={header.id}
-                          onClick={header.column.getToggleSortingHandler()}
-                        >
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                          {/* <span style={{ marginLeft: '10px' }}>
-                            {header.column.getCanSort() ? (
-                              header.column.getIsSorted() === false ? (
-                                <ChevronUpIcon />
-                              ) : header.column.getIsSorted() === 'asc' ? (
-                                <ChevronUpIcon />
-                              ) : (
-                                <ChevronDownIcon
-                                  style={{ cursor: 'pointer' }}
-                                />
-                              )
-                            ) : (
-                              ''
-                            )}
-                          </span> */}
-                        </TableHeadData>
-                      );
-                    })}
+                    {headerGroup.headers.map(header => (
+                      <TableHeadData
+                        className={`col 
+                          ${
+                            smallColumns.includes(header?.id)
+                              ? 'sm'
+                              : mediumColumns.includes(header?.id)
+                              ? 'md'
+                              : largeColumns.includes(header?.id)
+                              ? 'lg'
+                              : ''
+                          }`}
+                        key={header.id}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </TableHeadData>
+                    ))}
                   </TableRow>
                 ))}
               </TableHead>
               <TableBody>
-                {rows.length > 0 ? (
-                  rows.map(row => (
-                    <TableRow key={row.id}>
-                      {row.getVisibleCells().map(cell => {
-                        return (
-                          <TableData
-                            className={`col 
-                                ${
-                                  smallColumns.includes(cell?.column.id)
-                                    ? 'sm'
-                                    : mediumColumns.includes(cell?.column.id)
-                                    ? 'md'
-                                    : largeColumns.includes(cell?.column.id)
-                                    ? 'lg'
-                                    : ''
-                                }`}
-                            key={cell.id}
-                          >
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableData>
-                        );
-                      })}
+                {rows?.length > 0 ? (
+                  rows?.map(row => (
+                    <TableRow
+                      key={row.id}
+                      className={`${
+                        selectedRows?.length > 0 &&
+                        selectedRows?.filter(
+                          (f: any) => f?.id === (row?.original as any)?.id
+                        )?.length
+                          ? 'isSelectedRow'
+                          : ''
+                      }`}
+                    >
+                      {row.getVisibleCells().map(cell => (
+                        <TableData
+                          className={`col 
+                            ${
+                              noFlexColumns.includes(cell?.column.id)
+                                ? 'noFlex'
+                                : smallColumns.includes(cell?.column.id)
+                                ? 'sm'
+                                : mediumColumns.includes(cell?.column.id)
+                                ? 'md'
+                                : largeColumns.includes(cell?.column.id)
+                                ? 'lg'
+                                : ''
+                            } ${cell?.column.id}`}
+                          key={cell.id}
+                        >
+                          {flexRender(cell.column.columnDef.cell, {
+                            ...cell.getContext(),
+                            action,
+                          })}
+                        </TableData>
+                      ))}
                     </TableRow>
                   ))
                 ) : (
-                  <>No records found</>
+                  <TableRow>
+                    <TableData colSpan={columns.length}>
+                      No entries found.
+                    </TableData>
+                  </TableRow>
                 )}
               </TableBody>
             </Table>
@@ -129,11 +131,6 @@ function DynamicTable({ columns, data }: DynamicTableProps) {
   );
 }
 
-// const ChevronUpIcon = styled(ChevronDownIcon)`
-//   transform: rotate(180deg);
-//   cursor: pointer;
-// `;
-
 const Container = styled.div`
   height: 30vh;
   pointer-events: initial;
@@ -151,7 +148,7 @@ const TableWrapper = styled.div`
 `;
 
 const TableHeadData = styled.th`
-  padding: 20px;
+  padding: 10px 5px;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: 500;
@@ -161,7 +158,7 @@ const TableHeadData = styled.th`
 
 const TableData = styled.td`
   border-spacing: 0px;
-  padding: 13px;
+  padding: 10px 5px;
   font-family: 'Lato', sans-serif;
   font-size: 13px;
   font-weight: 400;
@@ -201,29 +198,57 @@ const Table = styled.table`
 `;
 
 const MainContainer = styled.div`
-  // width: 40%;
   .col {
-    flex: 2;
-    // padding: 0 0 0 10px;
-    word-break: break-all;
     display: flex;
-    color: #3a3630;
     align-items: center;
-    // width: 160px;
+    color: #3a3630;
+    padding: 10px 5px;
+    text-align: left;
+  }
+
+  .col.noFlex {
+    flex: 0;
   }
 
   .col.sm {
-    flex: 1.5;
-    // width: 115px;
+    flex: 1;
+    min-width: 100px;
   }
+
   .col.md {
-    flex: 2.5;
-    // width: 175px;
+    flex: 2;
+    justify-content: flex-start;
+    min-width: 85px;
   }
+
   .col.lg {
-    flex: 10;
-    // width: 240px;
-    // padding-right: 10px;
+    flex: 4;
+    justify-content: flex-start;
+    min-width: 180px;
+  }
+
+  .col.date {
+  }
+
+  .col.amount,
+  .col.price {
+    justify-content: flex-end;
+  }
+
+  .TableHeadData,
+  .TableData {
+    padding: 10px 5px;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .TableRow {
+    display: flex;
+    width: 100%;
+  }
+
+  .Table {
+    width: 100%;
   }
 `;
 

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

@@ -1,6 +1,5 @@
 import { ChargeLogData } from './types';
 
-
 export const bjsMenu = [
   // {
   //   label: 'Add Order Resources',
@@ -17,7 +16,10 @@ export const optionsMenu = [
   { label: 'Confirm', value: 'confirm-order' },
   { label: 'Hold', value: 'hold-order' },
   { label: 'Cancel', value: 'cancel-order' },
-  {label:  'Un Hold', value: 'unhold-order',
+  { label: 'Un Hold', value: 'unhold-order' },
+  {
+    label: 'Un-Cancel',
+    value: 'uncancel-order',
   },
   // { label: 'Charge Log', value: 'charge-log' },
 ];

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

@@ -2,69 +2,53 @@ import styled from 'styled-components';
 import React from 'react';
 import { Skeleton } from 'antd';
 import { formatDateTime } from '@bjsdistribution/dms-component-library';
-import { usegetNotes } from '../store';
+import { useAuditLogLoadingState, usegetNotes } from '../store';
 import { NotesTableData } from '../notes/logs/fakeData';
-import {
-  IconCover,
-  Td as BaseTd,
-  Th,
-  Table,
-} from '../../order-daily-overview/common/css/TableStyle';
 
 const GenericAuditLogsTable = () => {
   const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
-
-  // const [isLoading] = UseNotesLoading();
-  // console.log(getNotes,'getNotesgetNotes');
+  const [auditLogLoadingStatus] = useAuditLogLoadingState();
 
   return (
     <ScrollableTableWrapper>
       <AuditTableWrapper>
-        <StickyHeaderWrapper>
-          <StyledTable>
-            <thead>
-              <tr>
-                {tableHeadData.map(column => (
-                  <Th key={column.key}>
-                    <IconCover>{column.label}</IconCover>
-                  </Th>
-                ))}
-              </tr>
-            </thead>
-          </StyledTable>
-        </StickyHeaderWrapper>
-        <StyledTable>
+        <table>
+          <thead>
+            <tr>
+              {tableHeadData?.map(column => (
+                <th key={column.key}>{column.label}</th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {getNotes?.loading ? (
+            {auditLogLoadingStatus ? (
               <tr>
                 <td className="noBoder" colSpan={tableHeadData?.length}>
                   <Skeleton />
                 </td>
               </tr>
-            ) : getNotes?.data && getNotes?.data?.length > 0 ? (
-              getNotes?.data?.map((note: any) => (
-                <StyledTr key={note?.id}>
-                  <DateTd>
-                    <CreatedBy title={note?.created_by}>
+            ) : getNotes && getNotes?.length > 0 ? (
+              getNotes?.map((note: any) => (
+                <tr key={note?.id}>
+                  <td>
+                    <div className="bold" title={note?.created_by}>
                       {note?.created_by}
-                    </CreatedBy>
+                    </div>
                     <div>{formatDateTime(note?.created_at)}</div>
-                  </DateTd>
-                  <StyledTd
+                  </td>
+                  <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
-                  ></StyledTd>
-                </StyledTr>
+                  ></td>
+                </tr>
               ))
             ) : (
               <tr>
-                <NoDataFound colSpan={tableHeadData?.length}>
-                  No data found
-                </NoDataFound>
+                <td colSpan={tableHeadData?.length}>No data found</td>
               </tr>
             )}
           </tbody>
-        </StyledTable>
+        </table>
       </AuditTableWrapper>
     </ScrollableTableWrapper>
   );
@@ -109,52 +93,10 @@ export const AuditTableWrapper = styled.div`
   }
 `;
 
-const DateTd = styled(BaseTd)`
-  color: #6d6d6d;
-`;
-
-const NoDataFound = styled(BaseTd)`
-  text-align: center;
-  padding: 16px;
-  font-size: 16px;
-  color: #999;
-`;
-
-const StyledTable = styled(Table)`
-  width: 100%;
-  table-layout: fixed;
-  td.noBoder {
-    background: none !important;
-    border: none !important;
-    padding: 0;
-  }
-`;
-
-const StyledTr = styled.tr`
-  &:nth-child(even) {
-    background-color: #f3fbff;
-  }
-`;
-
-const StyledTd = styled(BaseTd)`
-  padding: 10px;
-`;
-
-const CreatedBy = styled.div`
-  font-weight: bold;
-`;
-
 const ScrollableTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
   overflow: auto;
 `;
 
-const StickyHeaderWrapper = styled.div`
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: #fff;
-`;
-
 export default GenericAuditLogsTable;

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

@@ -136,13 +136,6 @@ function OrderView() {
     performAction: false,
   });
 
-  useEffect(() => {
-    if (orderId) {
-      orderUpdate(true);
-      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
-    }
-  }, [orderId, liveRecalling]);
-
   const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -169,6 +162,12 @@ function OrderView() {
     method: 'GET',
     filters: [{ field: 'visibility', op: '=', value: true }],
   });
+  useEffect(() => {
+    if (orderId) {
+      orderUpdate(true);
+      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
+    }
+  }, [orderId, liveRecalling]);
 
   useEffect(() => {
     setLoading(staticDataLoading);