@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/project-cost-report-screen.tsx

@@ -1,598 +0,0 @@
-'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>(
-    ['project-cost-report', projectId, filters],
-    () => getProjectCostReport(request, projectId, filters)
-  );
-
-  const { data: categories = [] } = useQuery<ProjectCostCategory[]>(
-    ['project-cost-categories-list'],
-    () => listProjectCostCategories(request, {}) as Promise<ProjectCostCategory[]>
-  );
-
-  const { data: costTypes = [] } = useQuery<ProjectCostType[]>(
-    ['project-cost-types-list'],
-    () => 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;
-                          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>
-  );
-}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/project-costs-section.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    projectId: number;
-};
-export declare function ProjectCostsSection({ projectId }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=project-costs-section.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/project-costs-section.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"project-costs-section.d.ts","sourceRoot":"","sources":["project-costs-section.tsx"],"names":[],"mappings":"AAoLA,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,+BA+pCvD"}