@hed-hog/operations 0.0.327 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/project-cost-categories/page.tsx

@@ -1,675 +0,0 @@
-'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
-          page={page}
-          pageSize={pageSize}
-          total={response.total}
-          lastPage={response.lastPage}
-          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>
-  );
-}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/project-cost-types/page.d.ts

@@ -1,2 +0,0 @@
-export default function ProjectCostTypesPage(): import("react").JSX.Element;
-//# sourceMappingURL=page.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/project-cost-types/page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AAwGA,MAAM,CAAC,OAAO,UAAU,oBAAoB,gCAquB3C"}