From 1cf67c45ca3e03e9af83b98cc777604641db4cb4 Mon Sep 17 00:00:00 2001 From: ghost2023 Date: Wed, 20 May 2026 11:35:44 +0300 Subject: [PATCH] feat(portal): Integrate @edr/ui-common components and centralize styling --- apps/edr-freight-web/portal/index.html | 22 +- apps/edr-freight-web/portal/src/main.tsx | 3 +- .../src/pages/customers/CustomersPage.tsx | 395 +++++++----------- .../pages/customers/DeleteCustomerDialog.tsx | 4 +- 4 files changed, 169 insertions(+), 255 deletions(-) diff --git a/apps/edr-freight-web/portal/index.html b/apps/edr-freight-web/portal/index.html index 09f11f8dc..2233dc861 100644 --- a/apps/edr-freight-web/portal/index.html +++ b/apps/edr-freight-web/portal/index.html @@ -1,13 +1,15 @@ - - - - EDR Freight Portal - - -
- - - + + + + + EDR Freight Portal + + + +
+ + + diff --git a/apps/edr-freight-web/portal/src/main.tsx b/apps/edr-freight-web/portal/src/main.tsx index 815b33faa..1437f9d00 100644 --- a/apps/edr-freight-web/portal/src/main.tsx +++ b/apps/edr-freight-web/portal/src/main.tsx @@ -2,8 +2,9 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import "../index.css"; import "@tria-plc/iamui-common/styles.css"; -import "@edr/ui-common/styles.css" +import "@edr/ui-common/styles.css"; import App from "./App"; import { diff --git a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx index 997dc7141..4c2ba6c4e 100644 --- a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx @@ -1,8 +1,6 @@ -import { useMemo, useState } from "react"; +import { useMemo } from "react"; import { Link } from "react-router-dom"; import { - ChevronLeft, - ChevronRight, Clock3, Eye, Filter, @@ -18,63 +16,155 @@ import { import Breadcrumbs from "@/components/Breadcrumbs"; import NewCustomerPage from "./NewCustomerPage"; import DeleteCustomerDialog from "./DeleteCustomerDialog"; -import { customers, type CustomerStatus } from "./customers.mock"; - -const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]; +import { + customers, + type CustomerStatus, + type Customer, +} from "./customers.mock"; +import { + DataTable, + DataTableFooter, + type ColumnDef, + usePagination, + Button, + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, + Input, +} from "@edr/ui-common"; export default function CustomerPage() { - const [pageSize, setPageSize] = useState(10); - const [page, setPage] = useState(1); + const { pagination, setPagination } = usePagination({ pageSize: 10 }); const total = customers.length; - const totalPages = Math.max(1, Math.ceil(total / pageSize)); - const safePage = Math.min(page, totalPages); - const start = (safePage - 1) * pageSize; - const end = Math.min(start + pageSize, total); - const paginated = useMemo( + const pageCount = Math.ceil(total / pagination.pageSize); + const start = pagination.pageIndex * pagination.pageSize; + const end = Math.min(start + pagination.pageSize, total); + + const paginatedData = useMemo( () => customers.slice(start, end), [start, end], ); + const columns: ColumnDef[] = [ + { + accessorKey: "name", + header: "Customer", + cell: ({ row }) => { + const customer = row.original; + return ( +
+
+ +
+
+

{customer.name}

+

ID #{customer.id}

+
+
+ ); + }, + }, + { + accessorKey: "company", + header: "Company", + }, + { + accessorKey: "email", + header: "Email", + cell: ({ row }) => ( + {row.original.email} + ), + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => , + }, + { + id: "actions", + header: () =>
Actions
, + cell: ({ row }) => { + const customer = row.original; + return ( +
+ + + + + + + + + + + +
+ ); + }, + }, + ]; + return ( -
-
+
+
- {/* Header */} -
+

Customers

-

+

Manage and monitor your customer records.

- - +
- +
-
+ - {/* Stats */}
- {/* Customer Table */} -
-
+ +
-

- Customer List -

-

+ Customer List + Recent customer activities and records. -

+
- -
+ + -
- - - - - - - - - - - - - {paginated.map((customer) => ( - - - - - - - - - - - - ))} - -
CustomerCompanyEmailStatusActions
-
-
- -
- -
-

- {customer.name} -

-

- ID #{customer.id} -

-
-
- 		- {customer.company} - - {customer.email} - - - -
- - - - - - - - - - - -
-
-
- - { - setPageSize(size); - setPage(1); - }} - /> -
-
-
- ); -} - -function Pagination({ - page, - pageSize, - total, - totalPages, - start, - end, - onPageChange, - onPageSizeChange, -}: { - page: number; - pageSize: number; - total: number; - totalPages: number; - start: number; - end: number; - onPageChange: (page: number) => void; - onPageSizeChange: (size: number) => void; -}) { - const showingFrom = total === 0 ? 0 : start + 1; - - return ( -
-
- - - - Showing {showingFrom}–{end} of {total} - -
- -
- - - {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => { - const isActive = p === page; - return ( - - ); - })} - - + + { }} + pagination={{ + pageIndex: pagination.pageIndex, + pageSize: pagination.pageSize, + pageCount: pageCount, + totalCount: total, + }} + tableOptions={{ + state: { pagination }, + onPaginationChange: setPagination, + }} + containerClassName="border-b shadow-none" + footer={DataTableFooter} + /> + +
); @@ -325,8 +236,8 @@ function StatCard({ icon: React.ReactNode; }) { return ( -
-
+ +

{title}

{value}

@@ -335,8 +246,8 @@ function StatCard({
{icon}
-
-
+ + ); } diff --git a/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx b/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx index b75effc64..d0d766c0c 100644 --- a/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx +++ b/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx @@ -9,9 +9,9 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from "@/components/ui/dialog"; +} from "@edr/ui-common"; -import { Button } from "@/components/ui/button"; +import { Button } from "@edr/ui-common"; export interface DeleteCustomerDialogProps { customerName: string;