@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-daily-overview/return-order-table/FilterStore.ts

@@ -0,0 +1,286 @@
+import { atom, useAtom } from 'jotai';
+import { format, startOfWeek, subDays } from 'date-fns';
+
+const date = atom(new Date());
+export const usedate = () => {
+  return useAtom(date);
+};
+
+const selectedStatus = atom<number>(0);
+export function useSelectedStatus() {
+  return useAtom(selectedStatus);
+}
+
+const filterApplied = atom<boolean>(false);
+export function usefilterApplied() {
+  return useAtom(filterApplied);
+}
+
+const today = new Date();
+const currentYear = new Date().getFullYear();
+
+const firstJanStartDate = new Date(currentYear, 0, 1);
+
+export const displayFormattedDate = format(firstJanStartDate, 'MMM dd, yyyy');
+export const formattedDate = format(firstJanStartDate, 'yyyy-MM-dd');
+
+//last sunday
+const getLastSunday = (date: any) => {
+  const lastSunday = subDays(startOfWeek(date, { weekStartsOn: 1 }), 1);
+  return lastSunday;
+};
+
+export const lastSundayDate = getLastSunday(today);
+
+export const formattedLastSundayDate = format(lastSundayDate, 'yyyy-MM-dd');
+
+interface Filter {
+  field: string;
+  op: string;
+  value: any;
+}
+
+interface Pagination {
+  page: number;
+  per_page: number;
+}
+
+interface FilterState {
+  'x-filters': Filter[];
+  'x-pagination': Pagination;
+}
+
+const initialState: FilterState = {
+  'x-filters': [
+    {
+      field: 'date',
+      op: '>=',
+      value: `${format(new Date(formattedDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
+    },
+    {
+      field: 'date',
+      op: '<=',
+      value: `${format(
+        new Date(formattedLastSundayDate),
+        'yyyy-MM-dd'
+      )}T23:59:59+00:00`,
+    },
+    { field: 'debrief_status', op: '=', value: 2 }, // ready for invoice status
+    { field: 'invoice_exceptions.reset_debrief', op: '!=', value: true },
+  ],
+  'x-pagination': { page: 1, per_page: 20 },
+};
+
+const overviewFilterReducer = (
+  state: FilterState,
+  action: any
+): FilterState => {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      if (action.payload === null) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'date'), // remove date filter
+          ],
+        };
+      } else {
+        const dateFilter = [
+          {
+            field: 'date',
+            op: '>=',
+            value: `${format(
+              new Date(formattedDate),
+              'yyyy-MM-dd'
+            )}T00:00:00+00:00`,
+          },
+          {
+            field: 'date',
+            op: '<=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T23:59:59+00:00`,
+          },
+        ];
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'date'),
+            ...dateFilter,
+          ],
+        };
+      }
+
+    case 'SET_CUSTOMER_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'customer_id'),
+          { field: 'customer_id', op: 'in', value: action.payload },
+        ],
+      };
+
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+    default:
+      return state;
+  }
+};
+
+const overviewfiltersStateAtom = atom(initialState);
+
+export const overviewFiltersReducerAtom = atom(
+  get => get(overviewfiltersStateAtom),
+  (get, set, action) =>
+    set(
+      overviewfiltersStateAtom,
+      overviewFilterReducer(get(overviewfiltersStateAtom), action)
+    )
+);
+
+// CLIENT AND SUBACCOUNT FILTERS STATE
+
+const filterReducer = (state: FilterState, action: any): FilterState => {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      if (action.payload === null) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'date'), // remove date filter
+          ],
+        };
+      } else {
+        const dateFilter = [
+          {
+            field: 'date',
+            op: '>=',
+            value: `${format(
+              new Date(formattedDate),
+              'yyyy-MM-dd'
+            )}T00:00:00+00:00`,
+          },
+          {
+            field: 'date',
+            op: '<=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T23:59:59+00:00`,
+          },
+        ];
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'date'),
+            ...dateFilter,
+          ],
+        };
+      }
+    case 'SET_CUSTOMER_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'customer_id'),
+          { field: 'customer_id', op: 'in', value: action.payload },
+        ],
+      };
+
+    case 'SET_ORDER_QUERY':
+      const { isHeavyItemActive, selectedZone } = action.payload;
+      let newFilters = [
+        ...state['x-filters'].filter(f => f.field !== 'order_query'),
+      ];
+
+      let queryValue = [];
+      if (isHeavyItemActive) {
+        queryValue.push({
+          field: 'order_services_detail.heavy_item',
+          op: '=',
+          value: true,
+        });
+      }
+      if (selectedZone && selectedZone.length > 0) {
+        queryValue.push({ field: 'zone_code', op: 'in', value: selectedZone });
+      }
+
+      if (queryValue.length > 0) {
+        newFilters.push({
+          field: 'order_query',
+          op: '=',
+          value: queryValue,
+        });
+      }
+
+      return {
+        ...state,
+        'x-filters': newFilters,
+      };
+
+    // case 'SET_ZONE_FILTER':
+    //   return {
+    //     ...state,
+    //     'x-filters': [
+    //       ...state['x-filters'].filter(f => f.field !== 'zone_codes'),
+    //       { field: 'zone_codes', op: 'in', value: action.payload },
+    //     ],
+    //   };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+
+    case 'CLEAR_ALL_FILTERS':
+      return {
+        ...state,
+        'x-filters': state['x-filters'].filter(f => f.field !== 'order_query'),
+      };
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    default:
+      return state;
+  }
+};
+
+const filtersStateAtom = atom<any>(initialState);
+
+export const filtersReducerAtom = atom(
+  get => get(filtersStateAtom),
+  (get, set, action) =>
+    set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))
+);

package/src/components/order-daily-overview/return-order-table/ReturnTable.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import styled from 'styled-components';
+import RouterHeader from '../header/route-header/RouterHeader';
+import HeaderFilter from '../header-filters/HeaderFilter';
+
+import ReturnFilter from './return-orders-filters/ReturnFilter';
+import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
+
+const ReturnTable = () => {
+  return (
+    <div>
+      <DashBoardWrapper>
+        <RouterHeader />
+        <div className="Tableconatiner">
+          <HeaderFilter />
+          <ReturnFilter />
+          <ReturnOrderTable />
+        </div>
+      </DashBoardWrapper>
+    </div>
+  );
+};
+
+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;
+        }
+      }
+    }
+  }
+`;
+
+export default ReturnTable;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/OrdersFilters.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const OrdersFilters = () => {
+  return <div></div>;
+};
+
+export default OrdersFilters;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnFilter.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyledFIlterELements, StyledFiter, StyledTableFilter, Text } from '../../filters/FilterStyle';
+import RightFilters from './RightFilters';
+
+
+const ReturnFilter = () => {
+ 
+
+
+  return (
+    <>
+      <StyledFiter>
+        <StyledFIlterELements>
+          <Text>Client Return</Text>
+          {/* <em>
+            <IconContainer>
+              <ButtonCon
+                className={DataView ? 'active' : ''}
+                onClick={() => ToggleView()}
+              >
+                <TableIcon />
+              </ButtonCon>
+              <ButtonCon
+                className={!DataView ? 'active' : ''}
+                onClick={() => ToggleView()}
+              >
+                <CardsIcon />
+              </ButtonCon>
+            </IconContainer>
+          </em> */}
+          <StyledTableFilter />
+        </StyledFIlterELements>
+        <RightFilters />
+      </StyledFiter>
+
+      {/* {DataView ? (
+        <MyTable TableData={TableData} data={data} apiLoading={apiLoading}/>
+      ) : (
+        <CardTable />
+      )} */}
+    </>
+  );
+};
+
+// const IconContainer = styled.div`
+//   display: flex;
+//   gap: 10px;
+//   cursor: pointer;
+// `;
+
+// const ButtonCon = styled.div`
+//   border-radius: 6px;
+//   width: 24px;
+//   height: 24px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 2px;
+//   &.active {
+//     background: #ecf1fc;
+//   }
+// `;
+
+export default ReturnFilter;