@hed-hog/operations 0.0.3 → 0.0.286

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

@@ -0,0 +1,278 @@
+'use client';
+
+import { Page, PaginationFooter, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { FilePlus2 } 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 { formatDate } from '../_lib/utils/format';
+import {
+  getGrowthEvaluationBadgeClasses,
+  humanizeGrowthStatus,
+} from '../_lib/utils/growth';
+
+const PAGE_SIZE_OPTIONS = [4, 8, 12];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 4;
+
+export default function OperationsEvaluationsPage() {
+  const t = useTranslations('operations.EvaluationsPage');
+  const { evaluations, users, projects, tasks, evaluationCycles, performanceCriteria } =
+    useOperationsGrowthData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [employeeFilter, setEmployeeFilter] = useState('all');
+  const [cycleFilter, setCycleFilter] = useState('all');
+  const [projectFilter, setProjectFilter] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [selectedEvaluationId, setSelectedEvaluationId] = useState(evaluations[0]?.id ?? '');
+
+  const filteredEvaluations = useMemo(
+    () =>
+      evaluations.filter((evaluation) => {
+        const employee = users.find((item) => item.id === evaluation.employeeId);
+        const evaluator = users.find((item) => item.id === evaluation.evaluatorId);
+        const project = projects.find((item) => item.id === evaluation.projectId);
+        const cycle = evaluationCycles.find((item) => item.id === evaluation.cycleId);
+        const haystack = `${employee?.name ?? ''} ${evaluator?.name ?? ''} ${project?.name ?? ''} ${cycle?.name ?? ''}`;
+
+        const matchesSearch = haystack.toLowerCase().includes(search.toLowerCase());
+        const matchesEmployee =
+          employeeFilter === 'all' || evaluation.employeeId === employeeFilter;
+        const matchesCycle = cycleFilter === 'all' || evaluation.cycleId === cycleFilter;
+        const matchesProject =
+          projectFilter === 'all' || evaluation.projectId === projectFilter;
+
+        return matchesSearch && matchesEmployee && matchesCycle && matchesProject;
+      }),
+    [cycleFilter, employeeFilter, evaluationCycles, evaluations, projectFilter, projects, search, users]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredEvaluations.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedEvaluations = filteredEvaluations.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+  const selectedEvaluation =
+    filteredEvaluations.find((item) => item.id === selectedEvaluationId) ??
+    paginatedEvaluations[0] ??
+    null;
+
+  const selectedEmployee = users.find(
+    (item) => item.id === selectedEvaluation?.employeeId
+  );
+  const selectedEvaluator = users.find(
+    (item) => item.id === selectedEvaluation?.evaluatorId
+  );
+  const selectedProject = projects.find(
+    (item) => item.id === selectedEvaluation?.projectId
+  );
+  const selectedTask = tasks.find((item) => item.id === selectedEvaluation?.taskId);
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <Button className="gap-2" size="sm">
+            <FilePlus2 className="h-4 w-4" />
+            {t('newAction')}
+          </Button>
+        }
+      />
+
+      <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 })),
+            ],
+          },
+          {
+            id: 'cycle-filter',
+            type: 'select',
+            value: cycleFilter,
+            onChange: (value) => {
+              setCycleFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allCycles'),
+            options: [
+              { value: 'all', label: t('filters.allCycles') },
+              ...evaluationCycles.map((item) => ({ value: item.id, label: item.name })),
+            ],
+          },
+          {
+            id: 'project-filter',
+            type: 'select',
+            value: projectFilter,
+            onChange: (value) => {
+              setProjectFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allProjects'),
+            options: [
+              { value: 'all', label: t('filters.allProjects') },
+              ...projects.map((item) => ({ value: item.id, label: item.name })),
+            ],
+          },
+        ]}
+      />
+
+      <div className="grid gap-4 xl:grid-cols-[1.25fr_0.95fr]">
+        <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
+          <div className="space-y-4">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('columns.employee')}</TableHead>
+                  <TableHead>{t('columns.evaluator')}</TableHead>
+                  <TableHead>{t('columns.project')}</TableHead>
+                  <TableHead>{t('columns.cycle')}</TableHead>
+                  <TableHead>{t('columns.score')}</TableHead>
+                  <TableHead>{t('columns.status')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedEvaluations.map((evaluation) => {
+                  const employee = users.find((item) => item.id === evaluation.employeeId);
+                  const evaluator = users.find((item) => item.id === evaluation.evaluatorId);
+                  const project = projects.find((item) => item.id === evaluation.projectId);
+                  const cycle = evaluationCycles.find((item) => item.id === evaluation.cycleId);
+
+                  return (
+                    <TableRow
+                      key={evaluation.id}
+                      className="cursor-pointer"
+                      onClick={() => setSelectedEvaluationId(evaluation.id)}
+                    >
+                      <TableCell className="font-medium">{employee?.name}</TableCell>
+                      <TableCell>{evaluator?.name}</TableCell>
+                      <TableCell>{project?.name ?? '-'}</TableCell>
+                      <TableCell>{cycle?.name}</TableCell>
+                      <TableCell>{evaluation.generatedScore}</TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={humanizeGrowthStatus(evaluation.status)}
+                          className={getGrowthEvaluationBadgeClasses(evaluation.status)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            <PaginationFooter
+              currentPage={safePage}
+              pageSize={pageSize}
+              totalItems={filteredEvaluations.length}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={(value) => {
+                setPageSize(value);
+                setCurrentPage(1);
+              }}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
+            />
+          </div>
+        </SectionCard>
+
+        <SectionCard title={t('detailTitle')} description={t('detailDescription')}>
+          {selectedEvaluation ? (
+            <div className="space-y-5">
+              <div className="grid gap-3 rounded-lg border p-4 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">{t('detail.employee')}</span>
+                  <span className="font-medium">{selectedEmployee?.name}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">{t('detail.evaluator')}</span>
+                  <span className="font-medium">{selectedEvaluator?.name}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">{t('detail.project')}</span>
+                  <span className="font-medium">{selectedProject?.name ?? '-'}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">{t('detail.task')}</span>
+                  <span className="font-medium">{selectedTask?.title ?? '-'}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">{t('detail.date')}</span>
+                  <span className="font-medium">{formatDate(selectedEvaluation.evaluationDate)}</span>
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-3 text-sm font-medium">{t('detail.criteria')}</p>
+                <div className="space-y-4">
+                  {selectedEvaluation.criteria.map((criterion) => {
+                    const item = performanceCriteria.find(
+                      (entry) => entry.id === criterion.criterionId
+                    );
+
+                    return (
+                      <div key={criterion.criterionId} className="rounded-lg border p-3">
+                        <div className="mb-2 flex items-center justify-between gap-3 text-sm">
+                          <span className="font-medium">{item?.name}</span>
+                          <span>{criterion.generatedScore} pts</span>
+                        </div>
+                        <Progress value={criterion.rating * 20} />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <p className="text-sm font-medium">{t('detail.publicComment')}</p>
+                <p className="text-muted-foreground mt-2 text-sm">
+                  {selectedEvaluation.publicComment}
+                </p>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <p className="text-sm font-medium">{t('detail.privateComment')}</p>
+                <p className="text-muted-foreground mt-2 text-sm">
+                  {selectedEvaluation.privateComment}
+                </p>
+              </div>
+            </div>
+          ) : null}
+        </SectionCard>
+      </div>
+    </Page>
+  );
+}

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

@@ -0,0 +1,171 @@
+'use client';
+
+import { Page, PaginationFooter, SearchBar } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Target } 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 { getGrowthGoalBadgeClasses, humanizeGrowthStatus } from '../_lib/utils/growth';
+
+const PAGE_SIZE_OPTIONS = [4, 8, 12];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 4;
+
+export default function OperationsGoalsPage() {
+  const t = useTranslations('operations.GoalsPage');
+  const { goals, users, projects } = useOperationsGrowthData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+  const filteredGoals = useMemo(
+    () =>
+      goals.filter((goal) => {
+        const owner = users.find((item) => item.id === goal.employeeId)?.name;
+        const project = projects.find((item) => item.id === goal.projectId)?.name;
+        const haystack = `${goal.title} ${goal.description} ${owner ?? ''} ${project ?? ''} ${goal.teamName ?? ''}`;
+        const matchesSearch = haystack.toLowerCase().includes(search.toLowerCase());
+        const matchesStatus = statusFilter === 'all' || goal.status === statusFilter;
+
+        return matchesSearch && matchesStatus;
+      }),
+    [goals, projects, search, statusFilter, users]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredGoals.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedGoals = filteredGoals.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: 'status-filter',
+            type: 'select',
+            value: statusFilter,
+            onChange: (value) => {
+              setStatusFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allStatuses'),
+            options: [
+              { value: 'all', label: t('filters.allStatuses') },
+              { value: 'active', label: t('filters.active') },
+              { value: 'at_risk', label: t('filters.atRisk') },
+              { value: 'completed', label: t('filters.completed') },
+              { value: 'draft', label: t('filters.draft') },
+            ],
+          },
+        ]}
+      />
+
+      <SectionCard title={t('sectionTitle')} description={t('sectionDescription')}>
+        <div className="space-y-4">
+          <div className="grid gap-4 lg:grid-cols-2">
+            {paginatedGoals.map((goal) => {
+              const owner = users.find((item) => item.id === goal.employeeId)?.name;
+              const project = projects.find((item) => item.id === goal.projectId)?.name;
+
+              return (
+                <div key={goal.id} className="rounded-lg border p-4">
+                  <div className="mb-3 flex items-start justify-between gap-3">
+                    <div>
+                      <p className="font-medium">{goal.title}</p>
+                      <p className="text-muted-foreground text-sm">{goal.description}</p>
+                    </div>
+                    <StatusBadge
+                      label={humanizeGrowthStatus(goal.status)}
+                      className={getGrowthGoalBadgeClasses(goal.status)}
+                    />
+                  </div>
+                  <div className="mb-3 flex flex-wrap gap-2">
+                    <Badge variant="outline">{goal.periodLabel}</Badge>
+                    <Badge variant="secondary">{owner ?? goal.teamName ?? t('sharedTeam')}</Badge>
+                    {project ? <Badge variant="outline">{project}</Badge> : null}
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span>{t('progress')}</span>
+                      <span>{goal.progressPercent}%</span>
+                    </div>
+                    <Progress value={goal.progressPercent} />
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">{t('scoreGenerated')}</span>
+                      <span>
+                        {goal.currentScore} / {goal.targetScore}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="mt-4 rounded-md bg-slate-50 p-3 text-sm">
+                    <span className="font-medium">{t('completionRule')}:</span> {goal.completionRule}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredGoals.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(value) => {
+              setPageSize(value);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZE_OPTIONS}
+          />
+        </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">
+            <Target className="mb-3 h-5 w-5 text-blue-700" />
+            <p className="font-medium">{t('highlights.activeGoals')}</p>
+            <p className="mt-2 text-2xl font-bold">
+              {goals.filter((item) => item.status === 'active').length}
+            </p>
+          </div>
+          <div className="rounded-lg border border-dashed border-slate-300 p-4">
+            <Target className="mb-3 h-5 w-5 text-orange-700" />
+            <p className="font-medium">{t('highlights.atRiskGoals')}</p>
+            <p className="mt-2 text-2xl font-bold">
+              {goals.filter((item) => item.status === 'at_risk').length}
+            </p>
+          </div>
+          <div className="rounded-lg border border-dashed border-slate-300 p-4">
+            <Target className="mb-3 h-5 w-5 text-emerald-700" />
+            <p className="font-medium">{t('highlights.completedGoals')}</p>
+            <p className="mt-2 text-2xl font-bold">
+              {goals.filter((item) => item.status === 'completed').length}
+            </p>
+          </div>
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}