@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/app/project-cost-categories/page.tsx.ejs

@@ -0,0 +1,674 @@
+'use client';
+
+import {
+    EmptyState,
+    Page,
+    PaginationFooter,
+    SearchBar,
+} from '@/components/entity-list';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+    FolderKanban,
+    LayoutGrid,
+    List,
+    Pencil,
+    Tag,
+    Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import {
+    createProjectCostCategory,
+    deleteProjectCostCategory,
+    listProjectCostCategories,
+    updateProjectCostCategory,
+} from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { PaginatedResponse, ProjectCostCategory } from '../_lib/types';
+
+type CategoryFormState = {
+  slug: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  is_active: boolean;
+  sort_order: string;
+};
+
+const EMPTY_FORM: CategoryFormState = {
+  slug: '',
+  name: '',
+  description: '',
+  icon: '',
+  color: '#6366f1',
+  is_active: true,
+  sort_order: '0',
+};
+
+export default function ProjectCostCategoriesPage() {
+  const t = useTranslations('operations.ProjectCostCategoriesPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    if (typeof window === 'undefined') return 'table';
+    const saved = window.localStorage.getItem(
+      'operations-project-cost-categories-view-mode'
+    );
+    return saved === 'cards' ? 'cards' : 'table';
+  });
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [editingItem, setEditingItem] = useState<ProjectCostCategory | null>(
+    null
+  );
+  const [form, setForm] = useState<CategoryFormState>(EMPTY_FORM);
+  const [deleteTarget, setDeleteTarget] = useState<ProjectCostCategory | null>(
+    null
+  );
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const {
+    data: response,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResponse<ProjectCostCategory>>({
+    queryKey: [
+      'operations-project-cost-categories',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
+    enabled: access.isDirector,
+    queryFn: () => {
+      const params: Record<string, string> = {
+        page: String(page),
+        pageSize: String(pageSize),
+      };
+      if (search.trim()) params.search = search.trim();
+      if (statusFilter === 'active') params.is_active = 'true';
+      if (statusFilter === 'inactive') params.is_active = 'false';
+      return listProjectCostCategories(request, params) as Promise<
+        PaginatedResponse<ProjectCostCategory>
+      >;
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  const items = response?.data ?? [];
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: response?.total ?? items.length,
+        icon: Tag,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: items.filter((i) => i.is_active).length,
+        icon: FolderKanban,
+      },
+      {
+        key: 'inactive',
+        title: t('cards.inactive'),
+        value: items.filter((i) => !i.is_active).length,
+        icon: FolderKanban,
+      },
+    ],
+    [items, response?.total, t]
+  );
+
+  const updateForm = <K extends keyof CategoryFormState>(
+    field: K,
+    value: CategoryFormState[K]
+  ) => {
+    setForm((current) => ({ ...current, [field]: value }));
+  };
+
+  const openCreateSheet = () => {
+    setEditingItem(null);
+    setForm(EMPTY_FORM);
+    setIsSheetOpen(true);
+  };
+
+  const openEditSheet = (item: ProjectCostCategory) => {
+    setEditingItem(item);
+    setForm({
+      slug: item.slug ?? '',
+      name: item.name ?? '',
+      description: item.description ?? '',
+      icon: item.icon ?? '',
+      color: item.color ?? '#6366f1',
+      is_active: item.is_active ?? true,
+      sort_order: String(item.sort_order ?? 0),
+    });
+    setIsSheetOpen(true);
+  };
+
+  const saveItem = async () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload = {
+        slug: form.slug.trim() || null,
+        name: form.name.trim(),
+        description: form.description.trim() || null,
+        icon: form.icon.trim() || null,
+        color: form.color.trim() || null,
+        is_active: form.is_active,
+        sort_order: parseInt(form.sort_order, 10) || 0,
+      };
+
+      if (editingItem) {
+        await updateProjectCostCategory(request, editingItem.id, payload);
+      } else {
+        await createProjectCostCategory(request, payload);
+      }
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setIsSheetOpen(false);
+      setEditingItem(null);
+      setForm(EMPTY_FORM);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteTarget) return;
+    setIsDeleting(true);
+    try {
+      await deleteProjectCostCategory(request, deleteTarget.id);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setDeleteTarget(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value as 'table' | 'cards');
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(
+        'operations-project-cost-categories-view-mode',
+        value
+      );
+    }
+  };
+
+  if (!access.isLoading && !access.isDirector) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+          actions={
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations">{commonT('actions.back')}</Link>
+            </Button>
+          }
+        />
+        <EmptyState
+          icon={<Tag className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.back')}
+          onAction={() => {
+            window.location.href = '/operations';
+          }}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations">{commonT('actions.back')}</Link>
+            </Button>
+            <Button size="sm" onClick={openCreateSheet}>
+              {commonT('actions.create')}
+            </Button>
+          </div>
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={3} />
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex flex-1 flex-wrap items-center gap-3">
+          <div className="flex-1">
+            <SearchBar
+              searchQuery={search}
+              onSearchChange={(value) => {
+                setSearch(value);
+                setPage(1);
+              }}
+              showSearchButton={false}
+              debounceMs={500}
+              placeholder={t('searchPlaceholder')}
+            />
+          </div>
+          <Select
+            value={statusFilter}
+            onValueChange={(value) => {
+              setStatusFilter(value as 'all' | 'active' | 'inactive');
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder={t('filters.allStatus')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
+              <SelectItem value="active">{t('filters.active')}</SelectItem>
+              <SelectItem value="inactive">{t('filters.inactive')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="shrink-0">
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+          >
+            <ToggleGroupItem value="table" aria-label={t('viewModeTable')}>
+              <List className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="cards" aria-label={t('viewModeCards')}>
+              <LayoutGrid className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="flex h-40 items-center justify-center text-muted-foreground">
+          {commonT('states.loading')}
+        </div>
+      ) : items.length === 0 ? (
+        <EmptyState
+          icon={<Tag className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={commonT('actions.create')}
+          onAction={openCreateSheet}
+        />
+      ) : viewMode === 'table' ? (
+        <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.slug')}</TableHead>
+                <TableHead>{t('columns.icon')}</TableHead>
+                <TableHead>{t('columns.sortOrder')}</TableHead>
+                <TableHead>{t('columns.active')}</TableHead>
+                <TableHead className="text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow
+                  key={item.id}
+                  className="cursor-pointer"
+                  onClick={() => openEditSheet(item)}
+                >
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {item.color ? (
+                        <span
+                          className="inline-block size-3 shrink-0 rounded-full border"
+                          style={{ backgroundColor: item.color }}
+                        />
+                      ) : null}
+                      <span className="font-medium">{item.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-mono text-xs text-muted-foreground">
+                      {item.slug ?? '-'}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">
+                      {item.icon ?? '-'}
+                    </span>
+                  </TableCell>
+                  <TableCell>{item.sort_order}</TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={item.is_active ? 'default' : 'secondary'}
+                      className={
+                        item.is_active
+                          ? 'bg-emerald-500/15 text-emerald-700'
+                          : ''
+                      }
+                    >
+                      {item.is_active
+                        ? t('columns.activeYes')
+                        : t('columns.activeNo')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell
+                    className="text-right"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="flex justify-end gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8"
+                        onClick={() => openEditSheet(item)}
+                      >
+                        <Pencil className="size-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-destructive hover:text-destructive"
+                        onClick={() => setDeleteTarget(item)}
+                      >
+                        <Trash2 className="size-3.5" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {items.map((item) => (
+            <Card
+              key={item.id}
+              className="cursor-pointer transition-shadow hover:shadow-md"
+              onClick={() => openEditSheet(item)}
+            >
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex min-w-0 items-center gap-2">
+                    {item.color ? (
+                      <span
+                        className="inline-block size-4 shrink-0 rounded-full border"
+                        style={{ backgroundColor: item.color }}
+                      />
+                    ) : null}
+                    <span className="truncate font-medium">{item.name}</span>
+                  </div>
+                  <Badge
+                    variant={item.is_active ? 'default' : 'secondary'}
+                    className={
+                      item.is_active ? 'bg-emerald-500/15 text-emerald-700' : ''
+                    }
+                  >
+                    {item.is_active
+                      ? t('columns.activeYes')
+                      : t('columns.activeNo')}
+                  </Badge>
+                </div>
+                {item.icon ? (
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {item.icon}
+                  </p>
+                ) : null}
+                <div className="mt-3 flex justify-end gap-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openEditSheet(item);
+                    }}
+                  >
+                    <Pencil className="size-3.5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8 text-destructive hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setDeleteTarget(item);
+                    }}
+                  >
+                    <Trash2 className="size-3.5" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {response && response.lastPage > 1 ? (
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={response.total}
+          onPageChange={setPage}
+          onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+          }}
+        />
+      ) : null}
+
+      {/* Create / Edit Sheet */}
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>
+              {editingItem ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="cat-name">
+                {t('form.name')} <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="cat-name"
+                value={form.name}
+                onChange={(e) => updateForm('name', e.target.value)}
+                placeholder={t('form.namePlaceholder')}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="cat-slug">{t('form.slug')}</Label>
+              <Input
+                id="cat-slug"
+                value={form.slug}
+                onChange={(e) => updateForm('slug', e.target.value)}
+                placeholder={t('form.slugPlaceholder')}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="cat-description">{t('form.description')}</Label>
+              <Textarea
+                id="cat-description"
+                value={form.description}
+                onChange={(e) => updateForm('description', e.target.value)}
+                placeholder={t('form.descriptionPlaceholder')}
+                rows={3}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <Label htmlFor="cat-icon">{t('form.icon')}</Label>
+                <Input
+                  id="cat-icon"
+                  value={form.icon}
+                  onChange={(e) => updateForm('icon', e.target.value)}
+                  placeholder={t('form.iconPlaceholder')}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="cat-color">{t('form.color')}</Label>
+                <div className="flex items-center gap-2">
+                  <input
+                    id="cat-color"
+                    type="color"
+                    value={form.color}
+                    onChange={(e) => updateForm('color', e.target.value)}
+                    className="size-9 cursor-pointer rounded border bg-transparent p-0.5"
+                  />
+                  <Input
+                    value={form.color}
+                    onChange={(e) => updateForm('color', e.target.value)}
+                    placeholder="#6366f1"
+                    className="flex-1"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="cat-sort-order">{t('form.sortOrder')}</Label>
+              <Input
+                id="cat-sort-order"
+                type="number"
+                min="0"
+                step="1"
+                value={form.sort_order}
+                onChange={(e) => updateForm('sort_order', e.target.value)}
+              />
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Switch
+                id="cat-is-active"
+                checked={form.is_active}
+                onCheckedChange={(checked) => updateForm('is_active', checked)}
+              />
+              <Label htmlFor="cat-is-active">{t('form.isActive')}</Label>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 border-t p-4">
+            <Button
+              variant="outline"
+              onClick={() => setIsSheetOpen(false)}
+              disabled={isSaving}
+            >
+              {commonT('actions.cancel')}
+            </Button>
+            <Button onClick={saveItem} disabled={isSaving}>
+              {isSaving ? t('messages.saving') : commonT('actions.save')}
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Confirmation */}
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>
+              {commonT('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? t('messages.deleting') : commonT('actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}