@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.21-dev

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

@@ -8,14 +8,19 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import CustomScrollBar from '../../common/scrollbar';
 import { atom, useAtom } from 'jotai';
+import { Skeleton } from 'antd';
 export const selectedID = atom<any>([]);
 
 interface DynamicTableProps {
   columns: any;
   data: any[];
+  loading: boolean;
 }
 
-function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
+function DynamicTable(
+  { columns, data, loading }: DynamicTableProps,
+  props: any
+) {
   const tableColumns = useMemo(() => columns, [columns]);
   const tableData = useMemo(() => data, [data]);
 
@@ -44,6 +49,8 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
   const largeColumns = ['details', 'datetime'];
   const noFlexColumns = ['id'];
 
+  console.log(rows, '<===========rows');
+  console.log(props, 'props');
   return (
     <MainContainer>
       <Container>
@@ -78,7 +85,19 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
                 ))}
               </TableHead>
               <TableBody>
-                {rows?.length > 0 ? (
+                {loading ? (
+                  <tr>
+                    <td colSpan={5}>
+                      <Skeleton active />
+                    </td>
+                  </tr>
+                ) : rows?.length === 0 ? (
+                  <TableRow>
+                    <TableData colSpan={columns.length}>
+                      No entries found.
+                    </TableData>
+                  </TableRow>
+                ) : (
                   rows?.map(row => (
                     <TableRow
                       key={row.id}
@@ -115,12 +134,6 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
                       ))}
                     </TableRow>
                   ))
-                ) : (
-                  <TableRow>
-                    <TableData colSpan={columns.length}>
-                      No entries found.
-                    </TableData>
-                  </TableRow>
                 )}
               </TableBody>
             </Table>

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

@@ -41,7 +41,7 @@ function DropDowns() {
             onClick={action.onClick}
             style={{ cursor: 'pointer' }}
           >
-            {action.label}
+            {action?.label}
           </FontContainer>
         ))}
       </DashBoardWrapper>

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

@@ -40,6 +40,7 @@ function Options() {
   };
 
   const isReleased = orderStatus[0]?.released;
+  // const routedValue = orderStatus[0]?.routed;
   const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
   const isOrderOnHold = orderDetails?.status === 'OO';
   const isOrderCancelled = orderDetails?.status === 'CO';
@@ -73,6 +74,14 @@ function Options() {
       shouldExclude = true;
     }
 
+    if (isRouted && option.value === 'clear-date') {
+      shouldExclude = true;
+    }
+
+    // if (routedValue && option.value === 'remove-from-route') {
+    //   shouldExclude = true;
+    // }
+
     return !shouldExclude;
   });
 

package/src/components/order-view/details-filters/right-side-filters/Details.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useCustomerInfo } from '../../store';
+import { useCustomerInfo, useGlobalEscData } from '../../store';
 
 const Details = () => {
   // const [orderDetails] = useOrderDetails();
   const [customerInfo] = useCustomerInfo();
   const recipient = customerInfo?.recipient_name || '';
   const postcodeShow = customerInfo?.postcode || '';
+  const [globalEscData] = useGlobalEscData();
 
   return (
     <DetailsContainer>
       <Typo>
-        CUSTOMER RETURN - {recipient} , {postcodeShow}
+        CUSTOMER RETURN - {recipient} , {postcodeShow} {}
+        {globalEscData?.length > 0 && (
+          <EscInfo>
+            {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}
+          </EscInfo>
+        )}
       </Typo>
     </DetailsContainer>
   );
@@ -27,10 +33,14 @@ const DetailsContainer = styled.div`
 `;
 
 const Typo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 32px; /* 160% */
+  line-height: 32px;
   text-transform: uppercase;
   margin: 0;
   padding: 0;
@@ -40,4 +50,19 @@ const Typo = styled.div`
   }
 `;
 
+const Name = styled.div`
+  /* heading/h3-subHeader */
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 32px; /* 160% */
+  text-transform: uppercase;
+`;
+
+const EscInfo = styled(Name)`
+  color: #6396e5;
+  font-size: 16px;
+`;
+
 export default Details;

package/src/components/order-view/flags-action-modal/Dropdowns.tsx

@@ -75,6 +75,7 @@ function ButtonsSection() {
           placeholder="Select Type"
           onChange={handleTaskTypeChange}
           value={selectedTypeId}
+          style={{ minWidth: '200px', width: 'auto' }}
         />
       </Flex>
       <Flex>
@@ -84,6 +85,7 @@ function ButtonsSection() {
           placeholder="Select Type"
           onChange={handlePriorityChange}
           value={taskPayload?.priority || flagById?.priority}
+          style={{ minWidth: '100px', width: 'auto' }}
         />
       </Flex>
       <Flex>

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

@@ -1,34 +1,66 @@
 import React from 'react';
 import styled from 'styled-components';
 import { StatusOptions } from '../helper';
-import Divider from '../../../assets/icons/Divider';
 // Import icon
 import RouteIcon from '../../../assets/icons/RoutedIcon';
 import SuccessIcon from '../../../assets/icons/SuccessIcon';
 import DeliveredIcon from '../../../assets/icons/DeliveredIcon';
 import ConfirmedIcon from '../../../assets/icons/ConfirmedIcon';
 import { useStatusDetails } from '../store';
+import { Skeleton } from 'antd';
+import Divider from '../../../assets/icons/Divider';
 
-function Status() {
+function Status({ statusDataLoading }: any) {
   const [orderStatus] = useStatusDetails();
-
   return (
-    <Container>
-      <BoxContainer>
-        {StatusOptions.map((option, index) => (
-          <React.Fragment key={index}>
-            <TextContainer>
-              {renderIcon(option.value, orderStatus)}
-              <Heading>{option.label}</Heading>
-            </TextContainer>
-            {index < StatusOptions.length - 1 && <Divider />}
-          </React.Fragment>
-        ))}
-      </BoxContainer>
-    </Container>
+    <>
+      <Container>
+        <BoxContainer>
+          {statusDataLoading ? (
+            <>
+              <StatusSkeletonRow />
+            </>
+          ) : (
+            StatusOptions?.map((option, index) => (
+              <React.Fragment key={index}>
+                <TextContainer>
+                  {renderIcon(option.value, orderStatus)}
+                  <Heading>{option.label}</Heading>
+                </TextContainer>
+                {index < StatusOptions.length - 1 && <Divider />}
+              </React.Fragment>
+            ))
+          )}
+        </BoxContainer>
+      </Container>
+    </>
   );
 }
-
+const StatusSkeletonItem = () => (
+  <SkeletonItemContainer>
+    <Skeleton.Avatar size="small" style={{ marginRight: 12 }} />
+    <Skeleton.Input
+      active
+      size="small"
+      style={{ width: 150, borderRadius: 8 }}
+    />
+  </SkeletonItemContainer>
+);
+const StatusSkeletonRow = () => (
+  <StatusBox>
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+  </StatusBox>
+);
 const renderIcon = (value: any, orderStatus: any) => {
   const status = orderStatus && orderStatus.length > 0 ? orderStatus[0] : null;
 
@@ -72,11 +104,53 @@ const renderIcon = (value: any, orderStatus: any) => {
   }
 };
 
+// const RowWrapper = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   background: #fff;
+//   border-radius: 12px;
+//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+//   padding: 16px;
+// `;
+
+// const HeaderPlaceholder = styled.div`
+//   display: flex;
+//   align-items: center;
+//   padding: 8px 0;
+//   gap: 12px;
+// `;
+
+const StatusBox = styled.div`
+  display: flex;
+  align-items: center;
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 20px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 5px;
+  width: -webkit-fill-available;
+`;
+
+const SkeletonItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const SkeletonDivider = styled.div`
+  width: 12px;
+  height: 2px;
+  background-color: #e0e0e0;
+  margin: 0 4px;
+  border-radius: 2px;
+`;
+
 const BoxContainer = styled.div`
   border: 1px solid #e3e3e3;
   display: flex;
   justify-content: space-evenly;
-  border-radius: 8px;
+  border-radius: 20px;
   background: #f8fafc;
   align-items: center;
   height: 5%;

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

@@ -3,10 +3,10 @@ import Status from './Status';
 import styled from 'styled-components';
 // import DropDownOptions from './dropdowns';
 
-function GeneralHeader() {
+function GeneralHeader({ statusDataLoading }: any) {
   return (
     <Section>
-      <Status />
+      <Status statusDataLoading={statusDataLoading} />
       {/* <DropDownOptions /> */}
     </Section>
   );

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

@@ -1,12 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
+
 import { Skeleton } from 'antd';
-import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
-import { useAuditLogLoadingState, usegetNotes } from '../store';
+import {
+  PrivateIcon,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import { NotesTableData } from '../notes/logs/fakeData';
+import { useAuditLogLoadingState, usegetNotes } from '../store';
 
 const GenericAuditLogsTable = () => {
-  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const tableHeadData = NotesTableData[0]?.tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
   const [auditLogLoadingStatus] = useAuditLogLoadingState();
 
@@ -35,9 +39,23 @@ const GenericAuditLogsTable = () => {
                     <div className="bold" title={note?.created_by}>
                       {note?.created_by}
                     </div>
-                    <div>{`${formatUtcToLocal(note?.created_at).date} @ ${
-                      formatUtcToLocal(note?.created_at).time
-                    }`}</div>
+                    <div className="notesIcon">
+                      {note?.is_private ? (
+                        <>
+                          <PrivateIcon />{' '}
+                          <span className="datetime">{`${
+                            formatUtcToLocal(note?.created_at).date
+                          } @ ${
+                            formatUtcToLocal(note?.created_at).time
+                          }`}</span>
+                        </>
+                      ) : (
+                        <span className="datetime">{`${
+                          formatUtcToLocal(note?.created_at).date
+                        } @ ${formatUtcToLocal(note?.created_at).time}`}</span>
+                      )}
+                    </div>
+                    <div>{note?.note_type || 'N/A'}</div>
                   </td>
                   <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
@@ -56,6 +74,8 @@ const GenericAuditLogsTable = () => {
   );
 };
 
+const ScrollableTableWrapper = styled.div``;
+
 export const AuditTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
@@ -82,22 +102,29 @@ export const AuditTableWrapper = styled.div`
         color: #667085;
         font-family: Lato;
         font-size: 13px;
-        font-style: normal;
         font-weight: 400;
         line-height: 16px;
         padding: 10px;
+        border-bottom: 1px solid #efe8e8;
+        word-break: break-word;
+        vertical-align: top;
+
         .bold {
           font-weight: 500;
           font-size: 14px;
         }
+        .notesIcon {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .datetime {
+            min-width: 155px;
+          }
+        }
       }
     }
   }
 `;
 
-const ScrollableTableWrapper = styled.div`
-  height: 550px;
-  overflow: auto;
-`;
-
 export default GenericAuditLogsTable;

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

@@ -6,7 +6,11 @@ import SystemLogs from './system-event-logs/expanded-content';
 import GeneralHeader from './general-information';
 import ProductsInfo from './products-info';
 import OrderActions from './order-actions';
-import { useApiHook, useAxios } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  useApiHook,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
 import {
   useOrderDetails,
   // useOrderStaticData,
@@ -27,6 +31,7 @@ import {
   useGlobalStateHitOrder,
   useAtom,
   usegetClientData,
+  useGlobalEscData,
 } from './store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
@@ -47,7 +52,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function OrderView() {
+function OrderView({ locationloading }: any) {
   notification.config({
     top: 150,
   });
@@ -59,7 +64,7 @@ function OrderView() {
   const [, setLoading] = useState<boolean>(false);
   const [, setOrderStatus] = useStatusDetails();
   const [, setDepotOptions] = useDepotOptions();
-  const [, setCustomerInfo] = useCustomerInfo();
+  const [customerInfo, setCustomerInfo] = useCustomerInfo();
   const [, setLocationOptions] = useLocationOptions();
   const [orderResources, setOrderResources] = useOrderProductsResources();
   const [GsitCUstomerId, setGsitCUstomerId] = useGsitCUstomerId();
@@ -73,6 +78,7 @@ function OrderView() {
   const order_id = orderDetails?.id;
   const [getResources] = useAtom(setResourcesCall);
   const [, setClientData] = usegetClientData();
+  const [, setGlobalEscData] = useGlobalEscData();
 
   useEffect(() => {
     setStatusVal(orderDetails?.status_value);
@@ -96,6 +102,7 @@ function OrderView() {
         value: `${order_id}`,
       },
     ],
+    showLoader: false,
   });
 
   // query param
@@ -256,6 +263,7 @@ function OrderView() {
   useEffect(() => {
     if (orderId) {
       callCLientApi();
+      callEscalationApi();
     }
   }, [orderId]);
 
@@ -288,12 +296,14 @@ function OrderView() {
   const {
     data: fetchedResourcesData,
     setShouldPerformAction: setActions,
+    loading: loadingResources,
   } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `/orders/${orderId}/order_resources/`,
     method: 'GET',
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -418,21 +428,53 @@ function OrderView() {
       setSubContracterData(formattedData);
     }
   }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
+
+  // ESCALATIONS API
+
+  const {
+    data: fetchedEscalationData,
+    fetchData: callEscalationApi,
+    loading: escalationDataLoading,
+  } = useAxios<{
+    data: any;
+  }>({
+    endpoint: `/orders/escalations/${orderId}`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (fetchedEscalationData?.data) {
+      const escalationData = fetchedEscalationData?.data;
+      const sortedEscData = escalationData?.sort(
+        (a: any, b: any) =>
+          new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime()
+      );
+      const showEsc = sortedEscData != null && sortedEscData.length > 0;
+      showEsc ? setGlobalEscData(sortedEscData) : setGlobalEscData([]);
+    }
+  }, [escalationDataLoading]);
+
+  const docTitle = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
   return (
     <MainContainer>
-      <GeneralHeader />
+      <DocumentTitle title={docTitle} />
+      <GeneralHeader statusDataLoading={statusDataLoading} />
 
       <DetailsFilters />
       <Notification />
-      <OrderDetails />
-      <ProductsInfo />
+      <OrderDetails
+        orderLoading={loading}
+        depotDataLoading={depotDataLoading}
+      />
+      <ProductsInfo locationloading={locationloading} />
       <SplitLayout>
         <NotesContainer>
           <Notes />
         </NotesContainer>
         <TablesContainer>
-          <Order />
-          <SystemLogs />
+          <Order loading={loadingResources} />
+          <SystemLogs loading={logsLoading} />
         </TablesContainer>
       </SplitLayout>
       <OrderActions />

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

@@ -74,7 +74,7 @@ const ModalManager = () => {
 
   useEffect(() => {
     // @ts-ignore
-    if (response && response?.code == 500) {
+    if ((response && response?.code == 500) || response?.code == 400) {
       // @ts-ignore
       notification.error({
         message: 'Failure',