@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/notes/logs/columns/Details.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import PublicIcon from '../../../../../assets/icons/PublicIcon';
+// import PrivateIcon from '../../../../../assets/icons/PrivateIcon';
+
+function Created(props: any) {
+  const data = props?.row?.original;
+  return (
+    <RowContainer>
+      <Row>
+        <CreatedBy>{data.created_by}</CreatedBy>
+        <Wrapper>
+          <ProductId>{data.created_at}</ProductId>
+          <ProductId>{data.product_id}</ProductId>
+          <PublicIcon />
+          {/* <PrivateIcon /> */}
+        </Wrapper>
+      </Row>
+    </RowContainer>
+  );
+}
+
+const ProductId = styled.span`
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #667085;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const CreatedBy = styled.p`
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  color: '#3A3630';
+`;
+
+const RowContainer = styled.div``;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export default Created;

package/src/components/order-view/notes/logs/columns/NotesColumn.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function NotesColumn(props: any) {
+  const data = props?.row?.original;
+  return (
+    <RowContainer>
+      <Row>
+        <Note>{data.note}</Note>
+      </Row>
+    </RowContainer>
+  );
+}
+
+const Note = styled.p`
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #667085;
+`;
+
+const RowContainer = styled.div``;
+
+const Row = styled.div``;
+
+export default NotesColumn;

package/src/components/order-view/notes/logs/columns/index.tsx

@@ -0,0 +1,2 @@
+export { default as DetailsColumn } from './Details';
+export { default as NotesColumn } from './NotesColumn';

package/src/components/order-view/notes/logs/fakeData.ts

@@ -0,0 +1,50 @@
+export const fakeData = [
+  {
+    product_id: 'GS600',
+    created_at: '15/01/2024 06:22:47',
+    updated_at: '15/01/2024 06:22:47',
+    created_by: 'BJS Validation Via API',
+    note: 'New Product Added as per above client',
+    id: 1,
+  },
+  {
+    product_id: 'GS601',
+    created_at: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    created_by: 'Manpreet - DMS @ Upload Doc',
+    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
+    id: 2,
+  },
+  {
+    product_id: 'GS601',
+    created_at: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    created_by: 'Manpreet - DMS @ Upload Doc',
+    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
+    id: 3,
+  },
+  {
+    product_id: 'GS601',
+    created_at: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    created_by: 'Manpreet - DMS @ Upload Doc',
+    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
+    id: 4,
+  },
+  {
+    product_id: 'GS601',
+    created_at: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    created_by: 'Manpreet - DMS @ Upload Doc',
+    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
+    id: 5,
+  },
+  {
+    product_id: 'GS601',
+    created_at: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    created_by: 'Manpreet - DMS @ Upload Doc',
+    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
+    id: 6,
+  },
+];

package/src/components/order-view/notes/logs/helper.ts

@@ -0,0 +1,14 @@
+import { DetailsColumn, NotesColumn } from './columns';
+
+export const tableColumns = [
+  {
+    header: 'Created',
+    accessorKey: 'id',
+    cell: DetailsColumn,
+  },
+  {
+    header: 'Notes',
+    accessorKey: 'note',
+    cell: NotesColumn,
+  },
+];

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

@@ -0,0 +1,61 @@
+import React from 'react';
+// import { tableColumns } from './helper';
+import styled from 'styled-components';
+import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
+import { NotesStyledTable, NotesStyledTableWrapper } from './NotestableStyles';
+import CustomScrollBar from '../../../../common/scrollbar';
+// import GenericAuditLogsTable from '../../../add-order/order-details/common/generic-table/AuditLogs';
+// import { fakeData } from './fakeData';
+
+function AuditLogs() {
+  return (
+    <Container>
+      <CustomScrollBar>
+        <NotesStyledTableWrapper id="tableScrolling">
+          <NotesStyledTable>
+            <thead>
+              <tr>
+                {/* <th className="emailInvoiceNo">Invoice No.</th> */}
+                <th>Created</th>
+                <th>Notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data?.map((invoice: any) => (
+                <tr key={invoice.id}>
+                  <td>
+                    <ul style={{ listStyleType: 'none', padding: 0 }}>
+                      <li
+                        style={{
+                          color: '#3A3630',
+                          fontWeight: 600,
+                          paddingLeft: 0,
+                        }}
+                      >
+                        {' '}
+                        {invoice?.notes}
+                      </li>
+                      <li style={{ color: '#888075' }}>{invoice?.date}</li>
+                    </ul>
+                  </td>
+                  <td>{invoice?.customer_name}</td>
+                </tr>
+              ))}
+            </tbody>
+          </NotesStyledTable>
+        </NotesStyledTableWrapper>
+        {/* <CustomScrollBar> */}
+        {/* <GenericAuditLogsTable columns={tableColumns} data={fakeData} /> */}
+        {/* </CustomScrollBar> */}
+      </CustomScrollBar>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  height: 230px; /* Set height to limit container size */
+  overflow: auto; /* Enable scrolling */
+  scrollbar-width: thin;
+`;
+
+export default AuditLogs;

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+
+const NewReturnDropdown = () => {
+  const defaultSelectStyle = { width: '100%' };
+  const defaultPopupClassName = 'dropDownStyle';
+  const defaultSelectWrapperClass = 'rounded';
+
+  return (
+    <Container>
+      <Text>New Return Order:</Text>
+      <AntSelect
+        options={[]}
+        placeholder="Select"
+        onChange={() => {}}
+        defaultValue={'Current Return Order' || ''}
+        style={defaultSelectStyle}
+        disabled={false}
+        // onSearch={handleSearch}
+        showSearch
+        popupClassName={defaultPopupClassName}
+        selectWrapperClass={defaultSelectWrapperClass}
+      />
+    </Container>
+  );
+};
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+`;
+const Text = styled.div`
+  color: #000;
+
+  /* body/captions */
+  font-family: 'Lato';
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 123.077% */
+`;
+
+export default NewReturnDropdown;

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

@@ -0,0 +1,70 @@
+import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useFlagRefId } from '../order-actions/store';
+import { useCurrentAction } from '../store';
+import { formatDate } from '../order-actions/utils';
+
+function FlagTemplate({ data }: any) {
+  const [, setSelectedFlag] = useFlagRefId();
+  const [, setCurrentAction] = useCurrentAction();
+  const openModal = () => {
+    setCurrentAction('view-flag');
+  };
+  const handleClick = (Id: number) => {
+    setSelectedFlag(Id);
+    openModal();
+  };
+
+  const titleColor = data.task_status_id === 2 ? '#36A053' : '#3a3630';
+  return (
+    <StyledAlert>
+      <FlagAlert
+        type={data?.task_status_id === 1 ? 'info' : 'success'}
+        title={
+          <>
+            <StyledTitle color={titleColor}>
+              Flag : {data?.is_private ? 'Private' : ''}{' '}
+              <StyledLink onClick={() => handleClick(data.id)}>
+                {data?.id} - {data?.tasks_types?.type}{' '}
+              </StyledLink>{' '}
+              {data.task_status_id === 1 ? 'Unresolved' : 'Resolved on'}{' '}
+              {data.task_status_id == 2 ? (
+                <>
+                  {formatDate(data?.resolved_at)} by {data?.resolved_by}{' '}
+                </>
+              ) : null}
+            </StyledTitle>
+          </>
+        }
+        subtitle=""
+        description={`${data.details}`}
+        showOkButton={false}
+        onClose={() => {}}
+      />
+    </StyledAlert>
+  );
+}
+
+const StyledAlert = styled.div`
+  margin-bottom: 10px;
+`;
+
+const StyledLink = styled.span`
+  color: var(--contextual-blue, #6396e5);
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+const StyledTitle = styled.span<{ color: string }>`
+  color: ${({ color }) => color};
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+export default FlagTemplate;

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

@@ -0,0 +1,108 @@
+import { Alert, FlagAlert } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { useOrderDetails } from '../store';
+import { useOrderNotify, useRouteDetails } from '../order-actions/store';
+
+function OrderTemplate() {
+  const [orderDetails] = useOrderDetails();
+  const [routeData] = useRouteDetails();
+  const [, setOrderCount] = useOrderNotify();
+  const precall = false;
+
+  const crewDetails =
+    routeData?.route_crew_info?.crew1_id +
+    ' ' +
+    routeData?.route_crew_info?.crew1 +
+    ' ' +
+    routeData?.route_crew_info?.crew2_id +
+    ' ' +
+    routeData?.route_crew_info?.crew2 +
+    ' ';
+
+  useEffect(() => {
+    if (precall) {
+      setOrderCount(prevCount => prevCount + 1);
+    }
+  }, [precall]);
+
+  return (
+    <>
+      <StyledAlert>
+        <Alert
+          type="info"
+          title={`Order Status Note : ${orderDetails?.order_status_note}`}
+          description={''}
+          showOkButton={false}
+          onClose={() => {}}
+        />
+      </StyledAlert>
+      {orderDetails.status == 'SD' ? (
+        <StyledAlert>
+          <FlagAlert
+            type="success"
+            title={
+              <TitleText>
+                Completed: {orderDetails?.order_routes?.complete_time}, Signee:{' '}
+                {orderDetails?.order_routes?.signee} Notes :
+                {orderDetails?.order_routes?.complete_notes}
+              </TitleText>
+            }
+            description={
+              <SubtitleText>
+                Route: {routeData?.route_name}
+                {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
+                {routeData?.route_detail?.vehicle_number} | Crew : {crewDetails}
+                | {routeData?.route_date}
+              </SubtitleText>
+            }
+            showOkButton={false}
+            onClose={() => {}}
+          />
+        </StyledAlert>
+      ) : null}
+
+      {precall ? (
+        <StyledAlert>
+          <FlagAlert
+            type="success"
+            title={`Order Pre-Call Slot Time : ${orderDetails?.order_eta_updates?.map(
+              (i: any) => i.slot_start
+            )} - ${orderDetails?.order_eta_updates?.map(
+              (i: any) => i?.slot_end
+            )}`}
+            description={``}
+            showOkButton={false}
+            onClose={() => {}}
+          />
+        </StyledAlert>
+      ) : null}
+    </>
+  );
+}
+
+const StyledAlert = styled.div`
+  margin-bottom: 5px;
+`;
+
+const SubtitleText = styled.div`
+  color: #36a053;
+
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+`;
+
+const TitleText = styled.div`
+  color: var(--primary-dark-brown, #3a3630);
+
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+`;
+
+export default OrderTemplate;

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useCurrentAction } from '../store';
+import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { useReminderRefId } from '../order-actions/store';
+import { formatDate } from '../order-actions/utils';
+
+function ReminderTemplate({ data }: any) {
+  const [, setCurrentAction] = useCurrentAction();
+  const [, setReminderRefId] = useReminderRefId();
+  const openModal = () => {
+    setCurrentAction('view-reminder');
+  };
+
+  //getting particular reminder data
+  const handleClick = (Id: number) => {
+    setReminderRefId(Id);
+    openModal()
+  };
+
+  const type =
+    data?.reminder_status?.name === 'AD'
+      ? 'info'
+      : data?.reminder_status?.name === 'pending'
+      ? 'warn'
+      : 'success';
+
+      const titleColor = 
+      data?.reminder_status?.name === 'SD' 
+        ? '#36A053' 
+        : data?.reminder_status?.name === 'pending' 
+        ? '#FEBA30' 
+        : '#3A3630';
+    
+
+  return (
+    <div>
+      <StyledAlert>
+        <FlagAlert
+          type={type}
+          title={
+            <>
+              <StyledTitle color={titleColor}>
+                Reminder:
+                <StyledLink onClick={() => handleClick(data.id)}>
+                  {' '}
+                  {data?.reference || 'NA'}{' '}
+                </StyledLink>
+                {formatDate(data?.due)}, Assigned to : {' '}
+              </StyledTitle>
+            </>
+          }
+          description={`${data?.details}`}
+          showOkButton={false}
+          onClose={() => {}}
+        />
+      </StyledAlert>
+    </div>
+  );
+}
+const StyledAlert = styled.div`
+  margin-bottom: 10px;
+`;
+
+const StyledTitle = styled.span<{ color: string }>`
+  color: ${({ color }) => color};
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const StyledLink = styled.span`
+  color: var(--contextual-blue, #6396e5);
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+export default ReminderTemplate;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useTabType } from '../store';
+import OrderTemplate from './OrderTemplate';
+import FlagTemplate from './FlagTemplate';
+import ReminderTemplate from './ReminderTemplate';
+
+function Tabs({
+  activeNotifications,
+  closedNotifications,
+  activeReminders,
+  closedReminders,
+}: any) {
+  const [activeTab] = useTabType();
+
+  const initialNotifications = activeNotifications.slice(0, 3);
+  const additionalNotifications = activeNotifications.slice(3);
+
+  const initialReminders = activeReminders.slice(0, 3);
+  const additionalReminders = activeReminders.slice(3);
+
+  return (
+    <>
+      <Content>
+        <Container className="tab-content">
+          {activeTab === 'active' && (
+            <>
+              <OrderTemplate />
+              {initialReminders.map((item: any, index: any) => (
+                <ReminderTemplate key={index} data={item} />
+              ))}
+              {initialNotifications.map((item: any, index: any) => (
+                <FlagTemplate key={index} data={item} />
+              ))}
+              <>
+                {additionalReminders.map((item: any, index: any) => (
+                  <ReminderTemplate
+                    key={index + initialReminders.length}
+                    data={item}
+                  />
+                ))}
+                {additionalNotifications.map((item: any, index: any) => (
+                  <FlagTemplate
+                    key={index + initialNotifications.length}
+                    data={item}
+                  />
+                ))}
+              </>
+            </>
+          )}
+          {activeTab === 'closed' && (
+            <>
+              {closedReminders.map((item: any, index: any) => (
+                <ReminderTemplate key={index} data={item} />
+              ))}
+              {closedNotifications.map((item: any, index: any) => (
+                <FlagTemplate key={index} data={item} />
+              ))}
+            </>
+          )}
+        </Container>
+      </Content>
+    </>
+  );
+}
+const Container = styled.div`
+  gap: 10px;
+  display: grid;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+export default Tabs;