@hed-hog/contact 0.0.329 → 0.0.331

package/hedhog/frontend/app/proposals/_components/proposals-management-page.tsx.ejs

@@ -8,12 +8,19 @@ import {
   SearchBar,
   type SearchBarControl,
 } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   Table,
   TableBody,
@@ -22,6 +29,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
@@ -31,13 +39,23 @@ import {
   FileText,
   LayoutGrid,
   List,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
   RefreshCcw,
+  Send,
+  XCircle,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 import type { PaginatedResult } from '../../person/_components/person-types';
+import { ProposalFormSheet } from './proposal-form-sheet';
+import {
+  openStoredFile,
+  type GenerateProposalDocumentResponse,
+} from './proposal-types';
 
 type ProposalStatus =
   | 'draft'
@@ -56,6 +74,7 @@ type ProposalPerson = {
   trade_name?: string | null;
   email?: string | null;
   phone?: string | null;
+  avatar_id?: number | null;
 };
 
 type ProposalRecord = {
@@ -70,6 +89,9 @@ type ProposalRecord = {
   updated_at?: string | null;
   approved_at?: string | null;
   current_revision_number?: number | null;
+  approval_count?: number | null;
+  required_approvals?: number | null;
+  current_user_has_approved?: boolean | null;
   person?: ProposalPerson | null;
 };
 
@@ -135,6 +157,15 @@ function getStatusBadgeClassName(status?: string | null) {
   }
 }
 
+function getAvatarInitials(name?: string | null) {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();
+  return (
+    (parts[0]?.[0] ?? '') + (parts[parts.length - 1]?.[0] ?? '')
+  ).toUpperCase();
+}
+
 function canSubmitProposal(status?: ProposalStatus | null) {
   return (
     status !== 'approved' &&
@@ -144,6 +175,15 @@ function canSubmitProposal(status?: ProposalStatus | null) {
   );
 }
 
+function canEditProposal(status?: ProposalStatus | null) {
+  return status !== 'approved' && status !== 'contract_generated';
+}
+
+function getPersonAvatarUrl(avatarId?: number | null) {
+  if (!avatarId) return undefined;
+  return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`;
+}
+
 export function ProposalsManagementPage({
   defaultStatus = 'all',
 }: ProposalsManagementPageProps) {
@@ -160,6 +200,11 @@ export function ProposalsManagementPage({
   const [pageSize, setPageSize] = useState(12);
   const [viewMode, setViewMode] = useState<ProposalViewMode>('table');
   const [actionKey, setActionKey] = useState<string | null>(null);
+  const [editSheetOpen, setEditSheetOpen] = useState(false);
+  const [editingProposalId, setEditingProposalId] = useState<number | null>(
+    null
+  );
+  const [editingPersonId, setEditingPersonId] = useState<number | null>(null);
 
   useEffect(() => {
     setStatusFilter(defaultStatus);
@@ -343,6 +388,35 @@ export function ProposalsManagementPage({
     }
   };
 
+  const handleEdit = (proposal: ProposalRecord) => {
+    setEditingProposalId(proposal.id);
+    setEditingPersonId(proposal.person_id);
+    setEditSheetOpen(true);
+  };
+
+  const handleGeneratePdf = async (proposal: ProposalRecord) => {
+    try {
+      setActionKey(`generate-pdf-${proposal.id}`);
+      const response = await request<GenerateProposalDocumentResponse>({
+        url: `/proposal/${proposal.id}/generate-pdf`,
+        method: 'POST',
+        data: {},
+      });
+      const fileId = response.data?.fileId;
+      toast.success(proposalT('toasts.generatePdfSuccess'));
+      if (fileId) openStoredFile(fileId);
+      void refetch();
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : proposalT('toasts.generatePdfError')
+      );
+    } finally {
+      setActionKey(null);
+    }
+  };
+
   const statsCards = [
     {
       key: 'total',
@@ -382,7 +456,7 @@ export function ProposalsManagementPage({
     <Page>
       <PageHeader
         breadcrumbs={[
-          { label: 'Home', href: '/' },
+          { label: crmT('breadcrumbs.home'), href: '/' },
           { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
           { label: pageTitle },
         ]}
@@ -543,28 +617,48 @@ export function ProposalsManagementPage({
                     </TableCell>
 
                     <TableCell>
-                      <div className="space-y-1">
-                        <div className="font-medium text-foreground">
-                          {customerName}
-                        </div>
-                        <div className="text-xs text-muted-foreground">
-                          {proposal.person?.email ||
-                            proposal.person?.phone ||
-                            '—'}
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-8 w-8 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(proposal.person?.avatar_id)}
+                          />
+                          <AvatarFallback className="bg-primary/10 text-[11px] font-semibold text-primary">
+                            {getAvatarInitials(customerName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0 space-y-0.5">
+                          <div className="truncate font-medium text-foreground">
+                            {customerName}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {proposal.person?.email ||
+                              proposal.person?.phone ||
+                              '—'}
+                          </div>
                         </div>
                       </div>
                     </TableCell>
 
                     <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn(
-                          'font-medium',
-                          getStatusBadgeClassName(proposal.status)
-                        )}
-                      >
-                        {getStatusLabel(proposal.status)}
-                      </Badge>
+                      <div className="flex flex-col gap-1">
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'font-medium',
+                            getStatusBadgeClassName(proposal.status)
+                          )}
+                        >
+                          {getStatusLabel(proposal.status)}
+                        </Badge>
+                        {proposal.status === 'pending_approval' ? (
+                          <span className="text-xs text-muted-foreground">
+                            {t('approval.progress', {
+                              count: proposal.approval_count ?? 0,
+                              required: proposal.required_approvals ?? 1,
+                            })}
+                          </span>
+                        ) : null}
+                      </div>
                     </TableCell>
 
                     <TableCell className="text-right font-medium">
@@ -582,45 +676,87 @@ export function ProposalsManagementPage({
                       {formatShortDate(proposal.updated_at, locale)}
                     </TableCell>
 
-                    <TableCell>
-                      <div className="flex flex-wrap justify-end gap-2">
-                        {canSubmitProposal(proposal.status) ? (
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
                           <Button
-                            size="sm"
-                            variant="outline"
-                            disabled={actionKey === `submit-${proposal.id}`}
-                            onClick={() =>
-                              void handleStatusAction(proposal, 'submit')
-                            }
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
                           >
-                            {proposalT('actions.submit')}
+                            {actionKey?.startsWith(`${proposal.id}-`) ||
+                            actionKey === `generate-pdf-${proposal.id}` ||
+                            actionKey === `submit-${proposal.id}` ||
+                            actionKey === `approve-${proposal.id}` ||
+                            actionKey === `reject-${proposal.id}` ? (
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                              <MoreHorizontal className="h-4 w-4" />
+                            )}
                           </Button>
-                        ) : null}
-
-                        {proposal.status === 'pending_approval' ? (
-                          <>
-                            <Button
-                              size="sm"
-                              disabled={actionKey === `approve-${proposal.id}`}
-                              onClick={() =>
-                                void handleStatusAction(proposal, 'approve')
-                              }
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          {canEditProposal(proposal.status) ? (
+                            <DropdownMenuItem
+                              onClick={() => handleEdit(proposal)}
                             >
-                              {proposalT('actions.approve')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="destructive"
-                              disabled={actionKey === `reject-${proposal.id}`}
+                              <Pencil className="mr-2 h-4 w-4" />
+                              {proposalT('actions.edit')}
+                            </DropdownMenuItem>
+                          ) : null}
+
+                          {canSubmitProposal(proposal.status) ? (
+                            <DropdownMenuItem
+                              disabled={actionKey === `submit-${proposal.id}`}
                               onClick={() =>
-                                void handleStatusAction(proposal, 'reject')
+                                void handleStatusAction(proposal, 'submit')
                               }
                             >
-                              {proposalT('actions.reject')}
-                            </Button>
-                          </>
-                        ) : null}
-                      </div>
+                              <Send className="mr-2 h-4 w-4" />
+                              {proposalT('actions.submit')}
+                            </DropdownMenuItem>
+                          ) : null}
+
+                          {proposal.status === 'pending_approval' &&
+                          !proposal.current_user_has_approved ? (
+                            <>
+                              <DropdownMenuItem
+                                disabled={
+                                  actionKey === `approve-${proposal.id}`
+                                }
+                                onClick={() =>
+                                  void handleStatusAction(proposal, 'approve')
+                                }
+                              >
+                                <CheckCircle2 className="mr-2 h-4 w-4" />
+                                {proposalT('actions.approve')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                disabled={actionKey === `reject-${proposal.id}`}
+                                className="text-destructive focus:text-destructive"
+                                onClick={() =>
+                                  void handleStatusAction(proposal, 'reject')
+                                }
+                              >
+                                <XCircle className="mr-2 h-4 w-4" />
+                                {proposalT('actions.reject')}
+                              </DropdownMenuItem>
+                            </>
+                          ) : null}
+
+                          <DropdownMenuSeparator />
+
+                          <DropdownMenuItem
+                            disabled={
+                              actionKey === `generate-pdf-${proposal.id}`
+                            }
+                            onClick={() => void handleGeneratePdf(proposal)}
+                          >
+                            <FileText className="mr-2 h-4 w-4" />
+                            {proposalT('actions.generatePdf')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </TableCell>
                   </TableRow>
                 );
@@ -643,37 +779,49 @@ export function ProposalsManagementPage({
               >
                 <CardContent className="flex h-full flex-col gap-3 p-4">
                   <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0 space-y-1">
-                      <p className="line-clamp-2 text-sm font-semibold text-foreground">
-                        {proposal.title}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {proposal.code || `#${proposal.id}`}
-                        {proposal.current_revision_number
-                          ? ` · v${proposal.current_revision_number}`
-                          : ''}
-                      </p>
+                    <div className="flex min-w-0 items-start gap-2.5">
+                      <Avatar className="mt-0.5 h-8 w-8 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(proposal.person?.avatar_id)}
+                        />
+                        <AvatarFallback className="bg-primary/10 text-[11px] font-semibold text-primary">
+                          {getAvatarInitials(customerName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0 space-y-1">
+                        <p className="line-clamp-2 text-sm font-semibold text-foreground">
+                          {proposal.title}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {customerName} · {proposal.code || `#${proposal.id}`}
+                          {proposal.current_revision_number
+                            ? ` · v${proposal.current_revision_number}`
+                            : ''}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex shrink-0 flex-col items-end gap-1">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'font-medium',
+                          getStatusBadgeClassName(proposal.status)
+                        )}
+                      >
+                        {getStatusLabel(proposal.status)}
+                      </Badge>
+                      {proposal.status === 'pending_approval' ? (
+                        <span className="text-xs text-muted-foreground">
+                          {t('approval.progress', {
+                            count: proposal.approval_count ?? 0,
+                            required: proposal.required_approvals ?? 1,
+                          })}
+                        </span>
+                      ) : null}
                     </div>
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        'shrink-0 font-medium',
-                        getStatusBadgeClassName(proposal.status)
-                      )}
-                    >
-                      {getStatusLabel(proposal.status)}
-                    </Badge>
                   </div>
 
                   <div className="grid gap-2 rounded-md border border-border/70 bg-background px-3 py-2 text-xs">
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-muted-foreground">
-                        {t('columns.customer')}
-                      </span>
-                      <span className="truncate font-medium text-foreground">
-                        {customerName}
-                      </span>
-                    </div>
                     <div className="flex items-center justify-between gap-2">
                       <span className="text-muted-foreground">
                         {t('columns.total')}
@@ -704,43 +852,79 @@ export function ProposalsManagementPage({
                     </div>
                   </div>
 
-                  <div className="mt-auto flex flex-wrap justify-end gap-2">
-                    {canSubmitProposal(proposal.status) ? (
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        disabled={actionKey === `submit-${proposal.id}`}
-                        onClick={() =>
-                          void handleStatusAction(proposal, 'submit')
-                        }
-                      >
-                        {proposalT('actions.submit')}
-                      </Button>
-                    ) : null}
-
-                    {proposal.status === 'pending_approval' ? (
-                      <>
-                        <Button
-                          size="sm"
-                          disabled={actionKey === `approve-${proposal.id}`}
-                          onClick={() =>
-                            void handleStatusAction(proposal, 'approve')
-                          }
-                        >
-                          {proposalT('actions.approve')}
+                  <div className="mt-auto flex justify-end">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="sm" className="gap-1.5">
+                          {actionKey === `generate-pdf-${proposal.id}` ||
+                          actionKey === `submit-${proposal.id}` ||
+                          actionKey === `approve-${proposal.id}` ||
+                          actionKey === `reject-${proposal.id}` ? (
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <MoreHorizontal className="h-3.5 w-3.5" />
+                          )}
+                          {t('columns.actions')}
                         </Button>
-                        <Button
-                          size="sm"
-                          variant="destructive"
-                          disabled={actionKey === `reject-${proposal.id}`}
-                          onClick={() =>
-                            void handleStatusAction(proposal, 'reject')
-                          }
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        {canEditProposal(proposal.status) ? (
+                          <DropdownMenuItem
+                            onClick={() => handleEdit(proposal)}
+                          >
+                            <Pencil className="mr-2 h-4 w-4" />
+                            {proposalT('actions.edit')}
+                          </DropdownMenuItem>
+                        ) : null}
+
+                        {canSubmitProposal(proposal.status) ? (
+                          <DropdownMenuItem
+                            disabled={actionKey === `submit-${proposal.id}`}
+                            onClick={() =>
+                              void handleStatusAction(proposal, 'submit')
+                            }
+                          >
+                            <Send className="mr-2 h-4 w-4" />
+                            {proposalT('actions.submit')}
+                          </DropdownMenuItem>
+                        ) : null}
+
+                        {proposal.status === 'pending_approval' &&
+                        !proposal.current_user_has_approved ? (
+                          <>
+                            <DropdownMenuItem
+                              disabled={actionKey === `approve-${proposal.id}`}
+                              onClick={() =>
+                                void handleStatusAction(proposal, 'approve')
+                              }
+                            >
+                              <CheckCircle2 className="mr-2 h-4 w-4" />
+                              {proposalT('actions.approve')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              disabled={actionKey === `reject-${proposal.id}`}
+                              className="text-destructive focus:text-destructive"
+                              onClick={() =>
+                                void handleStatusAction(proposal, 'reject')
+                              }
+                            >
+                              <XCircle className="mr-2 h-4 w-4" />
+                              {proposalT('actions.reject')}
+                            </DropdownMenuItem>
+                          </>
+                        ) : null}
+
+                        <DropdownMenuSeparator />
+
+                        <DropdownMenuItem
+                          disabled={actionKey === `generate-pdf-${proposal.id}`}
+                          onClick={() => void handleGeneratePdf(proposal)}
                         >
-                          {proposalT('actions.reject')}
-                        </Button>
-                      </>
-                    ) : null}
+                          <FileText className="mr-2 h-4 w-4" />
+                          {proposalT('actions.generatePdf')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </div>
                 </CardContent>
               </Card>
@@ -768,6 +952,25 @@ export function ProposalsManagementPage({
           pageSizeOptions={[12, 24, 36, 48]}
         />
       </div>
+
+      {editSheetOpen && editingPersonId !== null ? (
+        <ProposalFormSheet
+          proposalId={editingProposalId}
+          personId={editingPersonId}
+          open={editSheetOpen}
+          onClose={() => {
+            setEditSheetOpen(false);
+            setEditingProposalId(null);
+            setEditingPersonId(null);
+          }}
+          onSaved={async () => {
+            setEditSheetOpen(false);
+            setEditingProposalId(null);
+            setEditingPersonId(null);
+            void refetch();
+          }}
+        />
+      ) : null}
     </Page>
   );
 }

package/hedhog/frontend/messages/en.json

@@ -501,6 +501,7 @@
   },
   "CrmMenu": {
     "breadcrumbs": {
+      "home": "Home",
       "crm": "CRM"
     },
     "current": "Current",
@@ -819,6 +820,9 @@
       "refresh": "Refresh",
       "viewPending": "View pending",
       "showAll": "Show all"
+    },
+    "approval": {
+      "progress": "{count}/{required} approvals"
     }
   },
   "CrmPipeline": {
@@ -977,7 +981,7 @@
         "submit": "Submit for approval",
         "approve": "Approve",
         "reject": "Reject",
-        "generatePdf": "Generate PDF",
+        "generatePdf": "Export as PDF",
         "openPdf": "Open PDF",
         "delete": "Delete"
       },
@@ -1035,7 +1039,11 @@
         "summary": "Summary",
         "summaryPlaceholder": "Write a short commercial summary for this proposal...",
         "notes": "Internal notes",
-        "notesPlaceholder": "Notes for the team..."
+        "notesPlaceholder": "Notes for the team...",
+        "client": "Client",
+        "clientEntity": "Client",
+        "clientPlaceholder": "Search or select a client...",
+        "editClient": "Edit client"
       },
       "toasts": {
         "createSuccess": "Proposal created successfully",
@@ -1052,6 +1060,9 @@
         "generatePdfError": "Failed to generate proposal PDF",
         "deleteSuccess": "Proposal deleted successfully",
         "deleteError": "Failed to delete proposal"
+      },
+      "approval": {
+        "progress": "{count}/{required} approvals"
       }
     },
     "tooltips": {
@@ -1385,5 +1396,13 @@
         "stateMaxLength": "State must be at most 2 characters"
       }
     }
+  },
+  "components": {
+    "entityPicker": {
+      "collaborators": {
+        "empty": "No collaborators found.",
+        "loading": "Loading collaborators..."
+      }
+    }
   }
 }