@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,350 @@
+import React, { useEffect } from 'react';
+// import Notification from './notification';
+import styled from 'styled-components';
+import OrderDetails from './order-details';
+import Notes from './notes';
+import Order from './order-resources/expanded-content';
+// import Toolbox from './toolbox-resources/expanded-content';
+import SystemLogs from './system-event-logs/expanded-content';
+import GeneralHeader from './general-information';
+import ProductsInfo from './products-info';
+// import TomTomLogs from './tomtomlogs/expanded-content';
+// import { OrderViewType } from '../types';
+// import Modals from './modals';
+import OrderActions from './order-actions';
+import { Alert, useApiHook } from '@bjsdistribution/dms-component-library';
+
+import {
+  useOrderDetails,
+  useOrderStaticData,
+  useStatusDetails,
+  useOrderId,
+  useDepotOptions,
+  usePrevOrderDetails,
+} from './store';
+// import Loader from '../order-daily-overview/header/loader/Loader';
+import { useLoading } from '../order-daily-overview/store/store';
+import { OrdersType } from './types';
+import { useLocation } from 'react-router-dom';
+import RouterHeader from '../order-daily-overview/header/route-header/RouterHeader';
+// import HeaderFilter from '../order-daily-overview/Header-filters/HeaderFilter';
+// import Filters from '../order-daily-overview/filters/Filters';
+import DetailsFilters from './details-filters/DetailsFilters';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+  setShouldPerformAction: boolean;
+}
+
+function OrderView() {
+  const [orderId, setOrderId] = useOrderId();
+
+  const splitPath = (str: any) => {
+    const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
+    return parts;
+  };
+
+  // For API Call
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+  const [, setOrderStaticData] = useOrderStaticData();
+  const [, setOrderStatus] = useStatusDetails();
+  const [, setDepotOptions] = useDepotOptions();
+  const location = useLocation();
+  const paths = splitPath(location.pathname);
+
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/getStaticData/all/`,
+    method: 'GET',
+  });
+
+  //Order status api
+  const {
+    data: fetchedStatusData,
+    loading: statusDataLoading,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/get_live_status/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  const { data: fetchedDepotData, loading: depotDataLoading } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/depot/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (orderId) {
+      setShouldPerformAction(true);
+      setPerformAction(true);
+    }
+  }, [orderId]);
+
+  useEffect(() => {
+    if (paths.length > 1) {
+      setOrderId(paths[1]);
+    }
+  }, [paths]);
+
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedStaticData && fetchedStaticData.data) {
+      const result = fetchedStaticData?.data;
+      setOrderStaticData(result[0]);
+    }
+  }, [staticDataLoading]);
+
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData?.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    setLoading(statusDataLoading);
+    if (fetchedStatusData && fetchedStatusData.data) {
+      const requiredData = fetchedStatusData?.data;
+      if (requiredData.length > 0) {
+        setOrderStatus(requiredData);
+      } else {
+        setOrderStatus(null);
+      }
+    }
+  }, [statusDataLoading]);
+
+  useEffect(() => {
+    setLoading(depotDataLoading);
+    if (fetchedDepotData && fetchedDepotData.data) {
+      const requiredData = fetchedDepotData?.data;
+      if (requiredData.length > 0) {
+        const options = requiredData.map((x: any) => {
+          return {
+            label: x.name,
+            value: x.id,
+          };
+        });
+        setDepotOptions(options);
+      } else {
+        setDepotOptions([]);
+      }
+    }
+  }, [depotDataLoading]);
+
+  return (
+    <>
+      <DashBoardWrapper>
+        <RouterHeader />
+        <div className="Tableconatiner">
+          {/* <HeaderFilter /> */}
+          <DetailsFilters />
+          <MainContainer>
+            {/* <Loader /> */}
+            <Section>
+              <GeneralHeader />
+              {/* <Notification /> */}
+              <NotifyContainer>
+                <Alert
+                  type="error"
+                  title={`Outstanding`}
+                  description=""
+                  showOkButton={false}
+                  onClose={() => {}}
+                />
+              </NotifyContainer>
+              <OrderDetails />
+            </Section>
+
+            <ProductsInfo />
+            <SplitLayout>
+              <NotesContainer>
+                <Notes />
+              </NotesContainer>
+              <TablesContainer>
+                <Order />
+                {/* <Toolbox /> */}
+                <SystemLogs />
+                {/* <TomTomLogs /> */}
+              </TablesContainer>
+            </SplitLayout>
+            <OrderActions />
+          </MainContainer>
+        </div>
+      </DashBoardWrapper>
+    </>
+  );
+}
+
+const Section = styled.div`
+  display: flex;
+  background: #ffffff;
+  // padding: 15px;
+  flex-direction: column;
+  gap: 14px;
+  border-radius: 12px;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  border: 1px solid #e0e0e0;
+`;
+/* // `; */
+const DashBoardWrapper = styled.section`
+  .Tableconatiner {
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    display: block;
+    padding: 15px 20px;
+  }
+  .headerWrap,
+  .tableData,
+  .styleCovered {
+    transition: all ease 0.5s;
+  }
+  &.stickyTableHead {
+    h2 {
+      font-size: 21px;
+    }
+    .headerWrap {
+      height: 84px;
+      padding: 10px;
+      border-radius: 0px 0px 15px 15px;
+      > div {
+        position: relative;
+        z-index: 10;
+      }
+    }
+    .styleCovered {
+      margin-top: -32px;
+      width: 67%;
+      float: right;
+      gap: 5px;
+      padding-right: 11px;
+
+      li {
+        padding: 4px 10px 5px 5px;
+        gap: 5px;
+        .svgCover {
+          width: 30px;
+          height: 30px;
+          svg {
+            height: auto;
+            width: 58%;
+          }
+        }
+        .countDigit {
+          font-size: 19px;
+        }
+      }
+      .countMess {
+        font-size: 13px;
+      }
+    }
+    .dmsBulkFilter {
+      min-height: unset;
+      gap: 4px;
+      > div {
+        padding: 4px 12px;
+        label {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .StyledFilterList {
+      gap: 4px;
+      li {
+        height: 29px;
+        padding: 3px 8px;
+        gap: 4px;
+        .StyledFilterBtnIcon {
+          width: 20px;
+          height: 20px;
+          svh {
+            width: 10px;
+            height: auto;
+          }
+        }
+        .StyledFilterBtnLabel {
+          font-size: 13px;
+        }
+      }
+    }
+    .StyledFilterLabel {
+      padding-left: 10px;
+      span {
+        font-size: 13px;
+      }
+    }
+    .cardcontainer.tableData {
+      max-height: calc(100vh - 310px);
+      min-height: calc(100vh - 310px);
+    }
+
+    .tableData {
+      max-height: calc(100vh - 320px);
+      min-height: calc(100vh - 320px);
+
+      margin-top: 8px;
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        th {
+          font-size: 13px;
+          padding: 2px 15px;
+        }
+      }
+    }
+  }
+`;
+const NotifyContainer = styled.div`
+  margin-left: 18px;
+`;
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 30px;
+`;
+
+const SplitLayout = styled.div`
+  display: flex;
+  gap: 15px;
+  @media (max-width: 1024px) {
+    display: contents;
+  }
+`;
+
+const NotesContainer = styled.div`
+  flex: 1;
+`;
+
+const TablesContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export default OrderView;

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

@@ -0,0 +1,234 @@
+import React from 'react';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import BarCode from '../../../assets/icons/BarCode';
+import WeightIcon from '../../../assets/icons/WeightIcon';
+import CbmIcon from '../../../assets/icons/CbmIcon';
+import { useCreateOrderProducts, useOrderStaticData } from '../store';
+import { CreateProduct } from '../types';
+
+const AddProduct = () => {
+  const [orderProduct, setOrderProduct] = useCreateOrderProducts();
+  const [orderStaticData] = useOrderStaticData();
+
+  const typeOptions = orderStaticData?.order_product_type?.map(
+    (option: any) => ({
+      label: option?.type,
+      value: option?.id,
+    })
+  );
+
+  const handleInputChange = (
+    index: number,
+    field: keyof CreateProduct,
+    value: any
+  ) => {
+    setOrderProduct((prevProducts: any) => {
+      const newProducts = [...prevProducts];
+      newProducts[index] = {
+        ...newProducts[index],
+        [field]: value,
+      };
+      return newProducts;
+    });
+  };
+
+  const onSelectChange = (index: number, value: any) => {
+    handleInputChange(index, 'product_type_id', +value);
+  };
+
+  const onSearch = (value: string) => {
+    console.log('search item value:', value);
+  };
+
+  return (
+    <GLobalPopupContent>
+      <SimpleTable>
+        <table>
+          <thead>
+            <tr>
+              <th>Product Type</th>
+              <th style={{ width: '130px' }}>
+                <span>
+                  Code <em>*</em>
+                </span>
+              </th>
+              <th style={{ width: '33%' }}>
+                <span>
+                  Description <em>*</em>
+                </span>
+              </th>
+              <th>Barcode</th>
+              <th style={{ width: '120px' }}>Weight</th>
+              <th style={{ width: '120px' }}>CBM</th>
+            </tr>
+          </thead>
+          <tbody>
+            {orderProduct.length > 0 &&
+              orderProduct?.map((item: any, index: number) => (
+                <tr key={index}>
+                  <td>
+                    <AntSelect
+                      options={typeOptions}
+                      placeholder="Deliver"
+                      onChange={value => onSelectChange(index, value)}
+                      disabled={false}
+                      style={{ width: 120 }}
+                      onSearch={onSearch}
+                      showSearch={true}
+                      popupClassName={'dropDownStyle'}
+                      selectWrapperClass={''}
+                    />
+                  </td>
+                  <td>
+                    <div className="inputWrap">
+                      <input
+                        type="text"
+                        placeholder="code"
+                        value={item.code}
+                        onChange={e =>
+                          handleInputChange(index, 'code', e.target.value)
+                        }
+                      />
+                    </div>
+                  </td>
+                  <td>
+                    <div className="inputWrap">
+                      <input
+                        type="text"
+                        placeholder="Enter Description of Product"
+                        value={item.description}
+                        onChange={e =>
+                          handleInputChange(
+                            index,
+                            'description',
+                            e.target.value
+                          )
+                        }
+                      />
+                    </div>
+                  </td>
+                  <td>
+                    <div className="inputWrap">
+                      <input
+                        type="text"
+                        placeholder="Enter barcode of product"
+                        value={item.sku}
+                        onChange={e =>
+                          handleInputChange(index, 'sku', e.target.value)
+                        }
+                      />
+                      <BarCode />
+                    </div>
+                  </td>
+                  <td>
+                    <div className="inputWrap">
+                      <input
+                        type="text"
+                        placeholder="00.00"
+                        value={item.weight}
+                        onChange={e =>
+                          handleInputChange(
+                            index,
+                            'weight',
+                            parseFloat(e.target.value)
+                          )
+                        }
+                      />
+                      <WeightIcon />
+                    </div>
+                  </td>
+                  <td>
+                    <div className="inputWrap">
+                      <input
+                        type="text"
+                        placeholder="00.00"
+                        value={item.cube}
+                        onChange={e =>
+                          handleInputChange(
+                            index,
+                            'cube',
+                            parseFloat(e.target.value)
+                          )
+                        }
+                      />
+                      <CbmIcon />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </SimpleTable>
+    </GLobalPopupContent>
+  );
+};
+
+export default AddProduct;
+
+const GLobalPopupContent = styled.div``;
+
+const SimpleTable = styled.div`
+  padding: 0 15px;
+  min-height: 158px;
+  table {
+    border-spacing: 0px 12px;
+    border-collapse: separate;
+    thead {
+      tr {
+        th {
+          padding: 0 10px 0;
+          color: #6a7378;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 20px;
+          text-align: left;
+          span {
+            position: relative;
+            em {
+              color: #fc5555;
+              font-style: normal;
+            }
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          padding: 10px 8px;
+          background: #f8fafc;
+          box-shadow: 5px 1px 5px 0px rgba(16, 24, 40, 0.1);
+
+          .inputWrap {
+            position: relative;
+            input[type='text'] {
+              border-radius: 6px;
+              border: 1px solid #e0e2e7;
+              background: #fff;
+              box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+              padding: 8px 10px;
+              width: 100%;
+              padding-right: 30px;
+              &:focus-visible {
+                outline: none;
+              }
+            }
+            svg {
+              position: absolute;
+              right: 11px;
+              top: 7px;
+            }
+          }
+          &:first-child {
+            border-radius: 5px 0 0 5px;
+          }
+          &:last-child {
+            border-radius: 0 5px 5px 0;
+          }
+        }
+      }
+    }
+  }
+`;