mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-07 23:35:42 +00:00
feat(customers): implement customer management page with mock data
- 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
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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] ?? [];
|
||||
}
|
||||
Reference in New Issue
Block a user