Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-27 00:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(customers): implement customer management page with mock data

Browse Source 
- Created CustomersPage component to display a list of companies with search and pagination features.
- Added mock data for companies, including various statuses and profiles.
- Implemented a service layer to simulate API calls for fetching company data, bookings, documents, and payments.
- Defined TypeScript types for company and related entities to ensure type safety.
- Integrated Mantine components for UI consistency and improved user experience.
This commit is contained in:
Nathnael
2026-06-22 12:32:52 +00:00
parent d66ccc5363
commit c6bc636495
12 changed files with 2124 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/edr-freight-web/backoffice/src/App.tsx
View File

@@ -1,5 +1,6 @@
import {
Boxes,
Building2,
Container,
FileText,
LayoutDashboard,
@@ -27,6 +28,8 @@ import BookingContractPage from "./pages/bookings/BookingContractPage";
import BookingRequestDetailPage from "./pages/bookings/BookingRequestDetailPage";
import BookingRequestsPage from "./pages/bookings/BookingRequestsPage";
import NewBookingPage from "./pages/bookings/NewBookingPage";
import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
import CustomersPage from "./pages/customers/CustomersPage";
import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
import MyProfilePage from "./pages/dashboard/MyProfilePage";
@@ -49,13 +52,13 @@ import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources"
import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
import TrainDetailPage from "./pages/trains/TrainDetailPage";
import CargoTypesPage from "./pages/ruleEngine/CargoTypesPage";
import TrainScheduleV2ListPage from "./pages/trainScheduling/TrainScheduleV2ListPage";
import BatchBoardPage from "./pages/trainScheduling/BatchBoardPage";
import BatchScheduleDetailPage from "./pages/trainScheduling/BatchScheduleDetailPage";
import TrainScheduleTrackPage from "./pages/trainScheduling/TrainScheduleTrackPage";
import TrainScheduleV2DetailPage from "./pages/trainScheduling/TrainScheduleV2DetailPage";
import TrainSchedulingGlobalRulesPage from "./pages/trainScheduling/TrainSchedulingGlobalRulesPage";
import CargoTypesPage from "./pages/ruleEngine/CargoTypesPage";
import TrainScheduleV2ListPage from "./pages/trainScheduling/TrainScheduleV2ListPage";
import BatchBoardPage from "./pages/trainScheduling/BatchBoardPage";
import BatchScheduleDetailPage from "./pages/trainScheduling/BatchScheduleDetailPage";
import TrainScheduleTrackPage from "./pages/trainScheduling/TrainScheduleTrackPage";
import TrainScheduleV2DetailPage from "./pages/trainScheduling/TrainScheduleV2DetailPage";
import TrainSchedulingGlobalRulesPage from "./pages/trainScheduling/TrainSchedulingGlobalRulesPage";
import ArrivalQueuePage from "./pages/warehouses/ArrivalQueuePage";
import DispatchQueuePage from "./pages/warehouses/DispatchQueuePage";
import InventoryInquiryPage from "./pages/warehouses/InventoryInquiryPage";
@@ -87,6 +90,11 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
href: "/dashboard/booking-requests",
icon: <FileText />,
},
{
label: "Customers",
href: "/dashboard/customers",
icon: <Building2 />,
},
{
label: "Payments",
href: "/dashboard/payments",
@@ -338,6 +346,8 @@ const App = () => {
</RequirePermission>
}
/>
<Route path="customers" element={<CustomersPage />} />
<Route path="customers/:id" element={<CustomerDetailPage />} />
<Route path="booking-requests/new" element={<NewBookingPage />} />
<Route path="booking-requests/:id" element={<BookingRequestDetailPage />} />
<Route

32
apps/edr-freight-web/backoffice/src/components/customers/TableCard.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { Box, Card } from "@mantine/core";
import type { ReactNode } from "react";
export interface TableCardProps {
children: ReactNode;
/**
* Minimum width (px) the table is forced to occupy. The Mantine `Table` is
* always `width: 100%`, so without a floor it can never overflow its
* container and the horizontal scroll never engages. Setting a floor lets
* columns keep a sensible width and the card scroll horizontally on narrow
* viewports instead of squishing.
*/
minWidth?: number;
}
/**
* Flush card shell for a `DataTable`: a borderless, padding-less card whose
* single child is a horizontally scrollable region. Pair with the table's
* `containerClassName="border-0 shadow-none bg-transparent"` so every table on
* the customer pages reads identically (same surface, same scroll behaviour).
*/
export function TableCard({ children, minWidth = 860 }: TableCardProps) {
return (
<Card p={0}>
<Box style={{ overflowX: "auto" }} w="100%">
<Box miw={minWidth}>{children}</Box>
</Box>
</Card>
);
}
export default TableCard;

209
apps/edr-freight-web/backoffice/src/components/customers/badges.tsx Normal file
View File

@@ -0,0 +1,209 @@
import { Badge, Group, Tooltip } from "@mantine/core";
import type {
CompanyProfile,
CompanyStatus,
CompanyType,
CustomerBookingStatus,
CustomerPaymentStatus,
ProfileStatus,
ProfileType,
} from "@/types/customer";
import { humanize } from "./format";
const badgeStyle = {
fontSize: "0.7rem",
letterSpacing: "0.04em",
whiteSpace: "nowrap" as const,
};
/** Shared status palette — active/paid green, pending amber, terminal red. */
const STATUS_COLOR: Record<CompanyStatus | ProfileStatus, string> = {
active: "edr-green",
pending: "yellow",
suspended: "orange",
blacklisted: "red",
};
const COMPANY_TYPE_COLOR: Record<CompanyType, string> = {
customer: "edr-green",
freight_forwarder: "blue",
dj_freight_forwarder: "indigo",
transporter: "grape",
};
const PROFILE_TYPE_COLOR: Record<ProfileType, string> = {
importer: "teal",
exporter: "cyan",
freight_forwarder: "blue",
dj_freight_forwarder: "indigo",
transporter: "grape",
};
export function CompanyStatusBadge({ status }: { status: CompanyStatus }) {
return (
<Badge
color={STATUS_COLOR[status] ?? "gray"}
variant="light"
size="sm"
radius="md"
tt="capitalize"
fw={600}
style={badgeStyle}
>
{status}
</Badge>
);
}
export function CompanyTypeBadge({ type }: { type: CompanyType }) {
return (
<Badge
color={COMPANY_TYPE_COLOR[type] ?? "gray"}
variant="light"
size="sm"
radius="md"
fw={600}
style={badgeStyle}
>
{humanize(type)}
</Badge>
);
}
/**
* Profile chips for a company row: one chip per role (Importer / Exporter / …)
* carrying its reference code. Caps at three (a company has at most three
* profiles); any extra collapse into a `+N` chip.
*/
export function ProfileChips({
profiles,
max = 3,
}: {
profiles: CompanyProfile[];
max?: number;
}) {
if (!profiles.length) {
return (
<Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
No profiles
</Badge>
);
}
const shown = profiles.slice(0, max);
const extra = profiles.length - shown.length;
return (
<Group gap={6} wrap="wrap">
{shown.map((profile) => (
<Tooltip
key={profile.id}
label={`${humanize(profile.type)} · ${humanize(profile.status)}`}
withArrow
>
<Badge
color={PROFILE_TYPE_COLOR[profile.type] ?? "gray"}
variant="light"
size="sm"
radius="md"
fw={600}
style={badgeStyle}
>
{humanize(profile.type)} · {profile.reference}
</Badge>
</Tooltip>
))}
{extra > 0 ? (
<Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
+{extra}
</Badge>
) : null}
</Group>
);
}
export function ProfileTypeBadge({ type }: { type: ProfileType }) {
return (
<Badge
color={PROFILE_TYPE_COLOR[type] ?? "gray"}
variant="light"
size="sm"
radius="md"
fw={600}
style={badgeStyle}
>
{humanize(type)}
</Badge>
);
}
export function ProfileStatusBadge({ status }: { status: ProfileStatus }) {
return (
<Badge
color={STATUS_COLOR[status] ?? "gray"}
variant="light"
size="sm"
radius="md"
tt="capitalize"
fw={600}
style={badgeStyle}
>
{status}
</Badge>
);
}
const BOOKING_STATUS_COLOR: Record<CustomerBookingStatus, string> = {
DRAFT: "gray",
SUBMITTED: "yellow",
PENDING_APPROVAL: "yellow",
APPROVED: "cyan",
PAID: "edr-green",
IN_TRANSIT: "blue",
COMPLETED: "indigo",
REJECTED: "red",
CANCELLED: "red",
};
export function BookingStatusBadge({ status }: { status: CustomerBookingStatus }) {
return (
<Badge
color={BOOKING_STATUS_COLOR[status] ?? "gray"}
variant="light"
size="sm"
radius="md"
tt="uppercase"
fw={600}
style={badgeStyle}
>
{humanize(status)}
</Badge>
);
}
const PAYMENT_STATUS_COLOR: Record<CustomerPaymentStatus, string> = {
"action-required": "orange",
processing: "yellow",
success: "edr-green",
failed: "red",
canceled: "gray",
refunded: "grape",
};
export function PaymentStatusBadge({ status }: { status: CustomerPaymentStatus }) {
return (
<Badge
color={PAYMENT_STATUS_COLOR[status] ?? "gray"}
variant="light"
size="sm"
radius="md"
tt="capitalize"
fw={600}
style={badgeStyle}
>
{humanize(status)}
</Badge>
);
}

38
apps/edr-freight-web/backoffice/src/components/customers/format.ts Normal file
View File

@@ -0,0 +1,38 @@
/** Shared formatting helpers for the customer-management pages. */
/** snake_case / SCREAMING_CASE → Title Case. */
export function humanize(value: string): string {
return value
.toLowerCase()
.split(/[_\s]+/)
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(" ");
}
export function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export function formatMoney(amount: number, currency: string): string {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency,
maximumFractionDigits: 0,
}).format(amount);
}
export function formatBytes(bytes: number): string {
if (!bytes) return "0 B";
const units = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
const value = bytes / Math.pow(1024, i);
return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}

11
apps/edr-freight-web/backoffice/src/components/customers/index.ts Normal file
View File

@@ -0,0 +1,11 @@
export {
BookingStatusBadge,
CompanyStatusBadge,
CompanyTypeBadge,
PaymentStatusBadge,
ProfileChips,
ProfileStatusBadge,
ProfileTypeBadge,
} from "./badges";
export { formatBytes, formatDate, formatMoney, humanize } from "./format";
export { TableCard, type TableCardProps } from "./TableCard";

7
apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
View File

@@ -1,4 +1,5 @@
import type { BookingListFilter } from "@/services/bookings.service";
import type { CompanyListFilter } from "@/types/customer";
import type { RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service";
import type { TrainScheduleFilters } from "@/types/trainScheduling";
import type { FleetResourceSlug } from "@/pages/fleet/config/resources";
@@ -26,8 +27,12 @@ export const QUERY_KEYS = {
CUSTOMERS: {
ROOT: ["customers"] as const,
list: () => ["customers", "list"] as const,
list: (filter?: CompanyListFilter) =>
["customers", "list", filter ?? {}] as const,
byId: (id: string) => ["customers", "detail", id] as const,
bookings: (id: string) => ["customers", "detail", id, "bookings"] as const,
documents: (id: string) => ["customers", "detail", id, "documents"] as const,
payments: (id: string) => ["customers", "detail", id, "payments"] as const,
},
BOOKINGS: {

44
apps/edr-freight-web/backoffice/src/hooks/customers/useCustomers.ts Normal file
View File

@@ -0,0 +1,44 @@
import { useQuery } from "@tanstack/react-query";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { customersService } from "@/services/customers.service";
import type { CompanyListFilter } from "@/types/customer";
export function useCustomerList(filter: CompanyListFilter) {
return useQuery({
queryKey: QUERY_KEYS.CUSTOMERS.list(filter),
queryFn: () => customersService.list(filter),
});
}
export function useCustomerDetail(id: string | undefined) {
return useQuery({
queryKey: QUERY_KEYS.CUSTOMERS.byId(id ?? ""),
queryFn: () => customersService.getById(id!),
enabled: Boolean(id),
});
}
export function useCustomerBookings(id: string | undefined) {
return useQuery({
queryKey: QUERY_KEYS.CUSTOMERS.bookings(id ?? ""),
queryFn: () => customersService.bookingsFor(id!),
enabled: Boolean(id),
});
}
export function useCustomerDocuments(id: string | undefined) {
return useQuery({
queryKey: QUERY_KEYS.CUSTOMERS.documents(id ?? ""),
queryFn: () => customersService.documentsFor(id!),
enabled: Boolean(id),
});
}
export function useCustomerPayments(id: string | undefined) {
return useQuery({
queryKey: QUERY_KEYS.CUSTOMERS.payments(id ?? ""),
queryFn: () => customersService.paymentsFor(id!),
enabled: Boolean(id),
});
}

559
apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
View File

@@ -1,12 +1,555 @@
import FeaturePlaceholder from "@/components/FeaturePlaceholder";
import {
ActionIcon,
Box,
Button,
Card,
Center,
Container,
Group,
Loader,
SimpleGrid,
Stack,
Tabs,
Text,
} from "@mantine/core";
import {
ArrowLeft,
ArrowRight,
Banknote,
Download,
FileText,
IdCard,
LayoutGrid,
Package,
} from "lucide-react";
import { useMemo } from "react";
import { useNavigate, useParams } from "react-router-dom";
const CustomerDetailPage = () => {
import {
BookingStatusBadge,
CompanyStatusBadge,
CompanyTypeBadge,
PaymentStatusBadge,
ProfileChips,
ProfileStatusBadge,
ProfileTypeBadge,
TableCard,
formatBytes,
formatDate,
formatMoney,
humanize,
} from "@/components/customers";
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
import {
useCustomerBookings,
useCustomerDetail,
useCustomerDocuments,
useCustomerPayments,
} from "@/hooks/customers/useCustomers";
import type {
CompanyProfile,
CustomerBooking,
CustomerDocument,
CustomerPayment,
} from "@/types/customer";
import { DataTable, type ColumnDef } from "@edr/ui-common";
function InfoField({ label, value }: { label: string; value?: string | null }) {
return (
<FeaturePlaceholder
title="Customer Detail"
description="View customer profile details, active shipments, and internal account notes."
/>
<Stack gap={2}>
<Text
size="xs"
fw={600}
c="edr-muted"
tt="uppercase"
style={{ letterSpacing: "0.04em" }}
>
{label}
</Text>
<Text size="sm" c="edr-text">
{value && value.trim() ? value : "—"}
</Text>
</Stack>
);
};
}
export default CustomerDetailPage;
function tableStatus(query: { isLoading: boolean; isError: boolean }) {
return query.isLoading ? "loading" : query.isError ? "error" : "success";
}
export default function CustomerDetailPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { data: company, isLoading } = useCustomerDetail(id);
const bookingsQuery = useCustomerBookings(id);
const documentsQuery = useCustomerDocuments(id);
const paymentsQuery = useCustomerPayments(id);
const bookings = bookingsQuery.data ?? [];
const documents = documentsQuery.data ?? [];
const payments = paymentsQuery.data ?? [];
const totalPaid = useMemo(
() =>
payments
.filter((p) => p.status === "success")
.reduce((sum, p) => sum + p.amount, 0),
[payments],
);
const paidCurrency = payments[0]?.currency ?? "ETB";
const profileColumns: ColumnDef<CompanyProfile>[] = useMemo(
() => [
{
id: "type",
header: "Role",
cell: ({ row }) => <ProfileTypeBadge type={row.original.type} />,
},
{
id: "reference",
header: "Reference",
cell: ({ row }) => (
<Text size="sm" fw={600} c="edr-text">
{row.original.reference}
</Text>
),
},
{
id: "businessLicense",
header: "Business license",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{row.original.businessLicense || "—"}
</Text>
),
},
{
id: "status",
header: "Status",
cell: ({ row }) => <ProfileStatusBadge status={row.original.status} />,
},
{
id: "createdAt",
header: "Registered",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatDate(row.original.createdAt)}
</Text>
),
},
],
[],
);
const bookingColumns: ColumnDef<CustomerBooking>[] = useMemo(
() => [
{
id: "reference",
header: "Booking",
cell: ({ row }) => (
<Text size="sm" fw={600} c="edr-text">
{row.original.reference}
</Text>
),
},
{
id: "route",
header: "Route",
cell: ({ row }) => {
const b = row.original;
return (
<Group gap={6} wrap="nowrap">
<Text size="sm" c="edr-text">
{b.originLabel}
</Text>
<ArrowRight size={14} className="shrink-0 text-edr-muted" />
<Text size="sm" c="edr-text">
{b.destinationLabel}
</Text>
</Group>
);
},
},
{
id: "type",
header: "Type",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{humanize(row.original.tradeDirection)} ·{" "}
{humanize(row.original.freightType)}
</Text>
),
},
{
id: "status",
header: "Status",
cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
},
{
id: "amount",
header: "Amount",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" fw={600} c="edr-text">
{formatMoney(row.original.totalAmount, row.original.currency)}
</Text>
),
},
{
id: "createdAt",
header: "Created",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatDate(row.original.createdAt)}
</Text>
),
},
],
[],
);
const documentColumns: ColumnDef<CustomerDocument>[] = useMemo(
() => [
{
id: "name",
header: "Document",
cell: ({ row }) => (
<Group gap="sm" wrap="nowrap">
<FileText size={16} className="shrink-0 text-edr-muted" />
<Text size="sm" c="edr-text" truncate>
{row.original.name}
</Text>
</Group>
),
},
{
id: "code",
header: "Type",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{humanize(row.original.code)}
</Text>
),
},
{
id: "size",
header: "Size",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatBytes(row.original.size)}
</Text>
),
},
{
id: "uploadedAt",
header: "Uploaded",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatDate(row.original.uploadedAt)}
</Text>
),
},
{
id: "actions",
header: "",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<ActionIcon
component="a"
href={row.original.url ?? "#"}
variant="subtle"
color="gray"
aria-label="Download"
data-stop-row-click
>
<Download size={16} />
</ActionIcon>
),
},
],
[],
);
const paymentColumns: ColumnDef<CustomerPayment>[] = useMemo(
() => [
{
id: "reference",
header: "Payment",
cell: ({ row }) => (
<Text size="sm" fw={600} c="edr-text">
{row.original.reference}
</Text>
),
},
{
id: "booking",
header: "Booking",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{row.original.bookingReference}
</Text>
),
},
{
id: "method",
header: "Method",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{humanize(row.original.method)}
</Text>
),
},
{
id: "status",
header: "Status",
cell: ({ row }) => <PaymentStatusBadge status={row.original.status} />,
},
{
id: "paidAt",
header: "Paid",
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatDate(row.original.paidAt)}
</Text>
),
},
{
id: "amount",
header: "Amount",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" fw={600} c="edr-text">
{formatMoney(row.original.amount, row.original.currency)}
</Text>
),
},
],
[],
);
if (isLoading) {
return (
<Center mih="60vh">
<Loader />
</Center>
);
}
if (!company) {
return (
<Container size="sm" py="xl">
<Stack align="center" gap="md">
<Text fw={700}>Customer not found</Text>
<Button
variant="default"
leftSection={<ArrowLeft size={16} />}
onClick={() => navigate("/dashboard/customers")}
>
Back to customers
</Button>
</Stack>
</Container>
);
}
return (
<PageContainer>
<PageHeader
breadcrumbs={[
{ label: "Customers", href: "/dashboard/customers" },
{ label: company.name },
]}
backTo="/dashboard/customers"
title={company.name}
subtitle={`TIN ${company.tin}${
company.country ? ` · ${company.country}` : ""
}`}
meta={
<Group gap="xs" wrap="nowrap">
<CompanyTypeBadge type={company.type} />
<CompanyStatusBadge status={company.status} />
</Group>
}
/>
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Tab value="overview" leftSection={<LayoutGrid size={16} />}>
Overview
</Tabs.Tab>
<Tabs.Tab value="bookings" leftSection={<Package size={16} />}>
Bookings
</Tabs.Tab>
<Tabs.Tab value="documents" leftSection={<FileText size={16} />}>
Documents
</Tabs.Tab>
<Tabs.Tab value="payments" leftSection={<Banknote size={16} />}>
Payments
</Tabs.Tab>
</Tabs.List>
{/* OVERVIEW */}
<Tabs.Panel value="overview" pt="lg">
<Stack gap="lg">
<KpiStrip
items={[
{
label: "Profiles",
value: company.companyProfiles.length,
icon: IdCard,
color: "edr-green",
},
{
label: "Bookings",
value: bookings.length,
icon: Package,
color: "blue",
},
{
label: "Total paid",
value: formatMoney(totalPaid, paidCurrency),
icon: Banknote,
color: "edr-green",
},
{
label: "Documents",
value: documents.length,
icon: FileText,
color: "grape",
},
]}
/>
<Card>
<Stack gap="lg">
<Text fw={600} c="edr-text">
Company information
</Text>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
<InfoField label="TIN" value={company.tin} />
<InfoField label="VAT number" value={company.vatNumber} />
<InfoField label="FAN number" value={company.fanNumber} />
<InfoField label="Country" value={company.country} />
<InfoField label="Address" value={company.address} />
<InfoField label="Website" value={company.website} />
<InfoField label="Email" value={company.email} />
<InfoField label="Phone" value={company.phone} />
<Box />
<InfoField
label="Contact person"
value={company.contactPersonName}
/>
<InfoField
label="Contact phone"
value={company.contactPersonPhone}
/>
<Box />
<InfoField
label="General manager"
value={company.generalManagerName}
/>
<InfoField
label="GM email"
value={company.generalManagerEmail}
/>
<InfoField
label="GM phone"
value={company.generalManagerPhone}
/>
</SimpleGrid>
</Stack>
</Card>
<Card>
<Stack gap="md">
<Group justify="space-between">
<Text fw={600} c="edr-text">
Role profiles
</Text>
<ProfileChips profiles={company.companyProfiles} />
</Group>
<Box style={{ overflowX: "auto" }} w="100%">
<Box miw={720}>
<DataTable
columns={profileColumns}
data={company.companyProfiles}
status="success"
emptyMessage="No profiles registered."
containerClassName="border-0 shadow-none bg-transparent"
/>
</Box>
</Box>
</Stack>
</Card>
</Stack>
</Tabs.Panel>
{/* BOOKINGS */}
<Tabs.Panel value="bookings" pt="lg">
<TableCard minWidth={900}>
<DataTable
columns={bookingColumns}
data={bookings}
status={tableStatus(bookingsQuery)}
emptyMessage="No bookings for this customer."
containerClassName="border-0 shadow-none bg-transparent"
error={
bookingsQuery.isError
? {
message: "Failed to load bookings.",
onRetry: () => void bookingsQuery.refetch(),
}
: undefined
}
/>
</TableCard>
</Tabs.Panel>
{/* DOCUMENTS */}
<Tabs.Panel value="documents" pt="lg">
<TableCard minWidth={760}>
<DataTable
columns={documentColumns}
data={documents}
status={tableStatus(documentsQuery)}
emptyMessage="No documents uploaded."
containerClassName="border-0 shadow-none bg-transparent"
error={
documentsQuery.isError
? {
message: "Failed to load documents.",
onRetry: () => void documentsQuery.refetch(),
}
: undefined
}
/>
</TableCard>
</Tabs.Panel>
{/* PAYMENTS */}
<Tabs.Panel value="payments" pt="lg">
<TableCard minWidth={880}>
<DataTable
columns={paymentColumns}
data={payments}
status={tableStatus(paymentsQuery)}
emptyMessage="No payments recorded."
containerClassName="border-0 shadow-none bg-transparent"
error={
paymentsQuery.isError
? {
message: "Failed to load payments.",
onRetry: () => void paymentsQuery.refetch(),
}
: undefined
}
/>
</TableCard>
</Tabs.Panel>
</Tabs>
</PageContainer>
);
}

277
apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx
View File

@@ -1,12 +1,271 @@
import FeaturePlaceholder from "@/components/FeaturePlaceholder";
import {
ActionIcon,
Box,
Card,
Group,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useDebouncedValue } from "@mantine/hooks";
import {
Building2,
CheckCircle2,
Clock,
Mail,
Phone,
RefreshCw,
Search,
ShieldOff,
Users,
X,
} from "lucide-react";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
const CustomersPage = () => {
return (
<FeaturePlaceholder
title="Customers"
description="Review and maintain customer records, service status, and operational context."
/>
);
import {
CompanyStatusBadge,
CompanyTypeBadge,
ProfileChips,
formatDate,
} from "@/components/customers";
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
import { useCustomerList } from "@/hooks/customers/useCustomers";
import { MOCK_COMPANIES } from "@/pages/customers/customers.mock";
import type { Company } from "@/types/customer";
import {
DataTable,
DataTableFooter,
usePagination,
type ColumnDef,
} from "@edr/ui-common";
/** KPI counts are derived from the full fixture set (mock-only). */
const KPIS = {
total: MOCK_COMPANIES.length,
active: MOCK_COMPANIES.filter((c) => c.status === "active").length,
pending: MOCK_COMPANIES.filter((c) => c.status === "pending").length,
blacklisted: MOCK_COMPANIES.filter((c) => c.status === "blacklisted").length,
};
export default CustomersPage;
export default function CustomersPage() {
const navigate = useNavigate();
const { pagination, setPagination } = usePagination({ pageSize: 10 });
const [query, setQuery] = useState("");
const [debouncedQuery] = useDebouncedValue(query, 300);
const filter = useMemo(
() => ({
page: pagination.pageIndex + 1,
pageSize: pagination.pageSize,
search: debouncedQuery,
}),
[pagination.pageIndex, pagination.pageSize, debouncedQuery],
);
const { data, isLoading, isError, refetch, isFetching } =
useCustomerList(filter);
const rows = data?.items ?? [];
const total = data?.total ?? 0;
const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
const columns: ColumnDef<Company>[] = useMemo(
() => [
{
id: "company",
header: "Company",
cell: ({ row }) => {
const c = row.original;
return (
<Group gap="sm" wrap="nowrap">
<Box
className="flex size-9 shrink-0 items-center justify-center rounded-lg"
style={{
background: "var(--mantine-color-edr-green-1)",
color: "var(--mantine-color-edr-green-7)",
}}
>
<Building2 size={18} strokeWidth={1.9} />
</Box>
<div style={{ minWidth: 0 }}>
<Group gap={8} wrap="nowrap">
<Text fw={600} c="edr-text" truncate>
{c.name}
</Text>
<CompanyTypeBadge type={c.type} />
</Group>
<Text size="xs" c="dimmed">
TIN {c.tin}
{c.country ? ` · ${c.country}` : ""}
</Text>
</div>
</Group>
);
},
},
{
id: "profiles",
header: "Profiles",
cell: ({ row }) => <ProfileChips profiles={row.original.companyProfiles} />,
},
{
id: "status",
header: "Status",
cell: ({ row }) => <CompanyStatusBadge status={row.original.status} />,
},
{
id: "contact",
header: "Contact",
cell: ({ row }) => {
const c = row.original;
return (
<Stack gap={2}>
{c.contactPersonName ? (
<Text size="sm" c="edr-text">
{c.contactPersonName}
</Text>
) : null}
{c.phone ? (
<Text
size="xs"
c="dimmed"
className="inline-flex items-center gap-1"
>
<Phone size={12} /> {c.phone}
</Text>
) : null}
{c.email ? (
<Text
size="xs"
c="dimmed"
className="inline-flex items-center gap-1"
truncate
>
<Mail size={12} /> {c.email}
</Text>
) : null}
</Stack>
);
},
},
{
id: "created",
header: "Registered",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{formatDate(row.original.createdAt)}
</Text>
),
},
],
[],
);
return (
<PageContainer>
<PageHeader
title="Customers"
subtitle="Companies registered for freight services, with their role profiles."
action={
<ActionIcon
variant="default"
size="lg"
radius="md"
aria-label="Refresh"
loading={isFetching}
onClick={() => void refetch()}
>
<RefreshCw size={16} />
</ActionIcon>
}
/>
<KpiStrip
items={[
{ label: "Companies", value: KPIS.total, icon: Users, color: "edr-green" },
{ label: "Active", value: KPIS.active, icon: CheckCircle2, color: "edr-green" },
{ label: "Pending", value: KPIS.pending, icon: Clock, color: "yellow" },
{
label: "Blacklisted",
value: KPIS.blacklisted,
icon: ShieldOff,
color: "red",
},
]}
/>
<Card p={0}>
<Stack gap={0}>
<Box px="md" pt="md" pb="sm" w="100%">
<Group justify="space-between" gap="md" wrap="wrap">
<TextInput
placeholder="Search by company, TIN, email or profile reference…"
leftSection={<Search size={18} />}
value={query}
onChange={(e) => setQuery(e.target.value)}
rightSection={
query ? (
<ActionIcon
size="sm"
color="gray"
radius="md"
variant="transparent"
onClick={() => setQuery("")}
>
<X size={16} />
</ActionIcon>
) : null
}
style={{ flex: 1, minWidth: "240px" }}
radius="lg"
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
</Box>
<Box style={{ overflowX: "auto" }} w="100%">
<Box miw={980}>
<DataTable
columns={columns}
data={rows}
status={isLoading ? "loading" : isError ? "error" : "success"}
onRowClick={(row) => navigate(`/dashboard/customers/${row.id}`)}
emptyMessage={
debouncedQuery
? "No companies match your search."
: "No companies yet."
}
error={
isError
? {
message: "Failed to load customers.",
onRetry: () => void refetch(),
}
: undefined
}
pagination={{
pageIndex: pagination.pageIndex,
pageSize: pagination.pageSize,
pageCount,
totalCount: total,
}}
tableOptions={{
state: { pagination },
onPaginationChange: setPagination,
manualPagination: true,
pageCount,
}}
containerClassName="border-0 shadow-none bg-transparent"
footer={DataTableFooter}
/>
</Box>
</Box>
</Stack>
</Card>
</PageContainer>
);
}

722
apps/edr-freight-web/backoffice/src/pages/customers/customers.mock.ts Normal file
View File

@@ -0,0 +1,722 @@
/**
* Mock fixtures for the Customer Management dashboard.
*
* Shapes match the backend `Company` / `CompanyProfile` entities and the
* lightweight related-data types in `@/types/customer`. Swap the service layer
* to live endpoints later — these fixtures (and the helpers below) are the only
* thing that has to change.
*/
import type {
Company,
CustomerBooking,
CustomerDocument,
CustomerPayment,
} from "@/types/customer";
const iso = (date: string) => new Date(date).toISOString();
export const MOCK_COMPANIES: Company[] = [
{
id: "c1",
name: "Abyssinia Import & Export PLC",
type: "customer",
status: "active",
tin: "0012345678",
vatNumber: "VAT-100245",
fanNumber: "FAN-0099",
country: "Ethiopia",
address: "Bole Road, Addis Ababa",
phone: "+251 911 234 567",
email: "ops@abyssinia-ie.com",
contactPersonName: "Selam Bekele",
contactPersonPhone: "+251 911 234 567",
generalManagerName: "Dawit Tadesse",
generalManagerEmail: "dawit@abyssinia-ie.com",
generalManagerPhone: "+251 911 000 111",
website: "https://abyssinia-ie.com",
attributes: null,
companyProfiles: [
{
id: "p1",
companyId: "c1",
type: "importer",
reference: "IMP-00123",
status: "active",
businessLicense: "BL-IMP-4521",
createdAt: iso("2024-02-10"),
updatedAt: iso("2024-02-10"),
},
{
id: "p2",
companyId: "c1",
type: "exporter",
reference: "EXP-00456",
status: "active",
businessLicense: "BL-EXP-7782",
createdAt: iso("2024-03-01"),
updatedAt: iso("2024-03-01"),
},
],
createdAt: iso("2024-02-10"),
updatedAt: iso("2025-01-12"),
},
{
id: "c2",
name: "Horn Logistics Freight Forwarding",
type: "freight_forwarder",
status: "active",
tin: "0023456789",
vatNumber: "VAT-200112",
fanNumber: null,
country: "Ethiopia",
address: "Kality Industrial Zone, Addis Ababa",
phone: "+251 911 765 432",
email: "dispatch@hornlogistics.et",
contactPersonName: "Yonas Girma",
contactPersonPhone: "+251 911 765 432",
generalManagerName: "Hanna Mekonnen",
generalManagerEmail: "hanna@hornlogistics.et",
generalManagerPhone: "+251 911 222 333",
website: "https://hornlogistics.et",
attributes: null,
companyProfiles: [
{
id: "p3",
companyId: "c2",
type: "freight_forwarder",
reference: "FFW-01001",
status: "active",
businessLicense: "BL-FFW-1190",
createdAt: iso("2023-11-05"),
updatedAt: iso("2023-11-05"),
},
{
id: "p4",
companyId: "c2",
type: "importer",
reference: "IMP-00890",
status: "pending",
businessLicense: null,
createdAt: iso("2024-06-18"),
updatedAt: iso("2024-06-18"),
},
{
id: "p5",
companyId: "c2",
type: "exporter",
reference: "EXP-00777",
status: "active",
businessLicense: "BL-EXP-3310",
createdAt: iso("2024-07-01"),
updatedAt: iso("2024-07-01"),
},
],
createdAt: iso("2023-11-05"),
updatedAt: iso("2025-02-20"),
},
{
id: "c3",
name: "Djibouti Gateway Forwarders",
type: "dj_freight_forwarder",
status: "active",
tin: "0034567890",
vatNumber: null,
fanNumber: "FAN-0451",
country: "Djibouti",
address: "Port de Djibouti, Djibouti City",
phone: "+253 21 35 00 00",
email: "ops@djgateway.dj",
contactPersonName: "Amina Idriss",
contactPersonPhone: "+253 77 12 34 56",
generalManagerName: "Omar Farah",
generalManagerEmail: "omar@djgateway.dj",
generalManagerPhone: "+253 77 99 88 77",
website: null,
attributes: null,
companyProfiles: [
{
id: "p6",
companyId: "c3",
type: "dj_freight_forwarder",
reference: "DJF-02050",
status: "active",
businessLicense: "BL-DJF-0088",
createdAt: iso("2023-09-12"),
updatedAt: iso("2023-09-12"),
},
],
createdAt: iso("2023-09-12"),
updatedAt: iso("2024-12-30"),
},
{
id: "c4",
name: "Rift Valley Transporters",
type: "transporter",
status: "suspended",
tin: "0045678901",
vatNumber: "VAT-300988",
fanNumber: null,
country: "Ethiopia",
address: "Adama Ring Road, Adama",
phone: "+251 912 345 678",
email: "fleet@riftvalley-tr.com",
contactPersonName: "Bereket Alemu",
contactPersonPhone: "+251 912 345 678",
generalManagerName: "Meron Haile",
generalManagerEmail: "meron@riftvalley-tr.com",
generalManagerPhone: "+251 912 111 222",
website: null,
attributes: null,
companyProfiles: [
{
id: "p7",
companyId: "c4",
type: "transporter",
reference: "TRP-03012",
status: "suspended",
businessLicense: "BL-TRP-2204",
createdAt: iso("2024-01-22"),
updatedAt: iso("2024-10-04"),
},
],
createdAt: iso("2024-01-22"),
updatedAt: iso("2024-10-04"),
},
{
id: "c5",
name: "Nile Trading & General Import",
type: "customer",
status: "pending",
tin: "0056789012",
vatNumber: null,
fanNumber: null,
country: "Ethiopia",
address: "Merkato, Addis Ababa",
phone: "+251 913 456 789",
email: "info@niletrading.et",
contactPersonName: "Sara Tesfaye",
contactPersonPhone: "+251 913 456 789",
generalManagerName: "Kebede Worku",
generalManagerEmail: "kebede@niletrading.et",
generalManagerPhone: "+251 913 000 999",
website: null,
attributes: null,
companyProfiles: [
{
id: "p8",
companyId: "c5",
type: "importer",
reference: "IMP-01456",
status: "pending",
businessLicense: null,
createdAt: iso("2025-03-14"),
updatedAt: iso("2025-03-14"),
},
],
createdAt: iso("2025-03-14"),
updatedAt: iso("2025-03-14"),
},
{
id: "c6",
name: "Sheba Steel & Cement Importers",
type: "customer",
status: "active",
tin: "0067890123",
vatNumber: "VAT-400777",
fanNumber: "FAN-0512",
country: "Ethiopia",
address: "Lebu, Addis Ababa",
phone: "+251 914 567 890",
email: "procure@shebasteel.com",
contactPersonName: "Tigist Assefa",
contactPersonPhone: "+251 914 567 890",
generalManagerName: "Robel Negash",
generalManagerEmail: "robel@shebasteel.com",
generalManagerPhone: "+251 914 222 444",
website: "https://shebasteel.com",
attributes: null,
companyProfiles: [
{
id: "p9",
companyId: "c6",
type: "importer",
reference: "IMP-01987",
status: "active",
businessLicense: "BL-IMP-9001",
createdAt: iso("2024-05-09"),
updatedAt: iso("2024-05-09"),
},
],
createdAt: iso("2024-05-09"),
updatedAt: iso("2025-04-02"),
},
{
id: "c7",
name: "Awash Agro Export Union",
type: "customer",
status: "active",
tin: "0078901234",
vatNumber: "VAT-500321",
fanNumber: null,
country: "Ethiopia",
address: "Awash, Afar",
phone: "+251 915 678 901",
email: "export@awashagro.coop",
contactPersonName: "Lensa Diriba",
contactPersonPhone: "+251 915 678 901",
generalManagerName: "Gemechu Bayisa",
generalManagerEmail: "gemechu@awashagro.coop",
generalManagerPhone: "+251 915 333 555",
website: null,
attributes: null,
companyProfiles: [
{
id: "p10",
companyId: "c7",
type: "exporter",
reference: "EXP-02233",
status: "active",
businessLicense: "BL-EXP-6650",
createdAt: iso("2024-08-19"),
updatedAt: iso("2024-08-19"),
},
{
id: "p11",
companyId: "c7",
type: "importer",
reference: "IMP-02234",
status: "active",
businessLicense: "BL-IMP-6651",
createdAt: iso("2024-08-19"),
updatedAt: iso("2024-08-19"),
},
],
createdAt: iso("2024-08-19"),
updatedAt: iso("2025-05-10"),
},
{
id: "c8",
name: "Blacklisted Holdings Trading",
type: "customer",
status: "blacklisted",
tin: "0089012345",
vatNumber: null,
fanNumber: null,
country: "Ethiopia",
address: "Unknown",
phone: "+251 916 789 012",
email: "contact@blacklistedholdings.com",
contactPersonName: "N/A",
contactPersonPhone: "+251 916 789 012",
generalManagerName: "N/A",
generalManagerEmail: null,
generalManagerPhone: null,
website: null,
attributes: null,
companyProfiles: [
{
id: "p12",
companyId: "c8",
type: "importer",
reference: "IMP-02999",
status: "blacklisted",
businessLicense: null,
createdAt: iso("2023-12-01"),
updatedAt: iso("2024-02-15"),
},
],
createdAt: iso("2023-12-01"),
updatedAt: iso("2024-02-15"),
},
{
id: "c9",
name: "Lalibela Coffee Exporters",
type: "customer",
status: "active",
tin: "0090123456",
vatNumber: "VAT-600145",
fanNumber: "FAN-0623",
country: "Ethiopia",
address: "Sidama, Hawassa",
phone: "+251 917 890 123",
email: "trade@lalibelacoffee.com",
contactPersonName: "Eyob Tariku",
contactPersonPhone: "+251 917 890 123",
generalManagerName: "Frehiwot Solomon",
generalManagerEmail: "frehiwot@lalibelacoffee.com",
generalManagerPhone: "+251 917 444 666",
website: "https://lalibelacoffee.com",
attributes: null,
companyProfiles: [
{
id: "p13",
companyId: "c9",
type: "exporter",
reference: "EXP-03456",
status: "active",
businessLicense: "BL-EXP-8842",
createdAt: iso("2024-04-03"),
updatedAt: iso("2024-04-03"),
},
],
createdAt: iso("2024-04-03"),
updatedAt: iso("2025-03-22"),
},
{
id: "c10",
name: "Unity Multimodal Forwarders",
type: "freight_forwarder",
status: "active",
tin: "0101234567",
vatNumber: "VAT-700998",
fanNumber: null,
country: "Ethiopia",
address: "Sululta, Oromia",
phone: "+251 918 901 234",
email: "ops@unitymultimodal.com",
contactPersonName: "Helen Tsegaye",
contactPersonPhone: "+251 918 901 234",
generalManagerName: "Nahom Berhanu",
generalManagerEmail: "nahom@unitymultimodal.com",
generalManagerPhone: "+251 918 555 777",
website: null,
attributes: null,
companyProfiles: [
{
id: "p14",
companyId: "c10",
type: "freight_forwarder",
reference: "FFW-04088",
status: "active",
businessLicense: "BL-FFW-5521",
createdAt: iso("2024-09-28"),
updatedAt: iso("2024-09-28"),
},
{
id: "p15",
companyId: "c10",
type: "transporter",
reference: "TRP-04089",
status: "active",
businessLicense: "BL-TRP-5522",
createdAt: iso("2024-09-28"),
updatedAt: iso("2024-09-28"),
},
{
id: "p16",
companyId: "c10",
type: "exporter",
reference: "EXP-04090",
status: "pending",
businessLicense: null,
createdAt: iso("2025-01-15"),
updatedAt: iso("2025-01-15"),
},
],
createdAt: iso("2024-09-28"),
updatedAt: iso("2025-01-15"),
},
];
/** Bookings keyed by companyId. */
const BOOKINGS_BY_COMPANY: Record<string, CustomerBooking[]> = {
c1: [
{
id: "b1",
reference: "BK-2025-0481",
status: "PAID",
tradeDirection: "IMPORT",
freightType: "CONTAINER",
originLabel: "Djibouti Port",
destinationLabel: "Mojo Dry Port",
totalAmount: 482000,
currency: "ETB",
scheduledDate: iso("2025-05-20"),
createdAt: iso("2025-05-02"),
},
{
id: "b2",
reference: "BK-2025-0512",
status: "IN_TRANSIT",
tradeDirection: "IMPORT",
freightType: "CONTAINER",
originLabel: "Djibouti Port",
destinationLabel: "Indode Terminal",
totalAmount: 356500,
currency: "ETB",
scheduledDate: iso("2025-06-01"),
createdAt: iso("2025-05-18"),
},
{
id: "b3",
reference: "BK-2025-0298",
status: "COMPLETED",
tradeDirection: "EXPORT",
freightType: "BULK",
originLabel: "Mojo Dry Port",
destinationLabel: "Djibouti Port",
totalAmount: 198000,
currency: "ETB",
scheduledDate: iso("2025-03-30"),
createdAt: iso("2025-03-12"),
},
],
c2: [
{
id: "b4",
reference: "BK-2025-0633",
status: "PENDING_APPROVAL",
tradeDirection: "IMPORT",
freightType: "CONTAINER",
originLabel: "Djibouti Port",
destinationLabel: "Mojo Dry Port",
totalAmount: 720000,
currency: "ETB",
scheduledDate: null,
createdAt: iso("2025-06-10"),
},
{
id: "b5",
reference: "BK-2025-0588",
status: "PAID",
tradeDirection: "EXPORT",
freightType: "CONTAINER",
originLabel: "Indode Terminal",
destinationLabel: "Djibouti Port",
totalAmount: 540000,
currency: "ETB",
scheduledDate: iso("2025-06-15"),
createdAt: iso("2025-05-29"),
},
],
c6: [
{
id: "b6",
reference: "BK-2025-0701",
status: "SUBMITTED",
tradeDirection: "IMPORT",
freightType: "BULK",
originLabel: "Djibouti Port",
destinationLabel: "Mojo Dry Port",
totalAmount: 1250000,
currency: "ETB",
scheduledDate: null,
createdAt: iso("2025-06-18"),
},
],
c7: [
{
id: "b7",
reference: "BK-2025-0344",
status: "COMPLETED",
tradeDirection: "EXPORT",
freightType: "BULK",
originLabel: "Mojo Dry Port",
destinationLabel: "Djibouti Port",
totalAmount: 2100,
currency: "USD",
scheduledDate: iso("2025-04-05"),
createdAt: iso("2025-03-20"),
},
{
id: "b8",
reference: "BK-2025-0410",
status: "CANCELLED",
tradeDirection: "EXPORT",
freightType: "CONTAINER",
originLabel: "Indode Terminal",
destinationLabel: "Djibouti Port",
totalAmount: 3400,
currency: "USD",
scheduledDate: null,
createdAt: iso("2025-04-22"),
},
],
};
/** Documents keyed by companyId. */
const DOCUMENTS_BY_COMPANY: Record<string, CustomerDocument[]> = {
c1: [
{
id: "d1",
name: "Business License 2025.pdf",
code: "business_license",
mimeType: "application/pdf",
size: 482_113,
uploadedAt: iso("2025-01-12"),
url: "#",
},
{
id: "d2",
name: "VAT Registration.pdf",
code: "vat_certificate",
mimeType: "application/pdf",
size: 211_544,
uploadedAt: iso("2024-02-11"),
url: "#",
},
{
id: "d3",
name: "Trade Agreement - Signed.pdf",
code: "contract",
mimeType: "application/pdf",
size: 1_204_882,
uploadedAt: iso("2025-05-03"),
url: "#",
},
],
c2: [
{
id: "d4",
name: "Forwarding License.pdf",
code: "business_license",
mimeType: "application/pdf",
size: 365_002,
uploadedAt: iso("2023-11-06"),
url: "#",
},
{
id: "d5",
name: "Company Profile.docx",
code: "company_profile",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
size: 92_440,
uploadedAt: iso("2024-07-02"),
url: "#",
},
],
c6: [
{
id: "d6",
name: "Import License.pdf",
code: "business_license",
mimeType: "application/pdf",
size: 410_223,
uploadedAt: iso("2024-05-10"),
url: "#",
},
],
c7: [
{
id: "d7",
name: "Export Permit.pdf",
code: "export_permit",
mimeType: "application/pdf",
size: 298_770,
uploadedAt: iso("2024-08-20"),
url: "#",
},
{
id: "d8",
name: "Quality Certificate.jpg",
code: "quality_certificate",
mimeType: "image/jpeg",
size: 1_882_001,
uploadedAt: iso("2025-03-21"),
url: "#",
},
],
};
/** Payments keyed by companyId. */
const PAYMENTS_BY_COMPANY: Record<string, CustomerPayment[]> = {
c1: [
{
id: "pay1",
reference: "PMT-77120",
bookingReference: "BK-2025-0481",
amount: 482000,
currency: "ETB",
method: "telebirr",
status: "success",
paidAt: iso("2025-05-04"),
createdAt: iso("2025-05-03"),
},
{
id: "pay2",
reference: "PMT-77450",
bookingReference: "BK-2025-0512",
amount: 356500,
currency: "ETB",
method: "cbe-birr",
status: "processing",
paidAt: null,
createdAt: iso("2025-05-19"),
},
{
id: "pay3",
reference: "PMT-71002",
bookingReference: "BK-2025-0298",
amount: 198000,
currency: "ETB",
method: "telebirr",
status: "success",
paidAt: iso("2025-03-14"),
createdAt: iso("2025-03-13"),
},
],
c2: [
{
id: "pay4",
reference: "PMT-78900",
bookingReference: "BK-2025-0588",
amount: 540000,
currency: "ETB",
method: "cbe-birr",
status: "success",
paidAt: iso("2025-05-30"),
createdAt: iso("2025-05-29"),
},
{
id: "pay5",
reference: "PMT-79120",
bookingReference: "BK-2025-0633",
amount: 720000,
currency: "ETB",
method: "card",
status: "action-required",
paidAt: null,
createdAt: iso("2025-06-10"),
},
],
c7: [
{
id: "pay6",
reference: "PMT-70044",
bookingReference: "BK-2025-0344",
amount: 2100,
currency: "USD",
method: "card",
status: "success",
paidAt: iso("2025-03-22"),
createdAt: iso("2025-03-21"),
},
{
id: "pay7",
reference: "PMT-70410",
bookingReference: "BK-2025-0410",
amount: 3400,
currency: "USD",
method: "card",
status: "refunded",
paidAt: iso("2025-04-23"),
createdAt: iso("2025-04-22"),
},
],
};
export function getCompanyById(id: string): Company | undefined {
return MOCK_COMPANIES.find((c) => c.id === id);
}
export function getBookingsFor(companyId: string): CustomerBooking[] {
return BOOKINGS_BY_COMPANY[companyId] ?? [];
}
export function getDocumentsFor(companyId: string): CustomerDocument[] {
return DOCUMENTS_BY_COMPANY[companyId] ?? [];
}
export function getPaymentsFor(companyId: string): CustomerPayment[] {
return PAYMENTS_BY_COMPANY[companyId] ?? [];
}

72
apps/edr-freight-web/backoffice/src/services/customers.service.ts Normal file
View File

@@ -0,0 +1,72 @@
/**
* Customers service.
*
* Currently backed by in-memory mock fixtures (`customers.mock.ts`); the public
* surface mirrors the other services (e.g. `bookings.service.ts`) — async
* methods returning `{ items, total }` / detail objects — so it can be pointed
* at the live `/companies` API later without touching the hooks or pages.
*/
import {
getBookingsFor,
getCompanyById,
getDocumentsFor,
getPaymentsFor,
MOCK_COMPANIES,
} from "@/pages/customers/customers.mock";
import type {
Company,
CompanyListFilter,
CustomerBooking,
CustomerDocument,
CustomerPayment,
PaginatedCompanies,
} from "@/types/customer";
/** Simulate network latency so loading states are visible during UI work. */
const delay = <T>(value: T, ms = 350): Promise<T> =>
new Promise((resolve) => setTimeout(() => resolve(value), ms));
function matchesSearch(company: Company, search: string): boolean {
const q = search.trim().toLowerCase();
if (!q) return true;
return (
company.name.toLowerCase().includes(q) ||
company.tin.toLowerCase().includes(q) ||
company.email?.toLowerCase().includes(q) === true ||
company.companyProfiles.some((p) => p.reference.toLowerCase().includes(q))
);
}
export const customersService = {
list(filter: CompanyListFilter): Promise<PaginatedCompanies> {
const { page, pageSize, search = "", type, status } = filter;
const filtered = MOCK_COMPANIES.filter(
(c) =>
matchesSearch(c, search) &&
(!type || c.type === type) &&
(!status || c.status === status),
);
const start = (page - 1) * pageSize;
const items = filtered.slice(start, start + pageSize);
return delay({ items, total: filtered.length });
},
getById(id: string): Promise<Company | undefined> {
return delay(getCompanyById(id));
},
bookingsFor(companyId: string): Promise<CustomerBooking[]> {
return delay(getBookingsFor(companyId));
},
documentsFor(companyId: string): Promise<CustomerDocument[]> {
return delay(getDocumentsFor(companyId));
},
paymentsFor(companyId: string): Promise<CustomerPayment[]> {
return delay(getPaymentsFor(companyId));
},
};

154
apps/edr-freight-web/backoffice/src/types/customer.ts Normal file
View File

@@ -0,0 +1,154 @@
/**
* Customer-management types for the freight backoffice.
*
* These mirror the backend `Company` / `CompanyProfile` entities
* (apps/edr-freight-api/src/modules/companies/entities) plus a few lightweight
* shapes for the related data shown on the detail page (bookings / documents /
* payments). The UI is currently driven by mock data, but the shapes match the
* API so the data layer can be swapped to live endpoints with no UI changes.
*/
/** Mirrors backend `CompanyType`. */
export type CompanyType =
| "customer"
| "freight_forwarder"
| "dj_freight_forwarder"
| "transporter";
/** Mirrors backend `CompanyStatus`. */
export type CompanyStatus = "active" | "pending" | "suspended" | "blacklisted";
/** Mirrors backend `ProfileType` (the role a company plays). */
export type ProfileType =
| "importer"
| "exporter"
| "freight_forwarder"
| "dj_freight_forwarder"
| "transporter";
/** Mirrors backend `ProfileStatus`. */
export type ProfileStatus = "active" | "pending" | "suspended" | "blacklisted";
/** A single role a company is registered for, with its reference code. */
export interface CompanyProfile {
id: string;
companyId: string;
type: ProfileType;
reference: string;
status: ProfileStatus;
businessLicense?: string | null;
attributes?: Record<string, unknown> | null;
createdAt: string;
updatedAt: string;
}
/** Mirrors backend `Company` (+ its `companyProfiles`). */
export interface Company {
id: string;
name: string;
type: CompanyType;
status: CompanyStatus;
tin: string;
vatNumber?: string | null;
fanNumber?: string | null;
country: string;
address?: string | null;
phone?: string | null;
email?: string | null;
contactPersonName?: string | null;
contactPersonPhone?: string | null;
generalManagerName?: string | null;
generalManagerEmail?: string | null;
generalManagerPhone?: string | null;
website?: string | null;
attributes?: Record<string, unknown> | null;
companyProfiles: CompanyProfile[];
createdAt: string;
updatedAt: string;
}
/** Query parameters for the company list. */
export interface CompanyListFilter {
page: number;
pageSize: number;
search?: string;
type?: CompanyType;
status?: CompanyStatus;
}
/** Standard paginated list envelope (matches the bookings service shape). */
export interface PaginatedCompanies {
items: Company[];
total: number;
}
/* ------------------------------------------------------------------ *
* Related data shown on the customer detail page (mocked for now). *
* ------------------------------------------------------------------ */
export type CustomerBookingStatus =
| "DRAFT"
| "SUBMITTED"
| "PENDING_APPROVAL"
| "APPROVED"
| "PAID"
| "IN_TRANSIT"
| "COMPLETED"
| "REJECTED"
| "CANCELLED";
export interface CustomerBooking {
id: string;
reference: string;
status: CustomerBookingStatus;
tradeDirection: "IMPORT" | "EXPORT";
freightType: "CONTAINER" | "BULK";
originLabel: string;
destinationLabel: string;
totalAmount: number;
currency: "ETB" | "USD";
scheduledDate?: string | null;
createdAt: string;
}
export interface CustomerDocument {
id: string;
name: string;
/** File-upload setting code, e.g. "business_license", "contract". */
code: string;
mimeType: string;
/** Size in bytes. */
size: number;
uploadedAt: string;
url?: string | null;
}
export type CustomerPaymentStatus =
| "action-required"
| "processing"
| "success"
| "failed"
| "canceled"
| "refunded";
export type CustomerPaymentMethod =
| "telebirr"
| "cbe-birr"
| "ebirr"
| "waafi"
| "card"
| "dmoney"
| "cac-bank";
export interface CustomerPayment {
id: string;
reference: string;
/** Booking reference the payment settles. */
bookingReference: string;
amount: number;
currency: "ETB" | "USD";
method: CustomerPaymentMethod;
status: CustomerPaymentStatus;
paidAt?: string | null;
createdAt: string;
}