@bjsdistribution/dms-client-return 0.0.81 → 0.0.82

package/package.json

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

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);

package/src/components/order-view/notes/NoteType.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { useSelectedData, useVisibilityData } from '../../store';
@@ -7,6 +7,17 @@ function NoteType() {
   const [visibilityData] = useVisibilityData();
   const [selected, setSelected] = useSelectedData();
 
+  useEffect(() => {
+    if (visibilityData && !selected) {
+      const defaultOption = visibilityData?.find(
+        (option: any) => option.type === 'Private'
+      );
+      if (defaultOption) {
+        setSelected(defaultOption.value);
+      }
+    }
+  }, [visibilityData, selected, setSelected]);
+
   const handleRadioButtonChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {

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

@@ -15,16 +15,9 @@ import {
 function Notes() {
   const [moduleIds, setModuleIds] = usemoduleIds();
   const [orderId] = useOrderId();
-  // const location = useLocation();
-  // const pathname = location.pathname;
-  // const orderIdLocaation = pathname.split('/')[1];
-
-  const [recallAuditLog] = useGlobalStateHitAuditLog();
-
-  const [, setAuditLogLoading] = useAuditLogLoadingState();
-
   const [, setNotes] = usegetNotes();
-  // const [loderStatus] = useCallAPi();
+  const [, setAuditLogLoading] = useAuditLogLoadingState();
+  const [recallAuditLog, setAuditLogs] = useGlobalStateHitAuditLog();
 
   // Fetch module IDs
   const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
@@ -38,22 +31,21 @@ function Notes() {
         fetchedData?.data
           .filter((item: any) => item?.name === 'ORDER')
           .flatMap((item: any) =>
-            item?.static_child_mappings?.map((child: any) => ({
-              id: child?.child_module?.id,
-              name: child?.child_module?.name,
-              parentId: child?.parent_module?.id,
-              parentName: child?.parent_module?.name,
-            }))
+            item?.static_child_mappings
+              ?.filter(
+                (child: any) => child?.child_module?.name === 'ORDER-NOTE'
+              )
+              .map((child: any) => ({
+                id: child?.child_module?.id,
+                parentId: child?.parent_module?.id,
+              }))
           ) || [];
 
-      const orderNoteModule = modules?.find(
-        (module: any) => module?.name === 'ORDER-NOTE'
-      );
-
-      setModuleIds(orderNoteModule || modules[0] || null);
+      setModuleIds(modules[0] || null);
     }
   }, [apiLoading, fetchedData]);
 
+  // Fetch Notes Data
   const {
     data: NotesData,
     loading: NotesLoading,
@@ -69,13 +61,7 @@ function Notes() {
       setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
-      // const updatedData = NotesData?.data
-      // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
-      // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
-      // .flat()
-      // .filter(Boolean);
-
-      const updatedData = NotesData.data
+      const updatedData = NotesData?.data
         .filter(
           (item: any) =>
             item['ORDER-NOTE'] || item['ORDER'] || item['ORDER-RETURN']
@@ -84,12 +70,11 @@ function Notes() {
           item['ORDER-NOTE'],
           item['ORDER'],
           item['ORDER-RETURN'],
-        ]);
+        ])
+        .flat()
+        .filter(Boolean);
 
-      // const orderData = NotesData?.data[0]?.ORDER || [];
-      // const orderNotesData = NotesData?.data[1]?.['ORDER-NOTE'] || [];
-      // const allNotes = [...orderData, ...orderNotesData];
-      const combinedArray = updatedData.flat();
+      const combinedArray = updatedData?.flat();
       combinedArray.sort(
         (a: any, b: any) =>
           new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
@@ -102,9 +87,19 @@ function Notes() {
     setAuditLogLoading(NotesLoading);
   }, [moduleIds, orderId, NotesLoading, recallAuditLog]);
 
+  const handleGetLogs = () => {
+    setAuditLogs(true);
+    setTimeout(() => {
+      setAuditLogs(false);
+    }, 1000);
+  };
+
   return (
     <Container>
-      <CardHeader>NOTES</CardHeader>
+      <CardHeader>
+        NOTES
+        <SmallButton onClick={handleGetLogs}>UPDATE LOGS</SmallButton>
+      </CardHeader>
       <CustomizedFormSection>
         <AddNote />
         <AuditLogs />
@@ -129,6 +124,9 @@ const CardHeader = styled.div`
   text-transform: uppercase;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const CustomizedFormSection = styled.div`
@@ -142,4 +140,19 @@ const CustomizedFormSection = styled.div`
   border-bottom-left-radius: 8px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
 `;
+
+const SmallButton = styled.button`
+  background-color: #363a30;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #feba30;
+  }
+`;
 export default Notes;

package/src/components/order-view/order-actions/Dropdown.tsx

@@ -16,12 +16,16 @@ interface ActionsDropdownProps {
   disabled?: boolean;
   defaultValue?: any;
   onChange?: any;
+  required?: boolean;
 }
 
 function OrderActionsDropdown(props: ActionsDropdownProps) {
   return (
     <Container className={props.className}>
-      <Label>{props.label}</Label>
+      <Label>
+        {props.label}
+        {props.required && <RequiredAsterisk>*</RequiredAsterisk>}
+      </Label>
       <AntSelect
         options={props.options}
         placeholder={props.placeholder}
@@ -38,6 +42,11 @@ function OrderActionsDropdown(props: ActionsDropdownProps) {
   );
 }
 
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+`;
+
 const Label = styled.label`
   color: #6a7378;
   font-family: 'Lato', sans-serif;