@bjsdistribution/dms-client-return 0.1.13-prod → 0.1.14-prod

package/package.json

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

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

@@ -51,6 +51,7 @@ function ReturnMainTable() {
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -71,6 +72,7 @@ function ReturnMainTable() {
     //@ts-ignore
     pagination: pagination,
     filters: filters,
+    showLoader: false,
   });
 
   useEffect(() => {

package/src/components/order-daily-overview/return-after-table/ReturnAfterTable.tsx

@@ -47,6 +47,7 @@ const ReturnAfterTable = () => {
     filters: filters && filters?.length > 0 ? filters : undefined,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {

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

@@ -124,6 +124,7 @@ const ReturnOrderTable = () => {
     filters: filters,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {

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

@@ -108,7 +108,6 @@ const ReturnTable: React.FC = () => {
       customerId: customerId?.toString(),
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -138,7 +137,6 @@ const ReturnTable: React.FC = () => {
       type: RTS,
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -176,13 +174,13 @@ const ReturnTable: React.FC = () => {
           <tbody>
             {statsLoading ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <Skeleton active />
                 </td>
               </tr>
             ) : sortedData?.length === 0 ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>

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/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/index.tsx

@@ -48,7 +48,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function OrderView() {
+function OrderView({ locationloading }: any) {
   notification.config({
     top: 150,
   });
@@ -98,6 +98,7 @@ function OrderView() {
         value: `${order_id}`,
       },
     ],
+    showLoader: false,
   });
 
   // query param
@@ -291,12 +292,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(() => {
@@ -449,19 +452,22 @@ function OrderView() {
 
   return (
     <MainContainer>
-      <GeneralHeader />
+      <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',

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

@@ -33,6 +33,7 @@ function AddNote() {
   const { fetchData: getNoteType, data: fetchedData } = useAxios<any>({
     endpoint: `audit_logs/order/type`,
     method: 'GET',
+    showLoader: false,
   });
 
   useEffect(() => {

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

@@ -22,6 +22,7 @@ import {
   useAllOrderStatus,
 } from '../order-actions/store';
 import { useParams, useSearchParams } from 'react-router-dom';
+import { Skeleton } from 'antd';
 
 interface ApiResponse {
   message: string;
@@ -74,6 +75,7 @@ function Notification() {
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
+    showLoader: false,
   });
 
   //reminder get
@@ -88,6 +90,7 @@ function Notification() {
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -120,6 +123,7 @@ function Notification() {
   }>({
     endpoint: `route/${routeId}`,
     method: 'GET',
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -140,6 +144,7 @@ function Notification() {
   }>({
     endpoint: `v1/orders/alerts/?order_id=${orderId}`,
     method: 'GET',
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -219,6 +224,7 @@ function Notification() {
   const totalClosedCount =
     closedTasks?.filter((item: any) => item.status === 'SD')?.length +
     closedReminders?.length;
+  console.log(unresolvedLoading, 'unresolved', reminderLoading, 'reminder');
 
   return (
     <>
@@ -245,10 +251,9 @@ function Notification() {
             </StyledTab>
           </TabsData>
         </Container>
-        {unresolvedLoading || reminderLoading ? (
+        {unresolvedLoading || reminderLoading || alertsApiLoading ? (
           <Loader>
-            <Spinner />
-            <Text>Fetching Notifications...</Text>
+            <Skeleton avatar paragraph={{ rows: 2 }} />
           </Loader>
         ) : taskData?.length > 0 ||
           reminderNotifyData?.length > 0 ||
@@ -288,23 +293,23 @@ const Loader = styled.div`
   gap: 10px;
 `;
 
-const Spinner = styled.div`
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #3a3630;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
+// const Spinner = styled.div`
+//   border: 4px solid rgba(0, 0, 0, 0.1);
+//   border-left-color: #3a3630;
+//   border-radius: 50%;
+//   width: 40px;
+//   height: 40px;
+//   animation: spin 1s linear infinite;
+
+//   @keyframes spin {
+//     0% {
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       transform: rotate(360deg);
+//     }
+//   }
+// `;
 
 const FlagContainer = styled.div`
   padding: 8px;
@@ -369,7 +374,7 @@ const Label = styled(SectionHeader)`
 
 const TabsWrapper = styled.div`
   /* min-height: 200px; */
-  max-height: 350px;
+  max-height: 300px;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -391,11 +396,11 @@ const TabsWrapper = styled.div`
   }
 `;
 
-const Text = styled.div`
-  color: var(--tonal-brown-651, #6a7378);
-  font-family: Lato;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 600;
-`;
+// const Text = styled.div`
+//   color: var(--tonal-brown-651, #6a7378);
+//   font-family: Lato;
+//   font-size: 13px;
+//   font-style: normal;
+//   font-weight: 600;
+// `;
 export default Notification;

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -27,6 +27,7 @@ function NotesTable() {
     endpoint: 'audit_logs/modules/',
     method: 'GET',
     pagination: { page: 1, per_page: 100 },
+    showLoader: false,
   });
   useEffect(() => {
     if (!apiLoading && fetchedData?.data) {

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateTaskModal.tsx

@@ -87,7 +87,7 @@ function CreateTaskModal() {
           />
         </FormRow>
 
-        <FormRow label="Due Date & Time" required>
+        <FormRow label="Due Date & Time">
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
@@ -129,7 +129,9 @@ function CreateTaskModal() {
 const getTaskTypeOptions = (staticData: any) => {
   return (
     staticData?.[0]?.order_flag_types?.map((item: any) => ({
-      label: item?.type,
+      label: item?.type
+        ?.replace(/_/g, ' ')
+        ?.replace(/\b\w/g, (char: any) => char.toUpperCase()),
       value: item?.id,
     })) || []
   );
@@ -190,7 +192,7 @@ const StyledTextArea = styled(TextArea)`
   border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
   background: var(--Flowkit-White, #fff);
   resize: none;
-  height: 25%;
+  height: 50%;
 `;
 
 export default CreateTaskModal;

package/src/components/order-view/order-actions/actions/create-task-reminder/TaskModal.tsx

@@ -95,8 +95,8 @@ function TaskModal(props: IProps) {
   };
 
   const isSubmitDisabled = () => {
-    const { description, due_datetime, flag_type, priority } = taskPayload;
-    return !description || !due_datetime || !flag_type || !priority;
+    const { description, flag_type, priority } = taskPayload;
+    return !description || !flag_type || !priority;
   };
 
   return (

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

@@ -94,8 +94,8 @@ function OrderActions() {
       setProductDetails(productsData?.data);
       setProductDetailsCopy(productsData?.data);
     } else {
-      setProductDetails(null);
-      setProductDetailsCopy(null);
+      setProductDetails([]);
+      setProductDetailsCopy([]);
     }
   }, [orderProductsLoading]);
 
@@ -177,6 +177,7 @@ function OrderActions() {
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
+    showLoader: false,
   });
 
   useEffect(() => {

package/src/components/order-view/order-actions/store.ts

@@ -18,7 +18,7 @@ export const initialPayload: CreateTaskPayload = {
   flag_type: '',
   priority: 3,
   status: 'AD',
-  due_datetime: '',
+  // due_datetime: '',
 };
 
 export const initialValue: CreateReminderPayload = {

package/src/components/order-view/order-actions/types.ts

@@ -22,7 +22,7 @@ export interface CreateTaskPayload {
   flag_type: string | null;
   priority: number | null;
   status: string | null;
-  due_datetime: string | null;
+  due_datetime?: string | null;
 }
 export interface resolveTaskPayload {
   task_ids: number[] | null;