@hed-hog/operations 0.0.3 → 0.0.286

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

@@ -0,0 +1,196 @@
+'use client';
+
+import { Page, PaginationFooter, SearchBar } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Gift } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { useOperationsGrowthData } from '../_lib/hooks/use-operations-growth-data';
+import { formatCurrency, formatDate } from '../_lib/utils/format';
+import { getGrowthRewardBadgeClasses, humanizeGrowthStatus } from '../_lib/utils/growth';
+
+const PAGE_SIZE_OPTIONS = [4, 8, 12];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 4;
+
+export default function OperationsRewardsPage() {
+  const t = useTranslations('operations.RewardsPage');
+  const { rewards, recognitions, users, projects } = useOperationsGrowthData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [employeeFilter, setEmployeeFilter] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+  const filteredRewards = useMemo(
+    () =>
+      rewards.filter((reward) => {
+        const employee = users.find((item) => item.id === reward.employeeId);
+        const haystack = `${employee?.name ?? ''} ${reward.description} ${reward.type} ${reward.origin}`;
+        const matchesSearch = haystack.toLowerCase().includes(search.toLowerCase());
+        const matchesEmployee =
+          employeeFilter === 'all' || reward.employeeId === employeeFilter;
+
+        return matchesSearch && matchesEmployee;
+      }),
+    [employeeFilter, rewards, search, users]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredRewards.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedRewards = filteredRewards.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SearchBar
+        className="mb-6"
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        onSearch={() => {
+          setSearch(searchInput);
+          setCurrentPage(1);
+        }}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'employee-filter',
+            type: 'select',
+            value: employeeFilter,
+            onChange: (value) => {
+              setEmployeeFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allEmployees'),
+            options: [
+              { value: 'all', label: t('filters.allEmployees') },
+              ...users.map((item) => ({ value: item.id, label: item.name })),
+            ],
+          },
+        ]}
+      />
+
+      <SectionCard title={t('rewardsTitle')} description={t('rewardsDescription')}>
+        <div className="space-y-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.employee')}</TableHead>
+                <TableHead>{t('columns.type')}</TableHead>
+                <TableHead>{t('columns.origin')}</TableHead>
+                <TableHead>{t('columns.amount')}</TableHead>
+                <TableHead>{t('columns.score')}</TableHead>
+                <TableHead>{t('columns.status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedRewards.map((reward) => {
+                const employee = users.find((item) => item.id === reward.employeeId);
+
+                return (
+                  <TableRow key={reward.id}>
+                    <TableCell className="font-medium">{employee?.name}</TableCell>
+                    <TableCell>{humanizeGrowthStatus(reward.type)}</TableCell>
+                    <TableCell>{humanizeGrowthStatus(reward.origin)}</TableCell>
+                    <TableCell>
+                      {reward.amount && reward.currency
+                        ? formatCurrency(reward.amount)
+                        : t('notApplicable')}
+                    </TableCell>
+                    <TableCell>{reward.relatedScore ?? '-'}</TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={humanizeGrowthStatus(reward.status)}
+                        className={getGrowthRewardBadgeClasses(reward.status)}
+                      />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredRewards.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(value) => {
+              setPageSize(value);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZE_OPTIONS}
+          />
+        </div>
+      </SectionCard>
+
+      <SectionCard title={t('recognitionTitle')} description={t('recognitionDescription')}>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {recognitions.map((recognition) => {
+            const employee = users.find((item) => item.id === recognition.employeeId);
+            const author = users.find((item) => item.id === recognition.authorId);
+            const project = projects.find((item) => item.id === recognition.projectId);
+
+            return (
+              <div key={recognition.id} className="rounded-lg border p-4">
+                <div className="mb-3 flex items-center justify-between gap-3">
+                  <div>
+                    <p className="font-medium">{employee?.name}</p>
+                    <p className="text-muted-foreground text-sm">{author?.name}</p>
+                  </div>
+                  <Badge variant="secondary">+{recognition.relatedScore ?? 0}</Badge>
+                </div>
+                <p className="text-sm">{recognition.message}</p>
+                <div className="text-muted-foreground mt-3 flex items-center justify-between text-xs">
+                  <span>{project?.name ?? t('withoutProject')}</span>
+                  <span>{formatDate(recognition.date)}</span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </SectionCard>
+
+      <SectionCard title={t('highlightsTitle')} description={t('highlightsDescription')}>
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="rounded-lg border border-dashed border-slate-300 p-4">
+            <Gift className="mb-3 h-5 w-5 text-emerald-700" />
+            <p className="font-medium">{t('highlights.granted')}</p>
+            <p className="mt-2 text-2xl font-bold">
+              {rewards.filter((item) => item.status === 'granted').length}
+            </p>
+          </div>
+          <div className="rounded-lg border border-dashed border-slate-300 p-4">
+            <Gift className="mb-3 h-5 w-5 text-blue-700" />
+            <p className="font-medium">{t('highlights.publicRecognition')}</p>
+            <p className="mt-2 text-2xl font-bold">{recognitions.length}</p>
+          </div>
+          <div className="rounded-lg border border-dashed border-slate-300 p-4">
+            <Gift className="mb-3 h-5 w-5 text-orange-700" />
+            <p className="font-medium">{t('highlights.financial')}</p>
+            <p className="mt-2 text-2xl font-bold">
+              {rewards.filter((item) => item.type === 'financial' || item.type === 'bonus').length}
+            </p>
+          </div>
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}