@hed-hog/operations 0.0.3 → 0.0.286

package/hedhog/frontend/app/contracts/[id]/page.tsx.ejs

@@ -1,108 +1,108 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { useParams } from 'next/navigation';
-import { OperationsHeader } from '../../_components/operations-header';
-import { SectionCard } from '../../_components/section-card';
-import { StatusBadge } from '../../_components/status-badge';
-import { useOperationsData } from '../../_lib/hooks/use-operations-data';
-import { formatCurrency, formatDate } from '../../_lib/utils/format';
-import {
-  getContractBadgeClasses,
-  getContractTypeLabel,
-} from '../../_lib/utils/status';
-
-export default function ContractDetailsPage() {
-  const params = useParams<{ id: string }>();
-  const { contracts, projects } = useOperationsData();
-  const contract = contracts.find((item) => item.id === params.id);
-
-  if (!contract) {
-    return <Page>Contract not found.</Page>;
-  }
-
-  const linkedProjects = projects.filter((project) =>
-    contract.linkedProjectIds.includes(project.id)
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={contract.name}
-        description="Static mock detail page with production-ready structure."
-        current="Contract Details"
-      />
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title="Contract Info">
-          <div className="grid gap-3 text-sm sm:grid-cols-2">
-            <p>
-              <span className="font-medium">Client:</span> {contract.client}
-            </p>
-            <p>
-              <span className="font-medium">Type:</span>{' '}
-              {getContractTypeLabel(contract.type)}
-            </p>
-            <p>
-              <span className="font-medium">Start:</span>{' '}
-              {formatDate(contract.startDate)}
-            </p>
-            <p>
-              <span className="font-medium">End:</span>{' '}
-              {formatDate(contract.endDate)}
-            </p>
-            <p>
-              <span className="font-medium">Hour Rate:</span>{' '}
-              {formatCurrency(contract.hourlyRate)}
-            </p>
-            <p>
-              <span className="font-medium">Hour Limit:</span>{' '}
-              {contract.hourLimit}h
-            </p>
-            <div className="sm:col-span-2">
-              <StatusBadge
-                label={contract.status}
-                className={getContractBadgeClasses(contract.status)}
-              />
-            </div>
-          </div>
-        </SectionCard>
-
-        <SectionCard title="Linked Projects">
-          <div className="space-y-3">
-            {linkedProjects.map((project) => (
-              <div key={project.id} className="rounded-lg border p-3">
-                <p className="font-medium">{project.name}</p>
-                <p className="text-sm text-muted-foreground">{project.client}</p>
-              </div>
-            ))}
-          </div>
-        </SectionCard>
-
-        <SectionCard title="Billing Rules">
-          <ul className="space-y-2 text-sm">
-            {contract.billingRules.map((rule) => (
-              <li key={rule} className="rounded-md bg-muted/40 p-3">
-                {rule}
-              </li>
-            ))}
-          </ul>
-        </SectionCard>
-
-        <SectionCard title="SLA">
-          <p className="text-sm text-muted-foreground">{contract.sla}</p>
-        </SectionCard>
-
-        <SectionCard title="Adjustments / Revisions" className="xl:col-span-2">
-          <ul className="space-y-2 text-sm">
-            {contract.revisions.map((revision) => (
-              <li key={revision} className="rounded-md border p-3">
-                {revision}
-              </li>
-            ))}
-          </ul>
-        </SectionCard>
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { useParams } from 'next/navigation';
+import { OperationsHeader } from '../../_components/operations-header';
+import { SectionCard } from '../../_components/section-card';
+import { StatusBadge } from '../../_components/status-badge';
+import { useOperationsData } from '../../_lib/hooks/use-operations-data';
+import { formatCurrency, formatDate } from '../../_lib/utils/format';
+import {
+  getContractBadgeClasses,
+  getContractTypeLabel,
+} from '../../_lib/utils/status';
+
+export default function ContractDetailsPage() {
+  const params = useParams<{ id: string }>();
+  const { contracts, projects } = useOperationsData();
+  const contract = contracts.find((item) => item.id === params.id);
+
+  if (!contract) {
+    return <Page>Contract not found.</Page>;
+  }
+
+  const linkedProjects = projects.filter((project) =>
+    contract.linkedProjectIds.includes(project.id)
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={contract.name}
+        description="Static mock detail page with production-ready structure."
+        current="Contract Details"
+      />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title="Contract Info">
+          <div className="grid gap-3 text-sm sm:grid-cols-2">
+            <p>
+              <span className="font-medium">Client:</span> {contract.client}
+            </p>
+            <p>
+              <span className="font-medium">Type:</span>{' '}
+              {getContractTypeLabel(contract.type)}
+            </p>
+            <p>
+              <span className="font-medium">Start:</span>{' '}
+              {formatDate(contract.startDate)}
+            </p>
+            <p>
+              <span className="font-medium">End:</span>{' '}
+              {formatDate(contract.endDate)}
+            </p>
+            <p>
+              <span className="font-medium">Hour Rate:</span>{' '}
+              {formatCurrency(contract.hourlyRate)}
+            </p>
+            <p>
+              <span className="font-medium">Hour Limit:</span>{' '}
+              {contract.hourLimit}h
+            </p>
+            <div className="sm:col-span-2">
+              <StatusBadge
+                label={contract.status}
+                className={getContractBadgeClasses(contract.status)}
+              />
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Linked Projects">
+          <div className="space-y-3">
+            {linkedProjects.map((project) => (
+              <div key={project.id} className="rounded-lg border p-3">
+                <p className="font-medium">{project.name}</p>
+                <p className="text-sm text-muted-foreground">{project.client}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Billing Rules">
+          <ul className="space-y-2 text-sm">
+            {contract.billingRules.map((rule) => (
+              <li key={rule} className="rounded-md bg-muted/40 p-3">
+                {rule}
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+
+        <SectionCard title="SLA">
+          <p className="text-sm text-muted-foreground">{contract.sla}</p>
+        </SectionCard>
+
+        <SectionCard title="Adjustments / Revisions" className="xl:col-span-2">
+          <ul className="space-y-2 text-sm">
+            {contract.revisions.map((revision) => (
+              <li key={revision} className="rounded-md border p-3">
+                {revision}
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+      </div>
+    </Page>
+  );
+}

package/hedhog/frontend/app/contracts/page.tsx.ejs

@@ -1,124 +1,181 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { StatusBadge } from '../_components/status-badge';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatCurrency, formatDate } from '../_lib/utils/format';
-import {
-  getContractBadgeClasses,
-  getContractTypeLabel,
-} from '../_lib/utils/status';
-
-export default function ContractsPage() {
-  const t = useTranslations('operations.ContractsPage');
-  const { contracts } = useOperationsData();
-  const [search, setSearch] = useState('');
-  const [status, setStatus] = useState('all');
-
-  const filteredContracts = useMemo(
-    () =>
-      contracts.filter((contract) => {
-        const matchesSearch =
-          `${contract.name} ${contract.client}`
-            .toLowerCase()
-            .includes(search.toLowerCase());
-        const matchesStatus = status === 'all' || contract.status === status;
-        return matchesSearch && matchesStatus;
-      }),
-    [contracts, search, status]
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
-        <div className="mb-4 flex flex-col gap-3 lg:flex-row">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-          <Select value={status} onValueChange={setStatus}>
-            <SelectTrigger className="w-full lg:w-[220px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('filters.all')}</SelectItem>
-              <SelectItem value="active">{t('filters.active')}</SelectItem>
-              <SelectItem value="renewal">{t('filters.renewal')}</SelectItem>
-              <SelectItem value="expired">{t('filters.expired')}</SelectItem>
-              <SelectItem value="draft">{t('filters.draft')}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columns.name')}</TableHead>
-              <TableHead>{t('columns.client')}</TableHead>
-              <TableHead>{t('columns.type')}</TableHead>
-              <TableHead>{t('columns.startDate')}</TableHead>
-              <TableHead>{t('columns.endDate')}</TableHead>
-              <TableHead>{t('columns.hourRate')}</TableHead>
-              <TableHead>{t('columns.hourLimit')}</TableHead>
-              <TableHead>{t('columns.status')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredContracts.map((contract) => (
-              <TableRow key={contract.id}>
-                <TableCell>
-                  <Link
-                    className="font-medium text-primary hover:underline"
-                    href={`/operations/contracts/${contract.id}`}
-                  >
-                    {contract.name}
-                  </Link>
-                </TableCell>
-                <TableCell>{contract.client}</TableCell>
-                <TableCell>{getContractTypeLabel(contract.type)}</TableCell>
-                <TableCell>{formatDate(contract.startDate)}</TableCell>
-                <TableCell>{formatDate(contract.endDate)}</TableCell>
-                <TableCell>{formatCurrency(contract.hourlyRate)}</TableCell>
-                <TableCell>{contract.hourLimit}h</TableCell>
-                <TableCell>
-                  <StatusBadge
-                    label={contract.status}
-                    className={getContractBadgeClasses(contract.status)}
-                  />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { Layers } from 'lucide-react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import { formatCurrency, formatDate } from '../_lib/utils/format';
+import {
+  getContractBadgeClasses,
+  getContractTypeLabel,
+} from '../_lib/utils/status';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 10;
+
+export default function ContractsPage() {
+  const t = useTranslations('operations.ContractsPage');
+  const { contracts } = useOperationsData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+  const filteredContracts = useMemo(
+    () =>
+      contracts.filter((contract) => {
+        const matchesSearch =
+          `${contract.name} ${contract.client}`
+            .toLowerCase()
+            .includes(search.toLowerCase());
+        const matchesStatus = status === 'all' || contract.status === status;
+        return matchesSearch && matchesStatus;
+      }),
+    [contracts, search, status]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredContracts.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedContracts = useMemo(() => {
+    const start = (safePage - 1) * pageSize;
+    return filteredContracts.slice(start, start + pageSize);
+  }, [filteredContracts, safePage, pageSize]);
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SearchBar
+        className="mb-6"
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        placeholder={t('searchPlaceholder')}
+        onSearch={() => {
+          setSearch(searchInput);
+          setCurrentPage(1);
+        }}
+        controls={[
+          {
+            id: 'status-filter',
+            type: 'select',
+            value: status,
+            onChange: (value) => {
+              setStatus(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.all'),
+            options: [
+              { value: 'all', label: t('filters.all') },
+              { value: 'active', label: t('filters.active') },
+              { value: 'renewal', label: t('filters.renewal') },
+              { value: 'expired', label: t('filters.expired') },
+              { value: 'draft', label: t('filters.draft') },
+            ],
+          },
+        ]}
+      />
+
+      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
+        {filteredContracts.length === 0 ? (
+          <EmptyState
+            icon={<Layers className="h-12 w-12" />}
+            title={t('emptyState.title')}
+            description={t('emptyState.description')}
+            actionLabel={t('emptyState.action')}
+            onAction={() => {
+              setSearch('');
+              setSearchInput('');
+              setStatus('all');
+              setCurrentPage(1);
+            }}
+          />
+        ) : (
+          <div className="space-y-4">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('columns.name')}</TableHead>
+                  <TableHead>{t('columns.client')}</TableHead>
+                  <TableHead>{t('columns.type')}</TableHead>
+                  <TableHead>{t('columns.startDate')}</TableHead>
+                  <TableHead>{t('columns.endDate')}</TableHead>
+                  <TableHead>{t('columns.hourRate')}</TableHead>
+                  <TableHead>{t('columns.hourLimit')}</TableHead>
+                  <TableHead>{t('columns.status')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedContracts.map((contract) => (
+                  <TableRow key={contract.id}>
+                    <TableCell>
+                      <Link
+                        className="font-medium text-primary hover:underline"
+                        href={`/operations/contracts/${contract.id}`}
+                      >
+                        {contract.name}
+                      </Link>
+                    </TableCell>
+                    <TableCell>{contract.client}</TableCell>
+                    <TableCell>{getContractTypeLabel(contract.type)}</TableCell>
+                    <TableCell>{formatDate(contract.startDate)}</TableCell>
+                    <TableCell>{formatDate(contract.endDate)}</TableCell>
+                    <TableCell>{formatCurrency(contract.hourlyRate)}</TableCell>
+                    <TableCell>{contract.hourLimit}h</TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={contract.status}
+                        className={getContractBadgeClasses(contract.status)}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <PaginationFooter
+              currentPage={safePage}
+              pageSize={pageSize}
+              totalItems={filteredContracts.length}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={(nextSize) => {
+                setPageSize(nextSize);
+                setCurrentPage(1);
+              }}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
+            />
+          </div>
+        )}
+      </SectionCard>
+    </Page>
+  );
+}