@bjsdistribution/dms-client-return 0.0.83 → 0.0.84

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

@@ -1,135 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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;
-`;

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

@@ -1,118 +0,0 @@
-import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
-import React, { useState } from 'react';
-import { TaskType } from '../../../fakeData';
-import styled from 'styled-components';
-import { Checkbox, Input } from 'antd';
-import RepackProduct from './RepackProduct';
-
-const RepackDetails = () => {
-  const [isAdditionalBoxChecked, setIsAdditionalBoxChecked] = useState(false);
-  const [isRepacked, setIsRepacked] = useState(false);
-  const handleSelectChange = () => {
-    console.log('Option selected');
-  };
-
-  return (
-    <>
-      <Container>
-        <Flex>
-          <Flex>
-            <LabelWrapper>
-              <Label label="Who repacked it?" />
-              <StyledAntSelect
-                options={TaskType}
-                placeholder="Select Category"
-                onChange={handleSelectChange}
-                selectWrapperClass="rounded"
-              />
-            </LabelWrapper>
-          </Flex>
-          <Flex>
-            <LabelWrapper>
-              <Label label="Packaging Type" />
-              <StyledAntSelect
-                options={TaskType}
-                placeholder="Select located"
-                onChange={handleSelectChange}
-                selectWrapperClass="rounded"
-              />
-            </LabelWrapper>
-          </Flex>
-          <Flex>
-            <LabelWrapper>
-              <Label label="Repack Images" />
-              <StyledAntSelect
-                options={TaskType}
-                placeholder="Select secondary defect"
-                onChange={handleSelectChange}
-                selectWrapperClass="rounded"
-              />
-            </LabelWrapper>
-          </Flex>
-        </Flex>
-
-        <Flex>
-          <CheckboxContainer>
-            <Checkbox
-              onChange={e => setIsAdditionalBoxChecked(e.target.checked)}
-            >
-              Has this been repacked into any additional boxes?
-            </Checkbox>
-            {isAdditionalBoxChecked && (
-              <InputWrapper>
-                <Label label="Number of boxes" />
-                <Input type="number" placeholder="Enter number of boxes" />
-              </InputWrapper>
-            )}
-            <Checkbox onChange={e => setIsRepacked(e.target.checked)}>
-              Have any other boxes repacked into this one?
-            </Checkbox>
-            {isRepacked && <RepackProduct />}
-          </CheckboxContainer>
-        </Flex>
-      </Container>
-    </>
-  );
-};
-export default RepackDetails;
-
-const StyledAntSelect = styled(AntSelect)`
-  width: 20vw;
-`;
-const CheckboxContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 10px;
-`;
-
-const InputWrapper = styled.div`
-  display: flex;
-  gap: 5px;
-  margin-left: 24px; // Indent input field to align with the checkbox
-`;
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  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/RepackProduct.tsx

@@ -1,63 +0,0 @@
-import { AntTable } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-
-const RepackProduct = () => {
-  const options = [
-    { value: 'bjsCouriers', label: 'BJS COURIERS' },
-    { value: 'bjsSales', label: 'BJS SALES' },
-    { value: 'test', label: 'TEST' },
-  ];
-
-  const data = [
-    {
-      type: 'Deliver',
-      code: 'WDB10953',
-      scan: 'Delivered',
-      description: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      barcode: '006997824015370739',
-    },
-    {
-      type: 'Deliver',
-      code: 'WDB10953',
-      scan: 'Delivered',
-      description: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      barcode: '006997824015370739',
-    },
-    {
-      type: 'Deliver',
-      code: 'WDB10953',
-      scan: 'Delivered',
-      description: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      barcode: '006997824015370739',
-    },
-  ];
-
-  const columns = [
-    { key: 'checkbox', title: '', isCheckbox: true },
-    { key: 'type', title: 'Type' },
-    { key: 'code', title: 'Code' },
-    { key: 'scan', title: 'Scan' },
-    { key: 'description', title: 'Description' },
-    { key: 'barcode', title: 'Barcode' },
-  ];
-
-  return (
-    <>
-      <GLobalPopupContent>
-        <AntTable
-          columns={columns}
-          data={data}
-          selectOptions={options}
-          onSelectChange={(value: any, record: any) =>
-            console.log('Selected value:', value, 'for record:', record)
-          }
-        />
-      </GLobalPopupContent>
-    </>
-  );
-};
-
-export default RepackProduct;
-
-const GLobalPopupContent = styled.div``;

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

@@ -1,62 +0,0 @@
-import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { TaskType } from '../../../fakeData';
-import AddDefect from './AddDefect';
-
-const QCLogs = () => {
-  const handleSelectChange = () => {
-    console.log('Option selected');
-  };
-
-  return (
-    <Container>
-      <Flex>
-        <LabelWrapper>
-          <Label label="Action During" />
-          <StyledAntSelect
-            options={TaskType}
-            placeholder="Select"
-            onChange={handleSelectChange}
-            selectWrapperClass="rounded"
-          />
-        </LabelWrapper>
-        <LabelWrapper>
-          <Label label="Product Category" />
-          <StyledAntSelect
-            options={TaskType}
-            placeholder="Select Category"
-            onChange={handleSelectChange}
-            selectWrapperClass="rounded"
-          />
-        </LabelWrapper>
-      </Flex>
-      {<AddDefect />}
-    </Container>
-  );
-};
-
-export default QCLogs;
-
-const StyledAntSelect = styled(AntSelect)`
-  width: 20vw;
-`;
-
-const Container = styled.div`
-  display: flex;
-  gap: 15px;
-  flex-direction: column;
-`;
-
-const Flex = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-`;
-
-const LabelWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 20vw;
-`;

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

@@ -1,74 +0,0 @@
-import { AntTable } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-
-const LogsTable = () => {
-  const options = [
-    { value: 'bjsCouriers', label: 'BJS COURIERS' },
-    { value: 'bjsSales', label: 'BJS SALES' },
-    { value: 'test', label: 'TEST' },
-  ];
-
-  const data = [
-    {
-      PackagingType: 'Original Packaging',
-      PackagingStatus: 'No Issues',
-      QCCompleted: 'Delivered',
-      ProductStatus: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      CreatedBy: '006997824015370739',
-      Date: '',
-      Images: '',
-      Actions: '',
-    },
-    {
-      PackagingType: 'Original Packaging',
-      PackagingStatus: 'No Issues',
-      QCCompleted: 'Delivered',
-      ProductStatus: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      CreatedBy: '006997824015370739',
-      Date: '',
-      Images: '',
-      Actions: '',
-    },
-    {
-      PackagingType: 'Original Packaging',
-      PackagingStatus: 'No Issues',
-      QCCompleted: 'Delivered',
-      ProductStatus: '2000 HYBRID/DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      CreatedBy: '006997824015370739',
-      Date: '',
-      Images: '',
-      Actions: '',
-    },
-  ];
-
-  const columns = [
-    { key: 'PackagingType', title: 'Packaging Type', isCheckbox: true },
-    { key: 'PackagingStatus', title: 'Packaging Status' },
-    { key: 'QCCompleted', title: 'QC Completed' },
-    { key: 'ProductStatus', title: 'Product Status' },
-    { key: 'CreatedBy', title: 'Created By' },
-    { key: 'Date', title: 'Date' },
-    { key: 'Images', title: 'Images' },
-    { key: 'Actions', title: 'Actions' },
-  ];
-
-  return (
-    <>
-      <GlobalPopupContent>
-        <AntTable
-          columns={columns}
-          data={data}
-          selectOptions={options}
-          onSelectChange={(value: any, record: any) =>
-            console.log('Selected value:', value, 'for record:', record)
-          }
-        />
-      </GlobalPopupContent>
-    </>
-  );
-};
-
-export default LogsTable;
-
-const GlobalPopupContent = styled.div``;