@hed-hog/operations 0.0.3 → 0.0.285

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

@@ -0,0 +1,195 @@
+'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];
+
+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(PAGE_SIZE_OPTIONS[0]);
+
+  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>
+  );
+}

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

@@ -1,47 +1,47 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { KanbanBoard } from '../_components/kanban-board';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-
-export default function TasksPage() {
-  const t = useTranslations('operations.TasksPage');
-  const { tasks, users } = useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredTasks = useMemo(
-    () =>
-      tasks.filter((task) =>
-        `${task.title} ${task.projectName} ${task.labels.join(' ')}`
-          .toLowerCase()
-          .includes(search.toLowerCase())
-      ),
-    [tasks, search]
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SectionCard title={t('boardTitle')} description={t('boardDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <KanbanBoard tasks={filteredTasks} users={users} />
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { KanbanBoard } from '../_components/kanban-board';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+
+export default function TasksPage() {
+  const t = useTranslations('operations.TasksPage');
+  const { tasks, users } = useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredTasks = useMemo(
+    () =>
+      tasks.filter((task) =>
+        `${task.title} ${task.projectName} ${task.labels.join(' ')}`
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      ),
+    [tasks, search]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SectionCard title={t('boardTitle')} description={t('boardDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <KanbanBoard tasks={filteredTasks} users={users} />
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -1,126 +1,126 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-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 { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate, formatHours } from '../_lib/utils/format';
-import { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
-
-export default function TimesheetsPage() {
-  const t = useTranslations('operations.TimesheetsPage');
-  const { timesheets, users, projects, tasks, dailyTotals } =
-    useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredTimesheets = useMemo(
-    () =>
-      timesheets.filter((entry) => {
-        const user = users.find((item) => item.id === entry.userId);
-        const project = projects.find((item) => item.id === entry.projectId);
-        const task = tasks.find((item) => item.id === entry.taskId);
-
-        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-      }),
-    [timesheets, users, projects, tasks, search]
-  );
-
-  const weeklyTotal = filteredTimesheets.reduce(
-    (sum, entry) => sum + entry.hours,
-    0
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
-        }
-      />
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <SectionCard title={t('summary.totalHours')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-        <SectionCard title={t('summary.dailyTotals')}>
-          <div className="space-y-2 text-sm">
-            {Object.entries(dailyTotals).map(([date, total]) => (
-              <div key={date} className="flex items-center justify-between">
-                <span>{formatDate(date)}</span>
-                <span>{formatHours(total)}</span>
-              </div>
-            ))}
-          </div>
-        </SectionCard>
-        <SectionCard title={t('summary.weeklyTotal')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-      </div>
-
-      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columns.date')}</TableHead>
-              <TableHead>{t('columns.user')}</TableHead>
-              <TableHead>{t('columns.project')}</TableHead>
-              <TableHead>{t('columns.task')}</TableHead>
-              <TableHead>{t('columns.hours')}</TableHead>
-              <TableHead>{t('columns.description')}</TableHead>
-              <TableHead>{t('columns.status')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredTimesheets.map((entry) => {
-              const user = users.find((item) => item.id === entry.userId);
-              const project = projects.find((item) => item.id === entry.projectId);
-              const task = tasks.find((item) => item.id === entry.taskId);
-
-              return (
-                <TableRow key={entry.id}>
-                  <TableCell>{formatDate(entry.date)}</TableCell>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{task?.title}</TableCell>
-                  <TableCell>{formatHours(entry.hours)}</TableCell>
-                  <TableCell>{entry.description}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={getApprovalLabel(entry.status)}
-                      className={getApprovalBadgeClasses(entry.status)}
-                    />
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+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 { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import { formatDate, formatHours } from '../_lib/utils/format';
+import { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
+
+export default function TimesheetsPage() {
+  const t = useTranslations('operations.TimesheetsPage');
+  const { timesheets, users, projects, tasks, dailyTotals } =
+    useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredTimesheets = useMemo(
+    () =>
+      timesheets.filter((entry) => {
+        const user = users.find((item) => item.id === entry.userId);
+        const project = projects.find((item) => item.id === entry.projectId);
+        const task = tasks.find((item) => item.id === entry.taskId);
+
+        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
+          .toLowerCase()
+          .includes(search.toLowerCase());
+      }),
+    [timesheets, users, projects, tasks, search]
+  );
+
+  const weeklyTotal = filteredTimesheets.reduce(
+    (sum, entry) => sum + entry.hours,
+    0
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <SectionCard title={t('summary.totalHours')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+        <SectionCard title={t('summary.dailyTotals')}>
+          <div className="space-y-2 text-sm">
+            {Object.entries(dailyTotals).map(([date, total]) => (
+              <div key={date} className="flex items-center justify-between">
+                <span>{formatDate(date)}</span>
+                <span>{formatHours(total)}</span>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+        <SectionCard title={t('summary.weeklyTotal')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.date')}</TableHead>
+              <TableHead>{t('columns.user')}</TableHead>
+              <TableHead>{t('columns.project')}</TableHead>
+              <TableHead>{t('columns.task')}</TableHead>
+              <TableHead>{t('columns.hours')}</TableHead>
+              <TableHead>{t('columns.description')}</TableHead>
+              <TableHead>{t('columns.status')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTimesheets.map((entry) => {
+              const user = users.find((item) => item.id === entry.userId);
+              const project = projects.find((item) => item.id === entry.projectId);
+              const task = tasks.find((item) => item.id === entry.taskId);
+
+              return (
+                <TableRow key={entry.id}>
+                  <TableCell>{formatDate(entry.date)}</TableCell>
+                  <TableCell>{user?.name}</TableCell>
+                  <TableCell>{project?.name}</TableCell>
+                  <TableCell>{task?.title}</TableCell>
+                  <TableCell>{formatHours(entry.hours)}</TableCell>
+                  <TableCell>{entry.description}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={getApprovalLabel(entry.status)}
+                      className={getApprovalBadgeClasses(entry.status)}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}