@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,221 @@
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import CustomScrollBar from '../../common/scrollbar';
+// import { ChevronDownIcon } from '@bjsdistribution/dms-component-library';
+
+interface DynamicTableProps {
+  columns: any;
+  data: any[];
+}
+
+function DynamicTable({ columns, data }: DynamicTableProps) {
+  const tableColumns = useMemo(() => columns, [columns]);
+  const tableData = useMemo(() => data, [data]);
+  const table = useReactTable({
+    columns: tableColumns,
+    data: tableData,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const rows = table.getRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+  const smallColumns = ['types','sources', 'event', 'code', 'type', 'route', 'category','action'];
+  const mediumColumns = ['date'];
+  const largeColumns = [ 'reference','notes','details','datetime'];
+
+  return (
+    <MainContainer>
+      <Container>
+        <TableWrapper>
+          <CustomScrollBar>
+            <Table>
+              <TableHead>
+                {headerGroups.map(headerGroup => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map(header => {
+                      return (
+                        <TableHeadData
+                          className={`col 
+                              ${
+                                smallColumns.includes(header?.id)
+                                  ? 'sm'
+                                  : mediumColumns.includes(header?.id)
+                                  ? 'md'
+                                  : largeColumns.includes(header?.id)
+                                  ? 'lg'
+                                  : ''
+                              }`}
+                          key={header.id}
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                          {/* <span style={{ marginLeft: '10px' }}>
+                            {header.column.getCanSort() ? (
+                              header.column.getIsSorted() === false ? (
+                                <ChevronUpIcon />
+                              ) : header.column.getIsSorted() === 'asc' ? (
+                                <ChevronUpIcon />
+                              ) : (
+                                <ChevronDownIcon
+                                  style={{ cursor: 'pointer' }}
+                                />
+                              )
+                            ) : (
+                              ''
+                            )}
+                          </span> */}
+                        </TableHeadData>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHead>
+              <TableBody>
+                {rows.length > 0 ? (
+                  rows.map(row => (
+                    <TableRow key={row.id}>
+                      {row.getVisibleCells().map(cell => {
+                        return (
+                          <TableData
+                            className={`col 
+                                ${
+                                  smallColumns.includes(cell?.column.id)
+                                    ? 'sm'
+                                    : mediumColumns.includes(cell?.column.id)
+                                    ? 'md'
+                                    : largeColumns.includes(cell?.column.id)
+                                    ? 'lg'
+                                    : ''
+                                }`}
+                            key={cell.id}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </TableData>
+                        );
+                      })}
+                    </TableRow>
+                  ))
+                ) : (
+                  <>No records found</>
+                )}
+              </TableBody>
+            </Table>
+          </CustomScrollBar>
+        </TableWrapper>
+      </Container>
+    </MainContainer>
+  );
+}
+
+// const ChevronUpIcon = styled(ChevronDownIcon)`
+//   transform: rotate(180deg);
+//   cursor: pointer;
+// `;
+
+const Container = styled.div`
+  height: 30vh;
+  pointer-events: initial;
+  @media (max-width: 1024px) {
+    height: 40vh;
+  }
+`;
+
+const TableWrapper = styled.div`
+  height: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+`;
+
+const TableHeadData = styled.th`
+  padding: 20px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0px;
+`;
+
+const TableData = styled.td`
+  border-spacing: 0px;
+  padding: 20px;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+`;
+
+const TableRow = styled.tr`
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border-bottom: 1px solid rgb(215, 214, 213);
+  font-weight: 300;
+`;
+
+const TableBody = styled.tbody`
+  border-bottom-right-radius: 10px;
+  background: rgb(255, 255, 255);
+  height: 96%;
+  overflow: auto;
+  width: 100%;
+`;
+
+const TableHead = styled.thead`
+  position: sticky;
+  top: 0px;
+  z-index: 1;
+  background: #f8f8f8;
+  white-space: nowrap;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  height: 50%;
+  background: rgb(255, 255, 255);
+  box-shadow: 0px 4px 30px 0px #2e2d740d;
+`;
+
+const MainContainer = styled.div`
+  // width: 40%;
+  .col {
+    flex: 2;
+    // padding: 0 0 0 10px;
+    word-break: break-all;
+    display: flex;
+    color: #3a3630;
+    align-items: center;
+    // width: 160px;
+  }
+
+  .col.sm {
+    flex: 1.5;
+    // width: 115px;
+  }
+  .col.md {
+    flex: 2.5;
+    // width: 175px;
+  }
+  .col.lg {
+    flex: 10;
+    // width: 240px;
+    // padding-right: 10px;
+  }
+`;
+
+export default DynamicTable;

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  CustomCheckBox,
+  TableSkelton,
+} from './order-actions/actions/update-product-type/UpdateProductTypeStyle';
+import styled from 'styled-components';
+
+interface ProductDataProps {
+  products: { id: number; name: string; parts: string; selected: boolean }[];
+  handleCheckboxChange: (productId: number, isChecked: boolean) => void;
+  handleRestore: () => void; // New prop to handle restore action
+  showNoRecords: any;
+}
+
+const ProductData: React.FC<ProductDataProps> = ({
+  products,
+  handleCheckboxChange,
+}) => {
+  const handleInputChange = (productId: number, isChecked: boolean) => {
+    handleCheckboxChange(productId, isChecked);
+  };
+
+  return (
+    <Table>
+      {products.length > 0 ? (
+        <table>
+          <thead>
+            <tr>
+              <th>Select</th>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Parts</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map(product => (
+              <tr key={product.id}>
+                <td>
+                  <CustomCheckBox>
+                    <label className="container">
+                      <input
+                        type="checkbox"
+                        checked={product.selected}
+                        onChange={e =>
+                          handleInputChange(product.id, e.target.checked)
+                        }
+                      />
+                      <span className="checkmark"></span>
+                    </label>
+                  </CustomCheckBox>
+                </td>
+                <td>{product.id}</td>
+                <td>{product.name}</td>
+                <td>{product.parts}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <NoProductsMessage>NO PRODUCTS TO RESTORE</NoProductsMessage>
+      )}
+    </Table>
+  );
+};
+
+const Table = styled(TableSkelton)`
+  overflow: scroll;
+  scrollbar-width: none;
+  height: 35vh;
+  width: 50vw;
+  padding: 5px;
+`;
+
+const NoProductsMessage = styled.div`
+  text-align: center;
+  font-size: 18px;
+  padding: 20px;
+  color: #888;
+`;
+
+export default ProductData;

package/src/components/order-view/details-filters/DetailsFilters.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import Details from './right-side-filters/Details';
+import ActionsMenu from './left-side-filters/ActionsMenu';
+
+const DetailsFilters = () => {
+  return (
+    <Flex>
+      <Details />
+      <ActionsMenu />
+    </Flex>
+  );
+};
+
+const Flex = styled.div`
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
+
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  /* z-index: 9999; */
+  display: flex;
+  padding: 10px;
+  flex-direction: row;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+  margin-top: -30px;
+  width: 97%;
+  margin-left: 28px;
+  justify-content: space-between;
+`;
+export default DetailsFilters;

package/src/components/order-view/details-filters/left-side-filters/ActionsMenu.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import DropDowns from './dropdowns/DropDowns';
+import Actions from './actions/Actions';
+
+const ActionsMenu = () => {
+  return (
+    <Flex>
+      <DropDowns />
+      <Actions />
+    </Flex>
+  );
+};
+const Flex = styled.div`
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  display: flex;
+  height: 34px;
+  padding: 1px;
+  align-items: flex-start;
+  border-radius: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #f0f2f2;
+  cursor: pointer;
+`;
+
+export default ActionsMenu;

package/src/components/order-view/details-filters/left-side-filters/actions/ActionItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyledBulkItem, Typo } from './ActionStyles';
+import styled from 'styled-components';
+
+interface ActionItemProps {
+  name: string;
+  onClick: () => void;
+  icon?: React.ReactNode;
+}
+
+const ActionItem: React.FC<ActionItemProps> = ({ name, onClick, icon }) => {
+  return (
+    <StyledBulkItem onClick={onClick}>
+      <Typo>{name}</Typo>
+      {icon && <IconWrapper>{icon}</IconWrapper>}
+    </StyledBulkItem>
+  );
+};
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  width: 34px;
+
+  & > svg {
+    width: 100%;
+    transform: scale(0.7);
+  }
+`;
+
+export default ActionItem;

package/src/components/order-view/details-filters/left-side-filters/actions/ActionStyles.tsx

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const Flex = styled.div`
+  display: flex;
+  height: 34px;
+  padding: 1px;
+  align-items: flex-start;
+`;
+export const Typo = styled.div`
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  color: #3a3630;
+  font-weight: 400;
+  line-height: 15px;
+  text-transform: uppercase;
+  @media screen and (max-width: 1220px) {
+    font-size: 13px;
+  }
+`;
+
+export const StyledBulkItem = styled.div`
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid #d0d5dd;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+
+  @media screen and (max-width: 1030px) {
+    padding: 6px 4px;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    box-sizing: border-box;
+    top: 54px;
+  }
+  &:last-child {
+    border-right: none;
+  }
+  &.active svg.arrowDown {
+    transform: rotate(180deg);
+  }
+  label {
+    color: #3a3630;
+    text-align: center;
+    font-family: 'Open Sans';
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    cursor: pointer;
+  }
+
+  &.noPadding {
+    padding: 0;
+  }
+`;

package/src/components/order-view/details-filters/left-side-filters/actions/Actions.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useAtom } from 'jotai';
+import ActionItem from './ActionItem';
+import { countReducerAtom } from '../../../store';
+
+const Actions: React.FC = () => {
+  const [, dispatch] = useAtom(countReducerAtom);
+
+  const handleBulkUpdateClick = () => {
+    dispatch({ type: 'bulkUpdate' });
+  };
+
+  return (
+    <>
+      <Flex>
+        <ActionItem name="SEND EMAIL" onClick={handleBulkUpdateClick} />
+        <ActionItem
+          name="SEND SMS"
+          onClick={() => console.log('ROUTING MAP clicked')}
+        />
+        {/* <ActionItem
+          name="TomTom"
+          onClick={() => console.log('TomTom clicked')}
+        //   icon={<TomtomIcon />}
+        />
+        <ActionItem
+          name="Tracker"
+          onClick={() => console.log('Tracker clicked')}
+        />
+        <ActionItem
+          name="Videos"
+          onClick={() => console.log('Videos clicked')}
+        /> */}
+      </Flex>
+    </>
+  );
+};
+
+const Flex = styled.div`
+  display: flex;
+  height: 31px;
+`;
+
+export default Actions;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDownItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface DropDownItemProps {
+  label: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}
+
+const DropDownItem: React.FC<DropDownItemProps> = ({
+  label,
+  icon,
+  onClick,
+}) => {
+  return (
+    <Flex onClick={onClick}>
+      <label>{label}</label>
+      {icon}
+    </Flex>
+  );
+};
+const Flex = styled.div`
+  align-items: center;
+  display: flex;
+  position: relative;
+  label {
+    color: #3a3630;
+    font-size: 14px;
+    line-height: 18px;
+    cursor: pointer;
+  }
+`;
+export default DropDownItem;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDownMenu.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import DropDownItem from './DropDownItem';
+
+interface DropDownMenuProps {
+  options: { label: string; value: string }[];
+  onSelect: (value: string) => void;
+}
+
+const DropDownMenu: React.FC<DropDownMenuProps> = ({ options, onSelect }) => {
+  return (
+    <DropDownContent>
+      {options.map(option => (
+        <DropDownItem
+          key={option.value}
+          label={option.label}
+          icon={''}
+          onClick={() => onSelect(option.value)}
+        />
+      ))}
+    </DropDownContent>
+  );
+};
+
+export default DropDownMenu;
+
+const DropDownContent = styled.div`
+  display: flex;
+  width: 173px;
+  position: absolute;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 7px;
+  padding-left: 28px;
+  top: 46px;
+  background-color: white;
+  border: 1px solid #ddd;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  border-radius: 10px;
+  padding: 8px 8px 10px 16px;
+`;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import PrintDropDown from './PrintDropDown';
+import OptionsDropDown from './OptionsDropDown';
+import MenuDropDown from './MenuDropDown';
+// components
+
+function DropDowns() {
+  return (
+    <>
+      <DashBoardWrapper>
+        <MenuDropDown />
+        <OptionsDropDown />
+        <PrintDropDown />
+      </DashBoardWrapper>
+    </>
+  );
+}
+const DashBoardWrapper = styled.section`
+  padding: 0 5px;
+  display: flex;
+  align-content: center;
+  gap: 10px;
+`;
+
+export default DropDowns;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropdownStyles.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const DropDownContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  border-right: 1px solid #d0d5dd;
+  padding: 4px;
+  @media screen and (max-width: 1220px) {
+    font-size: 12px;
+  }
+`;
+export const DropDownContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  width: 100%;
+`;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/MenuDropDown.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useAtom } from 'jotai';
+import { countReducerAtom } from '../../../store';
+import DropDownItem from './DropDownItem';
+import DropDownMenu from './DropDownMenu';
+import { DropDownContainer } from './DropdownStyles';
+import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
+// import { countReducerAtom } from '../../../store/store';
+
+const Options = [
+  { label: 'Add Order Resource ', value: 'add-order-resources' },
+  { label: 'Split Order ', value: 'split-order' },
+];
+
+const MenuDropDown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [, dispatch] = useAtom(countReducerAtom);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (value: string) => {
+    console.log(`Selected: ${value}`);
+    dispatch({ type: value });
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <DropDownContainer ref={dropdownRef}>
+      <DropDownItem
+        label="BJS MENU"
+        icon={<DropDownLarge />}
+        onClick={handleClick}
+      />
+      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
+    </DropDownContainer>
+  );
+};
+
+export default MenuDropDown;