@bjsdistribution/dms-client-return 0.0.3 → 0.0.5

package/src/index.tsx

@@ -1,22 +1,51 @@
-import React, { Suspense } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import React, { Suspense, useEffect } from 'react';
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 // import AddOrder from './components/add-order';
 import OrderView from './components/order-view';
 // import AllReminder from './components/order-view/all-reminder/AllReminder';
 import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
 import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
+import { useTableName } from './components/order-daily-overview/store/store';
+// import ReturnOrderTable from './components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable';
 import ReturnMainTable from './components/order-daily-overview';
 
 function ReturnClient() {
   const LoadingMessage = () => <div>Loading...</div>;
+  const [selectedClient] = useTableName();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!location.pathname.includes('/return')) {
+      localStorage.removeItem('clientName');
+      localStorage.removeItem('clientId');
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (selectedClient) {
+      const selectedClientString = selectedClient.replace(/\s+/g, '-');
+      selectedClient
+      navigate(`/return/${selectedClientString}`);
+    }
+  }, [selectedClient, navigate]);
 
   return (
     <Suspense fallback={<LoadingMessage />}>
       <Routes>
         <Route path="" element={<ReturnMainTable />} />
-        <Route path="return" element={<ReturnTable />} />
-        <Route path="returntable" element={<ReturnAfterTable />} />\
-        <Route path="details" element={<OrderView />} />
+        <Route path="order-return" element={<ReturnAfterTable />} />
+        <Route path="order-return/:id" element={<OrderView />} />
+        <Route path="return/:selectedClient" element={<ReturnTable />} />
+        <Route
+          path=""
+          element={
+            selectedClient ? (
+              <Navigate to={`/return/${selectedClient}`} />
+            ) : (
+              <ReturnMainTable />
+            )
+          }
+        />
       </Routes>
     </Suspense>
   );

package/dist/components/order-view/system-event-logs/system-logs-table/SystemLogsTables.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const SystemLogsTables: () => React.JSX.Element;
-export default SystemLogsTables;

package/dist/components/order-view/system-event-logs/system-logs-table/SytemLogsStyles.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const SystemStyledTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SystemStyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;

package/src/components/order-view/system-event-logs/system-logs-table/SystemLogsTables.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { SystemStyledTable, SystemStyledTableWrapper } from './SytemLogsStyles';
-import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
-import styled from 'styled-components';
-import CustomScrollBar from '../../../../common/scrollbar';
-
-const SystemLogsTables = () => {
-  return (
-    <Container>
-      <CustomScrollBar>
-        <SystemStyledTableWrapper id="tableScrolling">
-          <SystemStyledTable>
-            <thead>
-              <tr>
-                {/* <th className="emailInvoiceNo">Invoice No.</th> */}
-                <th>Date</th>
-                <th>Event</th>
-                <th>Notes</th>
-                <th>Code</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.map((invoice: any) => (
-                <tr key={invoice.id}>
-                  {/* <td>
-                  <ul style={{ listStyleType: 'none', padding: 0 }}>
-                    <li
-                      style={{
-                        color: '#0099ff',
-                        fontWeight: 600,
-                        paddingLeft: 0,
-                      }}
-                    ></li>
-                    <li style={{ color: '#888075' }}>
-                      {invoice?.customer_name}
-                    </li>
-                  </ul>
-                </td> */}
-                  <td>{invoice?.date}</td>
-                  <td>{invoice?.name}</td>
-                  <td>{invoice?.customer_name}</td>
-                  <td>{invoice?.account_number}</td>
-                </tr>
-              ))}
-            </tbody>
-          </SystemStyledTable>
-        </SystemStyledTableWrapper>
-      </CustomScrollBar>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  height: 230px; /* Set height to limit container size */
-  overflow: auto; /* Enable scrolling */
-  scrollbar-width: thin;
-`;
-
-export default SystemLogsTables;

package/src/components/order-view/system-event-logs/system-logs-table/SytemLogsStyles.tsx

@@ -1,239 +0,0 @@
-import styled from 'styled-components';
-
-// Styled components
-export const SystemStyledTableWrapper = styled.div`
-  overflow-x: auto;
-  max-height: calc(100vh - 396px);
-  scrollbar-width: none;
-  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
-  &::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 100px;
-    height: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #777;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #7b61ff;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #7b61ff;
-  }
-`;
-
-export const SystemStyledTable = styled.table`
-  border-spacing: 0 10px;
-  width: 100%;
-  /* min-width: 1600px; */
-  thead {
-    white-space: nowrap;
-    tr {
-      border-radius: 40px;
-      border-spacing: 0 10px;
-      .emailInvoiceCheckbox {
-        padding-right: 0px;
-        width: 0;
-        > div {
-          width: fit-content;
-        }
-      }
-      .emailInvoiceNo {
-        padding-left: 0px;
-      }
-      .emailInvoiceShare {
-        width: 100px;
-      }
-      th {
-        color: #3a3630;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        padding: 11px 15px;
-        background: #f0f2f2;
-        border-right: none;
-        border-left: none;
-        text-align: left;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        border-width: 1px 0;
-        &:first-child {
-          border-radius: 100px 0 0 100px;
-          border-left: 1px solid rgba(0, 0, 0, 0.08);
-        }
-        &:last-child {
-          border-radius: 0px 100px 100px 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-  }
-  tbody {
-    tr {
-      td {
-        color: #3a3630;
-        font-size: 13px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        padding: 12px 15px;
-        background: #fff;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        border-right: none;
-        border-left: none;
-        .actionbox {
-          display: flex;
-          gap: 5px;
-        }
-        .shareIconContainer {
-          display: flex;
-          padding: 2px 12px;
-          align-items: center;
-          gap: 8px;
-          border-radius: 20px;
-          border: 1px solid var(--tonal-brown-101, #e2e0db);
-          background: #fff;
-          list-style-type: none;
-          /* padding-left: 0; */
-          /* fontWeight: 600,
-          paddingLeft: 0, */
-          cursor: pointer;
-        }
-        .statustext {
-          color: #1f9254;
-          font-family: 'Open Sans';
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-        }
-        .downloadcontainer {
-          display: flex;
-          padding: 2px 12px;
-          align-items: center;
-
-          width: 28px;
-          height: 28px;
-          flex-direction: column;
-
-          border-radius: 14px;
-          border: 1px solid #e2e0db;
-          background: #fff;
-        }
-        .statuscontainer {
-          display: flex;
-          padding: 5px 30px 5px 30px;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-          flex: 1 0 0;
-          border-radius: 22px;
-          background: rgba(41, 204, 106, 0.15);
-        }
-      }
-      &:nth-child(even) td {
-        background: #f6fbff;
-      }
-      td:first-child {
-        border-radius: 100px 0 0 100px;
-        border-left: 1px solid rgba(0, 0, 0, 0.08);
-      }
-      td:last-child {
-        border-radius: 0px 100px 100px 0;
-        border-right: 1px solid rgba(0, 0, 0, 0.08);
-      }
-      .flex {
-        display: flex;
-        flex-direction: row;
-        gap: 5px;
-        height: 29px;
-        align-items: center;
-      }
-
-      &.insideTable {
-        td {
-          border-radius: 0;
-          border: none;
-          &:last-child {
-            border-radius: 0;
-            border-right: none;
-          }
-        }
-        table {
-          border-spacing: 0;
-          width: 100%;
-          border-radius: 5px;
-          border: 1px solid rgba(0, 0, 0, 0.08);
-          overflow: hidden;
-          border-top-left-radius: 15px;
-          border-top-right-radius: 15px;
-          thead {
-            tr {
-              border-bottom: none;
-              th {
-                padding: 14px 20px;
-                text-align: left;
-                border-top: 0;
-                border-right: 0;
-                border-left: 0;
-                background: #f8fafc;
-
-                &:first-child {
-                  border-radius: 0;
-                  border-left: 1px solid rgba(0, 0, 0, 0.08);
-                  border-top-left-radius: 15px;
-                }
-                &:last-child {
-                  border-radius: 0;
-                }
-              }
-            }
-          }
-          tbody {
-            tr {
-              td {
-                padding: 14px 20px;
-                text-align: left;
-                border-bottom: 1px solid rgba(58, 54, 48, 0.15);
-                background: #fff;
-                > svg {
-                  transform: scale(1.5);
-                  background-color: #edebe8;
-                  border-radius: 20px;
-                  padding: 5px;
-                }
-                &:last-child {
-                  border-radius: 0;
-                  border-right: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    > svg {
-      transform: scale(1.5);
-      background-color: #edebe8;
-      border-radius: 20px;
-      padding: 5px;
-    }
-
-    .close-icon {
-      transform: scale(1.3);
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-    }
-  }
-`;