@hed-hog/contact 0.0.301 → 0.0.303

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

@@ -0,0 +1,773 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+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,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  CheckCircle2,
+  Clock3,
+  FileCheck2,
+  FileText,
+  LayoutGrid,
+  List,
+  RefreshCcw,
+} 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';
+
+type ProposalStatus =
+  | 'draft'
+  | 'pending_approval'
+  | 'approved'
+  | 'rejected'
+  | 'cancelled'
+  | 'expired'
+  | 'contract_generated';
+
+type ProposalStatusFilter = 'all' | ProposalStatus;
+
+type ProposalPerson = {
+  id: number;
+  name?: string | null;
+  trade_name?: string | null;
+  email?: string | null;
+  phone?: string | null;
+};
+
+type ProposalRecord = {
+  id: number;
+  person_id: number;
+  code?: string | null;
+  title: string;
+  status: ProposalStatus;
+  currency_code?: string | null;
+  total_amount_cents?: number | null;
+  valid_until?: string | null;
+  updated_at?: string | null;
+  approved_at?: string | null;
+  current_revision_number?: number | null;
+  person?: ProposalPerson | null;
+};
+
+type ProposalStats = {
+  total: number;
+  draft: number;
+  pendingApproval: number;
+  approved: number;
+  rejected: number;
+  contractGenerated: number;
+};
+
+type ProposalsManagementPageProps = {
+  defaultStatus?: ProposalStatusFilter;
+};
+
+type ProposalViewMode = 'table' | 'cards';
+
+const PROPOSALS_VIEW_STORAGE_KEY = 'contact-proposals-view-mode';
+
+function formatMoney(
+  valueInCents?: number | null,
+  locale = 'en-US',
+  currency = 'BRL'
+) {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency || 'BRL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(Number(valueInCents || 0) / 100);
+}
+
+function formatShortDate(value?: string | null, locale = 'en-US') {
+  if (!value) return '—';
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return '—';
+
+  return new Intl.DateTimeFormat(locale, {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  }).format(parsed);
+}
+
+function getStatusBadgeClassName(status?: string | null) {
+  switch (status) {
+    case 'draft':
+      return 'border-slate-500/20 bg-slate-500/10 text-slate-700';
+    case 'pending_approval':
+      return 'border-amber-500/20 bg-amber-500/10 text-amber-700';
+    case 'approved':
+      return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-700';
+    case 'rejected':
+      return 'border-red-500/20 bg-red-500/10 text-red-700';
+    case 'contract_generated':
+      return 'border-sky-500/20 bg-sky-500/10 text-sky-700';
+    case 'cancelled':
+      return 'border-zinc-500/20 bg-zinc-500/10 text-zinc-700';
+    default:
+      return 'border-border bg-muted/50 text-foreground';
+  }
+}
+
+function canSubmitProposal(status?: ProposalStatus | null) {
+  return (
+    status !== 'approved' &&
+    status !== 'pending_approval' &&
+    status !== 'contract_generated' &&
+    status !== 'cancelled'
+  );
+}
+
+export function ProposalsManagementPage({
+  defaultStatus = 'all',
+}: ProposalsManagementPageProps) {
+  const t = useTranslations('contact.ProposalsPage');
+  const proposalT = useTranslations('contact.CrmPipeline.proposals');
+  const crmT = useTranslations('contact.CrmPipeline');
+  const { request, currentLocaleCode } = useApp();
+  const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const [searchInput, setSearchInput] = useState('');
+  const [statusFilter, setStatusFilter] =
+    useState<ProposalStatusFilter>(defaultStatus);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<ProposalViewMode>('table');
+  const [actionKey, setActionKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    setStatusFilter(defaultStatus);
+    setPage(1);
+  }, [defaultStatus]);
+
+  useEffect(() => {
+    try {
+      const savedViewMode = window.localStorage.getItem(
+        PROPOSALS_VIEW_STORAGE_KEY
+      );
+      if (savedViewMode === 'table' || savedViewMode === 'cards') {
+        setViewMode(savedViewMode);
+      }
+    } catch {
+      // Ignore storage read failures.
+    }
+  }, []);
+
+  const defaultPage = useMemo(
+    () => ({ data: [], total: 0, page: 1, pageSize }),
+    [pageSize]
+  );
+
+  const {
+    data: stats = {
+      total: 0,
+      draft: 0,
+      pendingApproval: 0,
+      approved: 0,
+      rejected: 0,
+      contractGenerated: 0,
+    },
+    isLoading: isLoadingStats,
+    refetch: refetchStats,
+  } = useQuery<ProposalStats>({
+    queryKey: ['contact-proposals-stats', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<ProposalStats>({
+        url: '/proposal/stats',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        total: 0,
+        draft: 0,
+        pendingApproval: 0,
+        approved: 0,
+        rejected: 0,
+        contractGenerated: 0,
+      },
+  });
+
+  const {
+    data: proposalPage = defaultPage,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResult<ProposalRecord>>({
+    queryKey: [
+      'contact-proposals-page',
+      searchInput,
+      statusFilter,
+      page,
+      pageSize,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+
+      if (searchInput.trim()) {
+        params.set('search', searchInput.trim());
+      }
+
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+
+      const response = await request<PaginatedResult<ProposalRecord>>({
+        url: `/proposal?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? defaultPage,
+  });
+
+  const hasPendingApprovals = Number(stats.pendingApproval || 0) > 0;
+  const visibleTotalAmountCents = proposalPage.data.reduce(
+    (sum, proposal) => sum + Number(proposal.total_amount_cents || 0),
+    0
+  );
+
+  const pageTitle =
+    defaultStatus === 'pending_approval' ? t('pendingTitle') : t('title');
+  const pageDescription =
+    defaultStatus === 'pending_approval'
+      ? t('pendingDescription')
+      : t('description');
+
+  const controls: SearchBarControl[] = [
+    {
+      id: 'proposal-status-filter',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value) => {
+        setStatusFilter(value as ProposalStatusFilter);
+        setPage(1);
+      },
+      placeholder: t('filters.statusPlaceholder'),
+      options: [
+        { value: 'all', label: t('filters.all') },
+        { value: 'pending_approval', label: t('filters.pending_approval') },
+        { value: 'approved', label: t('filters.approved') },
+        { value: 'draft', label: t('filters.draft') },
+        { value: 'rejected', label: t('filters.rejected') },
+      ],
+    },
+  ];
+
+  const getStatusLabel = (status?: string | null) => {
+    if (!status) return '—';
+
+    try {
+      return proposalT(`status.${status}` as Parameters<typeof proposalT>[0]);
+    } catch {
+      return status;
+    }
+  };
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(PROPOSALS_VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore storage write failures.
+    }
+  };
+
+  const refreshAll = async () => {
+    await Promise.all([refetch(), refetchStats()]);
+  };
+
+  const handleStatusAction = async (
+    proposal: ProposalRecord,
+    action: 'submit' | 'approve' | 'reject'
+  ) => {
+    try {
+      setActionKey(`${action}-${proposal.id}`);
+
+      await request({
+        url: `/proposal/${proposal.id}/${action}`,
+        method: 'POST',
+        data: {},
+      });
+
+      toast.success(
+        proposalT(`toasts.${action}Success` as Parameters<typeof proposalT>[0])
+      );
+      await refreshAll();
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : proposalT(
+              `toasts.${action}Error` as Parameters<typeof proposalT>[0]
+            );
+
+      toast.error(message);
+    } finally {
+      setActionKey(null);
+    }
+  };
+
+  const statsCards = [
+    {
+      key: 'total',
+      title: t('cards.total'),
+      value: isLoadingStats ? '—' : stats.total,
+      icon: FileText,
+      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      iconContainerClassName: 'bg-slate-100 text-slate-700',
+    },
+    {
+      key: 'pending',
+      title: t('cards.pending'),
+      value: isLoadingStats ? '—' : stats.pendingApproval,
+      icon: Clock3,
+      accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+      iconContainerClassName: 'bg-amber-50 text-amber-600',
+    },
+    {
+      key: 'approved',
+      title: t('cards.approved'),
+      value: isLoadingStats ? '—' : stats.approved,
+      icon: CheckCircle2,
+      accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+      iconContainerClassName: 'bg-emerald-50 text-emerald-600',
+    },
+    {
+      key: 'converted',
+      title: t('cards.converted'),
+      value: isLoadingStats ? '—' : stats.contractGenerated,
+      icon: FileCheck2,
+      accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-sky-50 text-sky-600',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
+          { label: pageTitle },
+        ]}
+        title={pageTitle}
+        description={pageDescription}
+        actions={[
+          {
+            label: t('actions.refresh'),
+            onClick: () => {
+              void refreshAll();
+            },
+            icon: <RefreshCcw className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={statsCards} />
+
+      {hasPendingApprovals && defaultStatus !== 'pending_approval' ? (
+        <div className="flex flex-col gap-3 rounded-md border border-amber-200/70 bg-amber-50/40 px-4 py-3 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-foreground">
+              {t('inboxTitle')}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {t('inboxDescription', { count: stats.pendingApproval })}
+            </p>
+          </div>
+
+          <Button
+            variant="outline"
+            className="border-amber-300 bg-background"
+            onClick={() => {
+              setStatusFilter('pending_approval');
+              setPage(1);
+            }}
+          >
+            {t('actions.viewPending')}
+          </Button>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={(value) => {
+              setSearchInput(value);
+              setPage(1);
+            }}
+            onSearch={() => {
+              setPage(1);
+              void refetch();
+            }}
+            placeholder={t('searchPlaceholder')}
+            controls={controls}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+          <div className="flex items-center justify-between gap-3 sm:justify-start">
+            <span className="text-xs font-medium text-muted-foreground">
+              {t('viewMode')}
+            </span>
+            <ToggleGroup
+              type="single"
+              value={viewMode}
+              onValueChange={handleViewModeChange}
+              variant="outline"
+              size="sm"
+              aria-label={t('viewMode')}
+            >
+              <ToggleGroupItem
+                value="table"
+                className="gap-1.5 px-2.5"
+                aria-label={t('viewModeTable')}
+              >
+                <List className="h-4 w-4" />
+                <span className="hidden sm:inline">{t('viewModeTable')}</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="cards"
+                className="gap-1.5 px-2.5"
+                aria-label={t('viewModeCards')}
+              >
+                <LayoutGrid className="h-4 w-4" />
+                <span className="hidden sm:inline">{t('viewModeCards')}</span>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Skeleton key={index} className="h-14 w-full" />
+          ))}
+        </div>
+      ) : proposalPage.data.length === 0 ? (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={
+            statusFilter !== 'all' ? t('actions.showAll') : t('actions.refresh')
+          }
+          onAction={() => {
+            if (statusFilter !== 'all') {
+              setStatusFilter('all');
+              setPage(1);
+              return;
+            }
+
+            void refetch();
+          }}
+        />
+      ) : viewMode === 'table' ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.proposal')}</TableHead>
+                <TableHead>{t('columns.customer')}</TableHead>
+                <TableHead>{t('columns.status')}</TableHead>
+                <TableHead className="text-right">
+                  {t('columns.total')}
+                </TableHead>
+                <TableHead>{t('columns.validUntil')}</TableHead>
+                <TableHead>{t('columns.updatedAt')}</TableHead>
+                <TableHead className="text-right">
+                  {t('columns.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+
+            <TableBody>
+              {proposalPage.data.map((proposal) => {
+                const customerName =
+                  proposal.person?.trade_name ||
+                  proposal.person?.name ||
+                  `#${proposal.person_id}`;
+
+                return (
+                  <TableRow key={proposal.id}>
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="font-medium text-foreground">
+                          {proposal.title}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {proposal.code || `#${proposal.id}`}
+                          {proposal.current_revision_number
+                            ? ` · v${proposal.current_revision_number}`
+                            : ''}
+                        </div>
+                      </div>
+                    </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>
+                      </div>
+                    </TableCell>
+
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'font-medium',
+                          getStatusBadgeClassName(proposal.status)
+                        )}
+                      >
+                        {getStatusLabel(proposal.status)}
+                      </Badge>
+                    </TableCell>
+
+                    <TableCell className="text-right font-medium">
+                      {formatMoney(
+                        proposal.total_amount_cents,
+                        locale,
+                        proposal.currency_code || 'BRL'
+                      )}
+                    </TableCell>
+
+                    <TableCell>
+                      {formatShortDate(proposal.valid_until, locale)}
+                    </TableCell>
+                    <TableCell>
+                      {formatShortDate(proposal.updated_at, locale)}
+                    </TableCell>
+
+                    <TableCell>
+                      <div className="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')}
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="destructive"
+                              disabled={actionKey === `reject-${proposal.id}`}
+                              onClick={() =>
+                                void handleStatusAction(proposal, 'reject')
+                              }
+                            >
+                              {proposalT('actions.reject')}
+                            </Button>
+                          </>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          {proposalPage.data.map((proposal) => {
+            const customerName =
+              proposal.person?.trade_name ||
+              proposal.person?.name ||
+              `#${proposal.person_id}`;
+
+            return (
+              <Card
+                key={proposal.id}
+                className="h-full overflow-hidden border-border/70 py-0"
+              >
+                <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>
+                    <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')}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {formatMoney(
+                          proposal.total_amount_cents,
+                          locale,
+                          proposal.currency_code || 'BRL'
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-muted-foreground">
+                        {t('columns.validUntil')}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {formatShortDate(proposal.valid_until, locale)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-muted-foreground">
+                        {t('columns.updatedAt')}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {formatShortDate(proposal.updated_at, locale)}
+                      </span>
+                    </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')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          disabled={actionKey === `reject-${proposal.id}`}
+                          onClick={() =>
+                            void handleStatusAction(proposal, 'reject')
+                          }
+                        >
+                          {proposalT('actions.reject')}
+                        </Button>
+                      </>
+                    ) : null}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="border-t p-4">
+        <p className="mb-3 text-sm text-muted-foreground">
+          {t('visibleTotal', {
+            value: formatMoney(visibleTotalAmountCents, locale, 'BRL'),
+          })}
+        </p>
+
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={proposalPage.total}
+          onPageChange={setPage}
+          onPageSizeChange={(nextPageSize) => {
+            setPageSize(nextPageSize);
+            setPage(1);
+          }}
+          pageSizeOptions={[12, 24, 36, 48]}
+        />
+      </div>
+    </Page>
+  );
+}