@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Tabs } from 'antd';
+import styled from 'styled-components';
+import { useAtom } from 'jotai';
+import { selectedTabKeyAtom } from '../store';
+import QCLogs from './qclogs';
+import UpdateProduct from './UpdateProducts';
+import UnReceiveProduct from './UnReceiveProduct';
+
+const ProductAction = () => {
+  const [, setSelectedTabKey] = useAtom(selectedTabKeyAtom);
+
+  const handleTabChange = (activeKey: string) => {
+    setSelectedTabKey(activeKey);
+  };
+
+  return (
+    <>
+      <GLobalPopupContent>
+        <Container>
+          <Tabs
+            defaultActiveKey="1"
+            onChange={handleTabChange}
+            items={[
+              {
+                label: 'Update Product Type',
+                key: '1',
+                children: <UpdateProduct />,
+              },
+              {
+                label: 'Log QC Result',
+                key: '2',
+                children: <QCLogs />,
+              },
+              {
+                label: 'Unreceive Product',
+                key: '3',
+                children: <UnReceiveProduct />,
+              },
+            ]}
+          />
+        </Container>
+      </GLobalPopupContent>
+    </>
+  );
+};
+
+export default ProductAction;
+
+const GLobalPopupContent = styled.div``;
+
+const Container = styled.div`
+  display: flex;
+  height: 50vh;
+  padding-bottom: 30px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #edebe8;
+  padding: 15px;
+  overflow-y: scroll;
+  .ant-tabs {
+    width: 100%;
+  }
+  .ant-tabs-tab-active {
+    .ant-tabs-tab-btn {
+      color: #3a3630 !important;
+      font-family: 'Lato', sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+    }
+  }
+  .ant-tabs-ink-bar {
+    background: #feba30;
+  }
+`;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { AntTable } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { GLobalPopupContent } from '../order-actions/actions/update-product-type/UpdateProductTypeStyle';
+import { RepackData } from '../utils';
+
+const repackModal = () => {
+  const columns = [
+    {
+      key: 'packaging_type',
+      title: 'Packaging Type',
+      dataIndex: 'packaging_type',
+    },
+    { key: 'products', title: 'Products', dataIndex: 'products' },
+    { key: 'created_by', title: 'Created By', dataIndex: 'created_by' },
+    { key: 'date', title: 'Date', dataIndex: 'date' },
+    {
+      key: 'images',
+      title: 'Images',
+    },
+  ];
+  return (
+    <>
+      <GLobalPopupContent>
+        <StyledConatiner>
+          <AntTable
+            columns={columns}
+            data={RepackData}
+            onSelectChange={(value: any, record: any) =>
+              console.log('Selected value:', value, 'for record:', record)
+            }
+          />
+        </StyledConatiner>
+      </GLobalPopupContent>
+    </>
+  );
+};
+const StyledConatiner = styled.div`
+  /* text-wrap: nowrap; */
+`;
+
+export default repackModal;

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

@@ -0,0 +1,72 @@
+import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import Notes from '../../order-view/order-actions/actions/log-service-refusal/Notes';
+import {
+  useOrderStaticData,
+  useProductDetails,
+  useRecieveOrderProducts,
+} from '../store';
+
+function UnReceiveProduct() {
+  const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
+  const [productdata] = useProductDetails();
+  const [orderStaticData] = useOrderStaticData();
+
+  console.log(productdata, 'productdataproductdataproductdataproductdata');
+  useEffect(() => {
+    setUnRecieve((prevState: any) => ({
+      ...prevState,
+    }));
+  }, [setUnRecieve]);
+
+  const handleSelectChange = (value: string) => {
+    setUnRecieve(prevState => ({
+      ...prevState,
+      unrecieve_reason_id: +value,
+    }));
+  };
+
+  const handleNotesChange = (notes: any) => {
+    setUnRecieve((prevState: any) => ({
+      ...prevState,
+      unrecieve_note: notes,
+    }));
+  };
+
+  console.log(unRecieve, 'unRecieve');
+
+  const returnActionOptions = orderStaticData?.unreceive_reasons?.map(
+    (option: any) => ({
+      label: option.reason,
+      value: option.id,
+    })
+  );
+
+  return (
+    <Container>
+      <LabelWrapper>
+        <Label label="Reason" />
+        <StyledAntSelect
+          options={returnActionOptions}
+          placeholder="Select the Reason"
+          onChange={handleSelectChange}
+          selectWrapperClass="rounded"
+        />
+        <Notes onNotesChange={handleNotesChange} />
+      </LabelWrapper>
+    </Container>
+  );
+}
+
+const Container = styled.div``;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const StyledAntSelect = styled(AntSelect)``;
+
+export default UnReceiveProduct;

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

@@ -0,0 +1,145 @@
+import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ReturnData } from '../../fakeData';
+import { useOrderStaticData, useUpdateOrderProducts } from '../store';
+
+function UpdateProduct() {
+  const [selectedOption, setSelectedOption] = useState<string | undefined>();
+  const [orderStaticData] = useOrderStaticData();
+
+  const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
+  console.log(updateOrderProduct, 'updateOrderProductupdateOrderProduct');
+
+  const handleSelectChange = (value: string) => {
+    setSelectedOption(value);
+    setUpdateOrderProduct(prevState => ({
+      ...prevState,
+      product_type_id: +value,
+    }));
+  };
+
+  const handleReturnSelectChange = (value: any) => {
+    setUpdateOrderProduct(prevState => ({
+      ...prevState,
+      return_reason_id: +value,
+    }));
+    console.log('Return action or reason selected:', value);
+  };
+
+  const handleCollectionSelectChange = (value: any) => {
+    setUpdateOrderProduct(prevState => ({
+      ...prevState,
+      collection_reason_id: +value,
+    }));
+    console.log('Collection reason selected:', value);
+  };
+
+  const collectionOptions = orderStaticData?.collect_reasons?.map(
+    (option: any) => ({
+      label: option.reason,
+      value: option.id,
+    })
+  );
+  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
+    (option: any) => ({
+      label: option.type,
+      value: option.id,
+    })
+  );
+  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
+    (option: any) => ({
+      label: option.reason,
+      value: option.id,
+    })
+  );
+
+  const productTypeOptions = orderStaticData?.order_product_type?.map(
+    (option: any) => ({
+      label: option.type,
+      value: option.id,
+    })
+  );
+
+  return (
+    <Container>
+      <LabelWrapper>
+        <Label label="Product Type" />
+        <StyledAntSelect
+          options={productTypeOptions}
+          placeholder="Select Product Type"
+          onChange={handleSelectChange}
+          selectWrapperClass="rounded"
+        />
+      </LabelWrapper>
+      {selectedOption === '1' && (
+        <ReturnBox>
+          <LabelWrapper>
+            <Label label="Return Action" />
+            <StyledAntSelect
+              options={returnActionOptions || []}
+              placeholder="Select the Return Action"
+              onChange={handleReturnSelectChange}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+          <LabelWrapper>
+            <Label label="Return Reason" />
+            <StyledAntSelect
+              options={returnReasonsOptions || []}
+              placeholder="Select the Return Reason"
+              onChange={handleReturnSelectChange}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+          <LabelWrapper>
+            <Label label="Return Location" />
+            <StyledAntSelect
+              options={ReturnData}
+              placeholder="Select the Return Location"
+              onChange={handleReturnSelectChange}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+        </ReturnBox>
+      )}
+      {selectedOption === '2' && (
+        <CollectionBox>
+          <LabelWrapper>
+            <Label label="Collection Reason" />
+            <StyledAntSelect
+              options={collectionOptions || []}
+              placeholder="Select the Collection Reason"
+              onChange={handleCollectionSelectChange}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+        </CollectionBox>
+      )}
+    </Container>
+  );
+}
+
+const CollectionBox = styled.div`
+  margin-top: 32px;
+`;
+
+const ReturnBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 32px;
+  justify-content: space-between;
+`;
+
+const Container = styled.div``;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const StyledAntSelect = styled(AntSelect)``;
+
+export default UpdateProduct;

package/src/components/order-view/modalsPopup/qclogs/AddDefect.tsx

@@ -0,0 +1,135 @@
+import {
+  AntSelect,
+  Label,
+  Button,
+} from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DefectConfirm } from '../../../fakeData';
+import DefetcDetails from './DefetcDetails';
+import RepackDetails from './RepackDetails';
+import OtherDamage from './OtherDamage';
+
+const AddDefect = () => {
+  const [state, setState] = useState({
+    actionDuring: '',
+    productDamage: '',
+    productRepacked: '',
+    defectDetails: [{}],
+    productChecked: '',
+  });
+
+  const handleChange = (key: any) => (value: any) => {
+    setState(prevState => ({ ...prevState, [key]: value }));
+    console.log(`${key} option selected:`, value);
+  };
+
+  const addDefectDetail = () => {
+    setState(prevState => ({
+      ...prevState,
+      defectDetails: [...prevState.defectDetails, {}],
+    }));
+  };
+
+  return (
+    <>
+      <Container>
+        <Flex>
+          <LabelWrapper>
+            <Label label="Does the packaging have any damage?" />
+            <StyledAntSelect
+              options={DefectConfirm}
+              placeholder="Select"
+              onChange={handleChange('actionDuring')}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+          {state.actionDuring === 'yes' && (
+            <AddButton onClick={addDefectDetail}>Add Defect Detail</AddButton>
+          )}
+        </Flex>
+        {state.actionDuring === 'yes' &&
+          state.defectDetails.map((_, index) => <DefetcDetails key={index} />)}
+      </Container>
+
+      <Container>
+        <Flex>
+          <LabelWrapper>
+            <Label label="Has the product been checked?" />
+            <StyledAntSelect
+              options={DefectConfirm}
+              placeholder="Select"
+              onChange={handleChange('productChecked')}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+
+          {state.productChecked === 'yes' && (
+            <LabelWrapper>
+              <Label label="Does the product have any damage?" />
+              <StyledAntSelect
+                options={DefectConfirm}
+                placeholder="Select"
+                onChange={handleChange('productDamage')}
+                selectWrapperClass="rounded"
+              />
+            </LabelWrapper>
+          )}
+        </Flex>
+
+        {state.productDamage === 'yes' && state.productChecked === 'yes' && (
+          <OtherDamage />
+        )}
+      </Container>
+
+      <Container>
+        <Flex>
+          <LabelWrapper>
+            <Label label="Has the product been repacked?" />
+            <StyledAntSelect
+              options={DefectConfirm}
+              placeholder="Select"
+              onChange={handleChange('productRepacked')}
+              selectWrapperClass="rounded"
+            />
+          </LabelWrapper>
+        </Flex>
+        {state.productRepacked === 'yes' && <RepackDetails />}
+      </Container>
+    </>
+  );
+};
+
+export default AddDefect;
+
+const StyledAntSelect = styled(AntSelect)`
+  width: 20vw;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  flex-direction: column;
+  border: 1px solid #e6e6e6;
+  border-radius: 15px;
+  padding: 10px;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  /* justify-content: space-between; */
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 20vw;
+`;
+
+const AddButton = styled(Button)`
+  margin-top: 10px;
+  border-radius: 30px;
+`;

package/src/components/order-view/modalsPopup/qclogs/DefetcDetails.tsx

@@ -0,0 +1,97 @@
+import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import { TaskType } from '../../../fakeData';
+import styled from 'styled-components';
+
+const DefetcDetails = () => {
+  const handleSelectChange = () => {
+    console.log('Option selected');
+  };
+
+  return (
+    <Container>
+      <Flex>
+        <LabelWrapper>
+          <Label label="What is the defect" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select defect"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+        <LabelWrapper>
+          <Label label="What is the size of the defect?(cm)" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select Category"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+      <Flex>
+        <LabelWrapper>
+          <Label label="Where is the primary defect located?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select located"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+      <Flex>
+        <LabelWrapper>
+          <Label label="Where is the secondary defect located?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select secondary defect"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+        <LabelWrapper>
+          <Label label="Defect Images" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select Category"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+    </Container>
+  );
+};
+
+export default DefetcDetails;
+
+const StyledAntSelect = styled(AntSelect)`
+  width: 20vw;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  padding: 10px;
+  white-space: nowrap;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;

package/src/components/order-view/modalsPopup/qclogs/OtherDamage.tsx

@@ -0,0 +1,125 @@
+import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { TaskType } from '../../../fakeData';
+
+const OtherDamage = () => {
+  const handleSelectChange = () => {
+    console.log('Option selected');
+  };
+
+  return (
+    <Container>
+      <Flex>
+        <LabelWrapper>
+          <Label label="What is the primary defect?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select defect"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+        <LabelWrapper>
+          <Label label="Where is the Primary defect located?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select secondary defect"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+
+      <Flex>
+        <LabelWrapper>
+          <Label label="What is the secondary defect?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select Category"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+
+        <LabelWrapper>
+          <Label label="Where is the secondary defect located?" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select Category"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+      <Flex>
+        <LabelWrapper>
+          <Label
+            label="Where is the tertiary defect located?
+"
+          />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select Category"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+        <LabelWrapper>
+          <Label
+            label="Defect Images
+"
+          />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select secondary defect"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+      <Flex>
+        <LabelWrapper>
+          <Label label="What is the size of the defect?(cm)" />
+          <StyledAntSelect
+            options={TaskType}
+            placeholder="Select located"
+            onChange={handleSelectChange}
+            selectWrapperClass="rounded"
+          />
+        </LabelWrapper>
+      </Flex>
+    </Container>
+  );
+};
+
+export default OtherDamage;
+
+const StyledAntSelect = styled(AntSelect)`
+  width: 20vw;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  padding: 10px;
+  white-space: nowrap;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;