@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/app/_components/project-cost-report-screen.tsx.ejs

@@ -0,0 +1,602 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    type ChartConfig,
+} from '@/components/ui/chart';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+    ArrowLeft,
+    BarChart3,
+    DollarSign,
+    Download,
+    Loader2,
+    PiggyBank,
+    Receipt,
+    Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Cell,
+    Legend,
+    Pie,
+    PieChart,
+    XAxis,
+    YAxis,
+} from 'recharts';
+import {
+    getProjectCostReport,
+    listProjectCostCategories,
+    listProjectCostTypes,
+} from '../_lib/api';
+import type {
+    ProjectCostCategory,
+    ProjectCostReport,
+    ProjectCostType,
+} from '../_lib/types';
+import { formatCurrency, formatDate } from '../_lib/utils/format';
+
+const COST_STATUSES = ['planned', 'approved', 'realized', 'cancelled'] as const;
+
+const STATUS_COLORS: Record<string, string> = {
+  planned: '#94a3b8',
+  approved: '#60a5fa',
+  realized: '#22c55e',
+  cancelled: '#f87171',
+};
+
+const DEFAULT_COLORS = [
+  '#6366f1',
+  '#f59e0b',
+  '#10b981',
+  '#ef4444',
+  '#8b5cf6',
+  '#ec4899',
+  '#14b8a6',
+  '#f97316',
+  '#0ea5e9',
+  '#84cc16',
+];
+
+interface Props {
+  projectId: number;
+}
+
+export function ProjectCostReportScreen({ projectId }: Props) {
+  const t = useTranslations('operations.ProjectCostReport');
+  const { request, getSettingValue, currentLocaleCode } = useApp();
+  const pathname = usePathname();
+  const backPath = pathname.replace(/\/costs-report$/, '');
+
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [categoryId, setCategoryId] = useState<string>('all');
+  const [costTypeId, setCostTypeId] = useState<string>('all');
+  const [status, setStatus] = useState<string>('all');
+  const [isBillable, setIsBillable] = useState<string>('all');
+  const [isReimbursable, setIsReimbursable] = useState<string>('all');
+
+  const filters = {
+    date_from: dateFrom || undefined,
+    date_to: dateTo || undefined,
+    category_id: categoryId !== 'all' ? Number(categoryId) : undefined,
+    cost_type_id: costTypeId !== 'all' ? Number(costTypeId) : undefined,
+    status: status !== 'all' ? status : undefined,
+    is_billable: isBillable !== 'all' ? isBillable === 'true' : undefined,
+    is_reimbursable:
+      isReimbursable !== 'all' ? isReimbursable === 'true' : undefined,
+  };
+
+  const { data: report, isLoading } = useQuery<ProjectCostReport>({
+    queryKey: ['project-cost-report', projectId, filters],
+    queryFn: () =>
+      getProjectCostReport(request, projectId, filters) as Promise<ProjectCostReport>,
+  });
+
+  const { data: categories = [] } = useQuery<ProjectCostCategory[]>({
+    queryKey: ['project-cost-categories-list'],
+    queryFn: () =>
+      listProjectCostCategories(request, {}) as Promise<ProjectCostCategory[]>,
+  });
+
+  const { data: costTypes = [] } = useQuery<ProjectCostType[]>({
+    queryKey: ['project-cost-types-list'],
+    queryFn: () => listProjectCostTypes(request, {}) as Promise<ProjectCostType[]>,
+  });
+
+  const fmt = (v: number) =>
+    formatCurrency(v, getSettingValue, currentLocaleCode);
+  const fmtDate = (d: string | null | undefined) =>
+    d ? formatDate(d, getSettingValue, currentLocaleCode) : '—';
+
+  const monthChartConfig: ChartConfig = {
+    planned_subtotal: { label: t('planned'), color: STATUS_COLORS.planned },
+    realized_subtotal: { label: t('realized'), color: STATUS_COLORS.realized },
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Link href={backPath}>
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <div className="flex-1">
+          <h1 className="text-2xl font-bold">{t('title')}</h1>
+          <p className="text-muted-foreground text-sm">{t('description')}</p>
+        </div>
+        <Button variant="outline" size="sm" disabled className="gap-2">
+          <Download className="h-4 w-4" />
+          {t('exportComingSoon')}
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base">{t('filters')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7">
+            {/* Date from */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('dateFrom')}
+              </label>
+              <input
+                type="date"
+                value={dateFrom}
+                onChange={(e) => setDateFrom(e.target.value)}
+                className="border-input h-9 rounded-md border bg-transparent px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+              />
+            </div>
+            {/* Date to */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('dateTo')}
+              </label>
+              <input
+                type="date"
+                value={dateTo}
+                onChange={(e) => setDateTo(e.target.value)}
+                className="border-input h-9 rounded-md border bg-transparent px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+              />
+            </div>
+            {/* Category */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('category')}
+              </label>
+              <Select value={categoryId} onValueChange={setCategoryId}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('all')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('all')}</SelectItem>
+                  {categories.map((c) => (
+                    <SelectItem key={c.id} value={String(c.id)}>
+                      {c.name ?? c.slug}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Cost type */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('costType')}
+              </label>
+              <Select value={costTypeId} onValueChange={setCostTypeId}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('all')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('all')}</SelectItem>
+                  {costTypes.map((ct) => (
+                    <SelectItem key={ct.id} value={String(ct.id)}>
+                      {ct.name ?? ct.slug}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Status */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('status')}
+              </label>
+              <Select value={status} onValueChange={setStatus}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('all')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('all')}</SelectItem>
+                  {COST_STATUSES.map((s) => (
+                    <SelectItem key={s} value={s}>
+                      {t(`statuses.${s}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Billable */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('billable')}
+              </label>
+              <Select value={isBillable} onValueChange={setIsBillable}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('all')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('all')}</SelectItem>
+                  <SelectItem value="true">{t('yes')}</SelectItem>
+                  <SelectItem value="false">{t('no')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Reimbursable */}
+            <div className="flex flex-col gap-1">
+              <label className="text-muted-foreground text-xs">
+                {t('reimbursable')}
+              </label>
+              <Select value={isReimbursable} onValueChange={setIsReimbursable}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('all')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('all')}</SelectItem>
+                  <SelectItem value="true">{t('yes')}</SelectItem>
+                  <SelectItem value="false">{t('no')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {isLoading && (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      )}
+
+      {!isLoading && report && (
+        <>
+          {/* KPI cards */}
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+            <Card>
+              <CardContent className="flex items-center gap-3 pt-5">
+                <DollarSign className="text-primary h-8 w-8 shrink-0 opacity-80" />
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t('totalCost')}
+                  </p>
+                  <p className="text-lg font-bold">
+                    {fmt(report.totals.grand_total)}
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {report.totals.total_count} {t('items')}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 pt-5">
+                <Receipt className="h-8 w-8 shrink-0 text-slate-400 opacity-80" />
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t('planned')}
+                  </p>
+                  <p className="text-lg font-bold">
+                    {fmt(report.totals.planned_total)}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 pt-5">
+                <Wallet className="h-8 w-8 shrink-0 text-green-500 opacity-80" />
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t('realized')}
+                  </p>
+                  <p className="text-lg font-bold">
+                    {fmt(report.totals.realized_total)}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 pt-5">
+                <PiggyBank className="h-8 w-8 shrink-0 text-blue-400 opacity-80" />
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t('billable')}
+                  </p>
+                  <p className="text-lg font-bold">
+                    {fmt(report.totals.billable_total)}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Charts row */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {/* Bar chart — planned vs realized by month */}
+            {report.cost_by_month.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-sm">
+                    <BarChart3 className="h-4 w-4" />
+                    {t('chartByMonth')}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ChartContainer
+                    config={monthChartConfig}
+                    className="h-56 w-full"
+                  >
+                    <BarChart data={report.cost_by_month}>
+                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                      <XAxis dataKey="month" tick={{ fontSize: 11 }} />
+                      <YAxis tick={{ fontSize: 11 }} />
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <Legend wrapperStyle={{ fontSize: 12 }} />
+                      <Bar
+                        dataKey="planned_subtotal"
+                        name={t('planned')}
+                        fill={STATUS_COLORS.planned}
+                        radius={[3, 3, 0, 0]}
+                      />
+                      <Bar
+                        dataKey="realized_subtotal"
+                        name={t('realized')}
+                        fill={STATUS_COLORS.realized}
+                        radius={[3, 3, 0, 0]}
+                      />
+                    </BarChart>
+                  </ChartContainer>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Pie chart — by category */}
+            {report.cost_by_category.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-sm">
+                    <DollarSign className="h-4 w-4" />
+                    {t('chartByCategory')}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center">
+                  <ChartContainer config={{}} className="h-56 w-full">
+                    <PieChart>
+                      <Pie
+                        data={report.cost_by_category}
+                        dataKey="total"
+                        nameKey="category_name"
+                        cx="50%"
+                        cy="50%"
+                        outerRadius={90}
+                        label={({ category_name, percent }) =>
+                          `${category_name ?? '—'} ${(percent * 100).toFixed(0)}%`
+                        }
+                      >
+                        {report.cost_by_category.map((entry, index) => (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill={
+                              entry.category_color ??
+                              DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+                            }
+                          />
+                        ))}
+                      </Pie>
+                      <ChartTooltip
+                        content={({ active, payload }) => {
+                          if (!active || !payload?.length) return null;
+                          const d = payload[0]?.payload;
+                          if (!d) return null;
+
+                          return (
+                            <div className="rounded-md bg-background px-3 py-2 text-sm shadow-md border">
+                              <p className="font-medium">
+                                {d.category_name ?? '—'}
+                              </p>
+                              <p>{fmt(d.total)}</p>
+                            </div>
+                          );
+                        }}
+                      />
+                    </PieChart>
+                  </ChartContainer>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Top 5 costs */}
+          {report.top_5_costs.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm">{t('top5Title')}</CardTitle>
+              </CardHeader>
+              <CardContent className="p-0">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('colDescription')}</TableHead>
+                      <TableHead>{t('colCategory')}</TableHead>
+                      <TableHead>{t('colType')}</TableHead>
+                      <TableHead>{t('colStatus')}</TableHead>
+                      <TableHead>{t('colDate')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('colTotal')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {report.top_5_costs.map((c) => (
+                      <TableRow key={c.id}>
+                        <TableCell className="font-medium">
+                          {c.description ?? '—'}
+                        </TableCell>
+                        <TableCell>
+                          <span className="flex items-center gap-1.5">
+                            {c.category_color && (
+                              <span
+                                className="inline-block h-2.5 w-2.5 rounded-full"
+                                style={{ background: c.category_color }}
+                              />
+                            )}
+                            {c.category_name ?? '—'}
+                          </span>
+                        </TableCell>
+                        <TableCell>{c.cost_type_name ?? '—'}</TableCell>
+                        <TableCell>
+                          <span
+                            className="rounded-full px-2 py-0.5 text-xs font-medium text-white"
+                            style={{
+                              background: STATUS_COLORS[c.status] ?? '#94a3b8',
+                            }}
+                          >
+                            {t(`statuses.${c.status}`)}
+                          </span>
+                        </TableCell>
+                        <TableCell>{fmtDate(c.cost_date)}</TableCell>
+                        <TableCell className="text-right font-mono">
+                          {fmt(c.total)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Detailed list */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm">{t('detailTitle')}</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              {report.detailed_list.length === 0 ? (
+                <p className="text-muted-foreground py-10 text-center text-sm">
+                  {t('emptyState')}
+                </p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>{t('colDescription')}</TableHead>
+                        <TableHead>{t('colCategory')}</TableHead>
+                        <TableHead>{t('colType')}</TableHead>
+                        <TableHead>{t('colStatus')}</TableHead>
+                        <TableHead>{t('colDate')}</TableHead>
+                        <TableHead className="text-right">
+                          {t('colAmount')}
+                        </TableHead>
+                        <TableHead className="text-right">
+                          {t('colQuantity')}
+                        </TableHead>
+                        <TableHead className="text-right">
+                          {t('colTotal')}
+                        </TableHead>
+                        <TableHead className="text-center">
+                          {t('colBillable')}
+                        </TableHead>
+                        <TableHead className="text-center">
+                          {t('colReimbursable')}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {report.detailed_list.map((c) => (
+                        <TableRow key={c.id}>
+                          <TableCell className="max-w-[200px] truncate font-medium">
+                            {c.description ?? '—'}
+                          </TableCell>
+                          <TableCell>
+                            <span className="flex items-center gap-1.5">
+                              {c.category_color && (
+                                <span
+                                  className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+                                  style={{ background: c.category_color }}
+                                />
+                              )}
+                              {c.category_name ?? '—'}
+                            </span>
+                          </TableCell>
+                          <TableCell>{c.cost_type_name ?? '—'}</TableCell>
+                          <TableCell>
+                            <span
+                              className="rounded-full px-2 py-0.5 text-xs font-medium text-white"
+                              style={{
+                                background:
+                                  STATUS_COLORS[c.status] ?? '#94a3b8',
+                              }}
+                            >
+                              {t(`statuses.${c.status}`)}
+                            </span>
+                          </TableCell>
+                          <TableCell>{fmtDate(c.cost_date)}</TableCell>
+                          <TableCell className="text-right font-mono">
+                            {fmt(c.amount)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {c.quantity}
+                          </TableCell>
+                          <TableCell className="text-right font-mono font-semibold">
+                            {fmt(c.total)}
+                          </TableCell>
+                          <TableCell className="text-center text-xs">
+                            {c.is_billable ? t('yes') : t('no')}
+                          </TableCell>
+                          <TableCell className="text-center text-xs">
+                            {c.is_reimbursable ? t('yes') : t('no')}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}