feat(ui): company detail page with header, tabs, members, owned yachts

2026-04-24 13:59:21 +02:00
parent d6743ed52c
commit 5d76a8a1cf
6 changed files with 842 additions and 0 deletions
--- a/src/components/companies/company-detail-header.tsx
+++ b/src/components/companies/company-detail-header.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Pencil, Archive } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
+import { PermissionGate } from '@/components/shared/permission-gate';
+import { CompanyForm } from '@/components/companies/company-form';
+import { apiFetch } from '@/lib/api/client';
+
+interface CompanyDetailHeaderCompany {
+  id: string;
+  name: string;
+  legalName: string | null;
+  taxId: string | null;
+  registrationNumber: string | null;
+  incorporationCountry: string | null;
+  incorporationDate: string | null;
+  status: string;
+  billingEmail: string | null;
+  notes: string | null;
+  archivedAt: string | null;
+}
+
+interface CompanyDetailHeaderProps {
+  company: CompanyDetailHeaderCompany;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  active: 'bg-green-100 text-green-800 border-green-300',
+  dissolved: 'bg-red-100 text-red-800 border-red-300',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Active',
+  dissolved: 'Dissolved',
+};
+
+export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [archiveOpen, setArchiveOpen] = useState(false);
+
+  const isArchived = !!company.archivedAt;
+  const showLegalName = company.legalName && company.legalName !== company.name;
+
+  const archiveMutation = useMutation({
+    mutationFn: () => apiFetch(`/api/v1/companies/${company.id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['companies', company.id] });
+      queryClient.invalidateQueries({ queryKey: ['companies'] });
+      toast.success('Company archived');
+      setArchiveOpen(false);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      router.push(`/${portSlug}/companies` as any);
+    },
+    onError: (err: Error) => {
+      toast.error(err.message || 'Failed to archive company');
+    },
+  });
+
+  const statusLabel = STATUS_LABELS[company.status] ?? company.status;
+  const statusColor =
+    STATUS_COLORS[company.status] ?? 'bg-muted text-muted-foreground border-muted';
+
+  return (
+    <>
+      <div className="space-y-3">
+        <div className="flex items-start gap-3 flex-wrap">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h1 className="text-2xl font-bold text-foreground truncate">{company.name}</h1>
+              <span
+                className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
+              >
+                {statusLabel}
+              </span>
+              {isArchived && (
+                <Badge variant="secondary" className="text-xs">
+                  Archived
+                </Badge>
+              )}
+            </div>
+
+            <div className="mt-1 space-y-0.5 text-sm text-muted-foreground">
+              {showLegalName && <p>{company.legalName}</p>}
+              {company.taxId && <p>Tax ID: {company.taxId}</p>}
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2">
+            <PermissionGate resource="companies" action="edit">
+              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
+                <Pencil className="mr-1.5 h-3.5 w-3.5" />
+                Edit
+              </Button>
+            </PermissionGate>
+            <PermissionGate resource="companies" action="delete">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setArchiveOpen(true)}
+                disabled={isArchived}
+              >
+                <Archive className="mr-1.5 h-3.5 w-3.5" />
+                Archive
+              </Button>
+            </PermissionGate>
+          </div>
+        </div>
+      </div>
+
+      <CompanyForm
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        company={{
+          id: company.id,
+          name: company.name,
+          legalName: company.legalName,
+          taxId: company.taxId,
+          registrationNumber: company.registrationNumber,
+          incorporationCountry: company.incorporationCountry,
+          incorporationDate: company.incorporationDate,
+          status: company.status,
+          billingEmail: company.billingEmail,
+          notes: company.notes,
+        }}
+      />
+
+      <ArchiveConfirmDialog
+        open={archiveOpen}
+        onOpenChange={setArchiveOpen}
+        entityName={company.name}
+        entityType="Company"
+        isArchived={isArchived}
+        onConfirm={() => {
+          archiveMutation.mutate();
+        }}
+        isLoading={archiveMutation.isPending}
+      />
+    </>
+  );
+}