8699f81879
Replaces every em-dash and en-dash with regular ASCII hyphens across comments, JSX strings, and dev-facing logs. Mostly cosmetic but stops the inconsistent mix that crept in over the last few months (some files used em-dashes in comments, others didn't, some used both). Bundles two small dashboard-layout tweaks that touch a couple of already-modified files: - (dashboard)/layout.tsx main padding goes from p-6 to pt-3 px-6 pb-6 so page content sits closer to the topbar. - Sidebar now receives the ports list it needs for the footer port switcher. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter, useParams } from 'next/navigation';
|
|
|
|
import { DataTable } from '@/components/shared/data-table';
|
|
import { FilterBar } from '@/components/shared/filter-bar';
|
|
import { PageHeader } from '@/components/shared/page-header';
|
|
import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
|
|
import { EmptyState } from '@/components/shared/empty-state';
|
|
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
|
|
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
|
import { BerthCard } from './berth-card';
|
|
import { berthColumns, type BerthRow } from './berth-columns';
|
|
import { berthFilterDefinitions } from './berth-filters';
|
|
import { Anchor } from 'lucide-react';
|
|
|
|
export function BerthList() {
|
|
const router = useRouter();
|
|
const params = useParams<{ portSlug: string }>();
|
|
|
|
const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
|
|
usePaginatedQuery<BerthRow>({
|
|
queryKey: ['berths'],
|
|
endpoint: '/api/v1/berths',
|
|
filterDefinitions: berthFilterDefinitions,
|
|
});
|
|
|
|
useRealtimeInvalidation({
|
|
'berth:updated': [['berths']],
|
|
'berth:statusChanged': [['berths']],
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Berths"
|
|
description="View and manage berth allocations"
|
|
variant="gradient"
|
|
// No "New" button - berths are import-only
|
|
/>
|
|
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<FilterBar
|
|
filters={berthFilterDefinitions}
|
|
values={filters}
|
|
onChange={setFilter}
|
|
onClear={clearFilters}
|
|
/>
|
|
<div className="ml-auto">
|
|
<SavedViewsDropdown
|
|
entityType="berths"
|
|
currentFilters={filters}
|
|
currentSort={sort}
|
|
onApplyView={(savedFilters, _savedSort) => {
|
|
clearFilters();
|
|
Object.entries(savedFilters).forEach(([key, value]) => setFilter(key, value));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTable<BerthRow>
|
|
columns={berthColumns}
|
|
data={data}
|
|
isLoading={isLoading}
|
|
pagination={{
|
|
page: pagination.page,
|
|
pageSize: pagination.pageSize,
|
|
total: pagination.total,
|
|
totalPages: pagination.totalPages,
|
|
}}
|
|
onPaginationChange={(page) => setPage(page)}
|
|
sort={sort}
|
|
onSortChange={setSort}
|
|
getRowId={(row) => row.id}
|
|
onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
|
|
cardRender={(row) => <BerthCard berth={row.original} />}
|
|
emptyState={
|
|
<EmptyState
|
|
icon={Anchor}
|
|
title="No berths found"
|
|
description="Berths are imported from external sources. Adjust your filters to find what you're looking for."
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|