feat(ui): company detail page with header, tabs, members, owned yachts
This commit is contained in:
Matt Ciaccio
288
src/components/companies/company-members-tab.tsx
Normal file
288
src/components/companies/company-members-tab.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Loader2, MoreHorizontal, Plus, Star, XCircle } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { EmptyState } from '@/components/shared/empty-state';
|
||||
import { PermissionGate } from '@/components/shared/permission-gate';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface MembershipRow {
|
||||
id: string;
|
||||
companyId: string;
|
||||
clientId: string;
|
||||
role: string;
|
||||
roleDetail: string | null;
|
||||
startDate: string;
|
||||
endDate: string | null;
|
||||
isPrimary: boolean;
|
||||
notes: string | null;
|
||||
}
|
||||
|
||||
interface CompanyMembersTabProps {
|
||||
companyId: string;
|
||||
portSlug: string;
|
||||
}
|
||||
|
||||
const ROLE_LABELS: Record<string, string> = {
|
||||
director: 'Director',
|
||||
officer: 'Officer',
|
||||
broker: 'Broker',
|
||||
representative: 'Representative',
|
||||
legal_counsel: 'Legal counsel',
|
||||
employee: 'Employee',
|
||||
shareholder: 'Shareholder',
|
||||
other: 'Other',
|
||||
};
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
if (!value) return '—';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a client's name as a link by fetching the client record.
|
||||
* Memoization is handled via the TanStack Query cache, so repeat renders
|
||||
* for the same clientId are free.
|
||||
*/
|
||||
function ClientName({ clientId, portSlug }: { clientId: string; portSlug: string }) {
|
||||
const { data } = useQuery<{ fullName: string | null }>({
|
||||
queryKey: ['clients', clientId, 'name-only'],
|
||||
queryFn: () =>
|
||||
apiFetch<{ data: { fullName: string | null } }>(`/api/v1/clients/${clientId}`).then(
|
||||
(r) => r.data,
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<Link
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
href={`/${portSlug}/clients/${clientId}` as any}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{data?.fullName ?? `Client ${clientId.slice(0, 8)}`}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompanyMembersTab({ companyId, portSlug }: CompanyMembersTabProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [activeOnly, setActiveOnly] = useState(true);
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
|
||||
const membersKey = ['companies', companyId, 'members', { activeOnly }];
|
||||
|
||||
const { data, isLoading } = useQuery<MembershipRow[]>({
|
||||
queryKey: membersKey,
|
||||
queryFn: () =>
|
||||
apiFetch<{ data: MembershipRow[] }>(
|
||||
`/api/v1/companies/${companyId}/members?activeOnly=${activeOnly ? 'true' : 'false'}`,
|
||||
).then((r) => r.data),
|
||||
});
|
||||
|
||||
const endMutation = useMutation({
|
||||
mutationFn: (membershipId: string) =>
|
||||
apiFetch(`/api/v1/companies/${companyId}/members/${membershipId}`, {
|
||||
method: 'DELETE',
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['companies', companyId, 'members'] });
|
||||
toast.success('Membership ended');
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
toast.error(err.message || 'Failed to end membership');
|
||||
},
|
||||
});
|
||||
|
||||
const setPrimaryMutation = useMutation({
|
||||
mutationFn: (membershipId: string) =>
|
||||
apiFetch(`/api/v1/companies/${companyId}/members/${membershipId}/set-primary`, {
|
||||
method: 'POST',
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['companies', companyId, 'members'] });
|
||||
toast.success('Primary contact updated');
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
toast.error(err.message || 'Failed to set primary');
|
||||
},
|
||||
});
|
||||
|
||||
const members = data ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div className="inline-flex rounded-md border p-0.5 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveOnly(true)}
|
||||
className={`px-3 py-1 rounded-sm transition-colors ${
|
||||
activeOnly ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveOnly(false)}
|
||||
className={`px-3 py-1 rounded-sm transition-colors ${
|
||||
!activeOnly ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PermissionGate resource="memberships" action="manage">
|
||||
<Button size="sm" onClick={() => setAddOpen(true)}>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
Add Member
|
||||
</Button>
|
||||
</PermissionGate>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : members.length === 0 ? (
|
||||
<EmptyState
|
||||
title={activeOnly ? 'No active members' : 'No members yet'}
|
||||
description={
|
||||
activeOnly
|
||||
? 'This company has no active memberships. Switch to "All" to see past members.'
|
||||
: 'Add the first member to this company to get started.'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Client</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Role Detail</TableHead>
|
||||
<TableHead>Start Date</TableHead>
|
||||
<TableHead>End Date</TableHead>
|
||||
<TableHead>Primary</TableHead>
|
||||
<TableHead className="w-[48px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{members.map((m) => {
|
||||
const isActive = !m.endDate;
|
||||
return (
|
||||
<TableRow key={m.id}>
|
||||
<TableCell>
|
||||
<ClientName clientId={m.clientId} portSlug={portSlug} />
|
||||
</TableCell>
|
||||
<TableCell>{ROLE_LABELS[m.role] ?? m.role}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground max-w-[240px] truncate">
|
||||
{m.roleDetail ?? '—'}
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(m.startDate)}</TableCell>
|
||||
<TableCell>
|
||||
{m.endDate ? (
|
||||
formatDate(m.endDate)
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{m.isPrimary ? (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Primary
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<PermissionGate resource="memberships" action="manage">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{isActive && !m.isPrimary && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => setPrimaryMutation.mutate(m.id)}
|
||||
disabled={setPrimaryMutation.isPending}
|
||||
>
|
||||
<Star className="mr-2 h-3.5 w-3.5" />
|
||||
Set Primary
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isActive && (
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={() => endMutation.mutate(m.id)}
|
||||
disabled={endMutation.isPending}
|
||||
>
|
||||
<XCircle className="mr-2 h-3.5 w-3.5" />
|
||||
End Membership
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</PermissionGate>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TODO: Task 6.4 — replace this stub with the real AddMembershipDialog. */}
|
||||
<Dialog open={addOpen} onOpenChange={setAddOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Member</DialogTitle>
|
||||
<DialogDescription>
|
||||
The add-membership dialog is coming in the next step. For now this is a placeholder.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setAddOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user