style(lists): apply gradient PageHeader to client/interest/yacht/company/berth lists
Pulls the polished gradient hero strip into the five primary list surfaces. PR10b-e (detail polish, dashboard/admin polish, email + notifications polish, mobile responsive sweep) deferred to a follow-up release per spec risk register since visual baseline regen needs hands- on iteration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -17,17 +17,8 @@ export function BerthList() {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const params = useParams<{ portSlug: string }>();
|
const params = useParams<{ portSlug: string }>();
|
||||||
|
|
||||||
const {
|
const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
|
||||||
data,
|
usePaginatedQuery<BerthRow>({
|
||||||
pagination,
|
|
||||||
isLoading,
|
|
||||||
sort,
|
|
||||||
setSort,
|
|
||||||
filters,
|
|
||||||
setFilter,
|
|
||||||
clearFilters,
|
|
||||||
setPage,
|
|
||||||
} = usePaginatedQuery<BerthRow>({
|
|
||||||
queryKey: ['berths'],
|
queryKey: ['berths'],
|
||||||
endpoint: '/api/v1/berths',
|
endpoint: '/api/v1/berths',
|
||||||
filterDefinitions: berthFilterDefinitions,
|
filterDefinitions: berthFilterDefinitions,
|
||||||
@@ -43,6 +34,7 @@ export function BerthList() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="Berths"
|
title="Berths"
|
||||||
description="View and manage berth allocations"
|
description="View and manage berth allocations"
|
||||||
|
variant="gradient"
|
||||||
// No "New" button — berths are import-only
|
// No "New" button — berths are import-only
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@@ -56,8 +56,7 @@ export function ClientList() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const archiveMutation = useMutation({
|
const archiveMutation = useMutation({
|
||||||
mutationFn: (id: string) =>
|
mutationFn: (id: string) => apiFetch(`/api/v1/clients/${id}`, { method: 'DELETE' }),
|
||||||
apiFetch(`/api/v1/clients/${id}`, { method: 'DELETE' }),
|
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['clients'] });
|
queryClient.invalidateQueries({ queryKey: ['clients'] });
|
||||||
setArchiveClient(null);
|
setArchiveClient(null);
|
||||||
@@ -75,6 +74,7 @@ export function ClientList() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="Clients"
|
title="Clients"
|
||||||
description="Manage your client records"
|
description="Manage your client records"
|
||||||
|
variant="gradient"
|
||||||
actions={
|
actions={
|
||||||
<PermissionGate resource="clients" action="create">
|
<PermissionGate resource="clients" action="create">
|
||||||
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||||||
@@ -128,10 +128,7 @@ export function ClientList() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<ClientForm
|
<ClientForm open={createOpen} onOpenChange={setCreateOpen} />
|
||||||
open={createOpen}
|
|
||||||
onOpenChange={setCreateOpen}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{editClient && (
|
{editClient && (
|
||||||
<ClientForm
|
<ClientForm
|
||||||
|
|||||||
@@ -73,6 +73,7 @@ export function CompanyList() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="Companies"
|
title="Companies"
|
||||||
description="Manage company records"
|
description="Manage company records"
|
||||||
|
variant="gradient"
|
||||||
actions={
|
actions={
|
||||||
<PermissionGate resource="companies" action="create">
|
<PermissionGate resource="companies" action="create">
|
||||||
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||||||
|
|||||||
@@ -61,8 +61,7 @@ export function InterestList() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const archiveMutation = useMutation({
|
const archiveMutation = useMutation({
|
||||||
mutationFn: (id: string) =>
|
mutationFn: (id: string) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
|
||||||
apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
|
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['interests'] });
|
queryClient.invalidateQueries({ queryKey: ['interests'] });
|
||||||
setArchiveInterest(null);
|
setArchiveInterest(null);
|
||||||
@@ -80,6 +79,7 @@ export function InterestList() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="Interests"
|
title="Interests"
|
||||||
description="Track prospective berth interest and pipeline"
|
description="Track prospective berth interest and pipeline"
|
||||||
|
variant="gradient"
|
||||||
actions={
|
actions={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center border rounded-md overflow-hidden">
|
<div className="flex items-center border rounded-md overflow-hidden">
|
||||||
@@ -155,10 +155,7 @@ export function InterestList() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<InterestForm
|
<InterestForm open={createOpen} onOpenChange={setCreateOpen} />
|
||||||
open={createOpen}
|
|
||||||
onOpenChange={setCreateOpen}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{editInterest && (
|
{editInterest && (
|
||||||
<InterestForm
|
<InterestForm
|
||||||
@@ -174,9 +171,7 @@ export function InterestList() {
|
|||||||
entityName={archiveInterest?.clientName ?? 'Interest'}
|
entityName={archiveInterest?.clientName ?? 'Interest'}
|
||||||
entityType="Interest"
|
entityType="Interest"
|
||||||
isArchived={false}
|
isArchived={false}
|
||||||
onConfirm={() =>
|
onConfirm={() => archiveInterest && archiveMutation.mutate(archiveInterest.id)}
|
||||||
archiveInterest && archiveMutation.mutate(archiveInterest.id)
|
|
||||||
}
|
|
||||||
isLoading={archiveMutation.isPending}
|
isLoading={archiveMutation.isPending}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -74,6 +74,7 @@ export function YachtList() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="Yachts"
|
title="Yachts"
|
||||||
description="Manage yacht records"
|
description="Manage yacht records"
|
||||||
|
variant="gradient"
|
||||||
actions={
|
actions={
|
||||||
<PermissionGate resource="yachts" action="create">
|
<PermissionGate resource="yachts" action="create">
|
||||||
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||||||
|
|||||||
Reference in New Issue
Block a user