@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,278 +0,0 @@
-'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

@@ -1,171 +0,0 @@
-'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>
-  );
-}