@hed-hog/operations 0.0.295 → 0.0.296

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

@@ -1,288 +0,0 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import { KpiCard } from '@/components/ui/kpi-card';
-import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
-import {
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { Award, ChevronRight, Flag, Sparkles, TrendingUp } 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 {
-  getGrowthPromotionBadgeClasses,
-  humanizeGrowthStatus,
-} from '../_lib/utils/growth';
-
-export default function OperationsGrowthDashboardPage() {
-  const t = useTranslations('operations.GrowthDashboardPage');
-  const {
-    users,
-    profiles,
-    careerTracks,
-    careerLevels,
-    goals,
-    employeeCertifications,
-    certificationCatalog,
-    recognitions,
-    scoreEvents,
-  } = useOperationsGrowthData();
-  const [searchInput, setSearchInput] = useState('');
-  const [search, setSearch] = useState('');
-  const [trackFilter, setTrackFilter] = useState('all');
-
-  const filteredProfiles = useMemo(
-    () =>
-      profiles.filter((profile) => {
-        const user = users.find((item) => item.id === profile.employeeId);
-        const track = careerTracks.find((item) => item.id === profile.trackId);
-        const matchesSearch = `${user?.name ?? ''} ${profile.story}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-        const matchesTrack =
-          trackFilter === 'all' || profile.trackId === trackFilter;
-
-        return matchesSearch && matchesTrack;
-      }),
-    [careerTracks, profiles, search, trackFilter, users]
-  );
-
-  const selectedProfile = filteredProfiles[0];
-
-  if (!selectedProfile) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        <EmptyState
-          icon={<TrendingUp className="h-12 w-12" />}
-          title={t('emptyState.title')}
-          description={t('emptyState.description')}
-          actionLabel={t('emptyState.action')}
-          onAction={() => {
-            setSearch('');
-            setSearchInput('');
-            setTrackFilter('all');
-          }}
-        />
-      </Page>
-    );
-  }
-
-  const employee = users.find((item) => item.id === selectedProfile.employeeId);
-  const currentLevel = careerLevels.find(
-    (item) => item.id === selectedProfile.currentLevelId
-  );
-  const nextLevel = careerLevels.find(
-    (item) => item.id === selectedProfile.nextLevelId
-  );
-  const track = careerTracks.find((item) => item.id === selectedProfile.trackId);
-  const employeeGoals = goals.filter(
-    (item) => item.employeeId === selectedProfile.employeeId
-  );
-  const employeeRecognitions = recognitions.filter(
-    (item) => item.employeeId === selectedProfile.employeeId
-  );
-  const employeeCerts = employeeCertifications.filter(
-    (item) => item.employeeId === selectedProfile.employeeId
-  );
-  const scoreHistory = scoreEvents
-    .filter((item) => item.employeeId === selectedProfile.employeeId)
-    .map((item) => ({ date: formatDate(item.referenceDate), score: item.scoreDelta }));
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SearchBar
-        className="mb-6"
-        searchQuery={searchInput}
-        onSearchChange={setSearchInput}
-        onSearch={() => setSearch(searchInput)}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'track-filter',
-            type: 'select',
-            value: trackFilter,
-            onChange: setTrackFilter,
-            placeholder: t('filters.allTracks'),
-            options: [
-              { value: 'all', label: t('filters.allTracks') },
-              ...careerTracks.map((item) => ({ value: item.id, label: item.name })),
-            ],
-          },
-        ]}
-      />
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <KpiCard title={t('cards.score')} value={selectedProfile.currentScore} icon={TrendingUp} />
-        <KpiCard title={t('cards.currentLevel')} value={currentLevel?.name ?? '-'} icon={Award} />
-        <KpiCard title={t('cards.nextLevel')} value={nextLevel?.name ?? t('cards.none')} icon={ChevronRight} />
-        <KpiCard
-          title={t('cards.certifications')}
-          value={employeeCerts.length}
-          description={t('cards.certificationsDescription')}
-          icon={Sparkles}
-        />
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-[1.3fr_0.9fr]">
-        <SectionCard
-          title={t('profile.title', { name: employee?.name ?? '-' })}
-          description={t('profile.description', { track: track?.name ?? '-' })}
-        >
-          <div className="space-y-6">
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium">{t('profile.promotionProgress')}</span>
-                  <StatusBadge
-                    label={humanizeGrowthStatus(selectedProfile.promotionStatus)}
-                    className={getGrowthPromotionBadgeClasses(
-                      selectedProfile.promotionStatus
-                    )}
-                  />
-                </div>
-                <Progress value={selectedProfile.promotionProgress} />
-                <p className="text-muted-foreground text-sm">
-                  {t('profile.progressLabel', {
-                    progress: selectedProfile.promotionProgress,
-                    score: selectedProfile.currentScore,
-                    target: selectedProfile.nextLevelScore,
-                  })}
-                </p>
-              </div>
-              <div className="rounded-lg border border-dashed border-slate-300 p-4">
-                <p className="text-sm font-medium">{t('profile.salaryBand')}</p>
-                <p className="mt-2 text-lg font-semibold">
-                  {currentLevel
-                    ? `${formatCurrency(currentLevel.salaryMin)} - ${formatCurrency(
-                        currentLevel.salaryMax
-                      )}`
-                    : '-'}
-                </p>
-                <p className="text-muted-foreground mt-2 text-sm">{selectedProfile.story}</p>
-              </div>
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div>
-                <p className="mb-3 text-sm font-medium">{t('profile.strengths')}</p>
-                <div className="flex flex-wrap gap-2">
-                  {selectedProfile.strengths.map((item) => (
-                    <Badge key={item} variant="secondary">
-                      {item}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-              <div>
-                <p className="mb-3 text-sm font-medium">{t('profile.gaps')}</p>
-                <div className="flex flex-wrap gap-2">
-                  {selectedProfile.gaps.map((item) => (
-                    <Badge key={item} variant="outline">
-                      {item}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div>
-                <p className="mb-2 text-sm font-medium">{t('profile.goalsInProgress')}</p>
-                <div className="space-y-3">
-                  {employeeGoals.map((goal) => (
-                    <div key={goal.id} className="rounded-lg border p-3">
-                      <div className="mb-2 flex items-center justify-between gap-3">
-                        <span className="font-medium">{goal.title}</span>
-                        <span className="text-muted-foreground text-sm">
-                          {goal.progressPercent}%
-                        </span>
-                      </div>
-                      <Progress value={goal.progressPercent} />
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div>
-                <p className="mb-2 text-sm font-medium">{t('profile.recentRecognition')}</p>
-                <div className="space-y-3">
-                  {employeeRecognitions.slice(0, 3).map((recognition) => (
-                    <div key={recognition.id} className="rounded-lg border p-3">
-                      <p className="text-sm">{recognition.message}</p>
-                      <p className="text-muted-foreground mt-2 text-xs">
-                        {formatDate(recognition.date)}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </SectionCard>
-
-        <SectionCard title={t('sidebar.title')} description={t('sidebar.description')}>
-          <div className="space-y-4">
-            <div className="rounded-lg border p-4">
-              <p className="text-muted-foreground text-sm">{t('sidebar.currentTrack')}</p>
-              <p className="mt-1 text-lg font-semibold">{track?.name ?? '-'}</p>
-            </div>
-            <div className="rounded-lg border p-4">
-              <p className="text-muted-foreground text-sm">{t('sidebar.requiredCerts')}</p>
-              <div className="mt-3 space-y-3">
-                {employeeCerts.map((item) => {
-                  const certification = certificationCatalog.find(
-                    (catalogItem) => catalogItem.id === item.certificationId
-                  );
-
-                  return (
-                    <div key={item.id} className="flex items-start justify-between gap-3">
-                      <div>
-                        <p className="font-medium">{certification?.name}</p>
-                        <p className="text-muted-foreground text-xs">{certification?.provider}</p>
-                      </div>
-                      <Badge variant={item.status === 'achieved' ? 'default' : 'outline'}>
-                        {humanizeGrowthStatus(item.status)}
-                      </Badge>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-            <div className="rounded-lg border p-4">
-              <p className="mb-3 text-sm font-medium">{t('sidebar.scoreHistory')}</p>
-              <ResponsiveContainer width="100%" height={180}>
-                <LineChart data={scoreHistory}>
-                  <XAxis dataKey="date" tick={{ fontSize: 11 }} />
-                  <YAxis />
-                  <Tooltip />
-                  <Line dataKey="score" type="monotone" stroke="#0f766e" strokeWidth={3} />
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </SectionCard>
-      </div>
-    </Page>
-  );
-}

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

@@ -1,175 +0,0 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { KpiCard } from '@/components/ui/kpi-card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { AlertTriangle, ArrowUp, Medal, Users } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-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,
-  getGrowthPromotionBadgeClasses,
-  humanizeGrowthStatus,
-} from '../_lib/utils/growth';
-
-export default function OperationsManagerPage() {
-  const t = useTranslations('operations.ManagerPage');
-  const {
-    ranking,
-    managerSummary,
-    users,
-    goals,
-    employeeCertifications,
-    promotionRecommendations,
-    careerLevels,
-  } = useOperationsGrowthData();
-
-  const atRiskGoals = goals.filter((item) => item.status === 'at_risk');
-  const pendingCertifications = employeeCertifications.filter(
-    (item) => item.status !== 'achieved'
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <KpiCard title={t('cards.promotionEligible')} value={managerSummary.promotionEligible} icon={ArrowUp} />
-        <KpiCard title={t('cards.goalsAtRisk')} value={managerSummary.goalsAtRisk} icon={AlertTriangle} />
-        <KpiCard title={t('cards.pendingCertifications')} value={managerSummary.pendingCertifications} icon={Medal} />
-        <KpiCard title={t('cards.totalRecognitions')} value={managerSummary.totalRecognitions} icon={Users} />
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
-        <SectionCard title={t('rankingTitle')} description={t('rankingDescription')}>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('ranking.employee')}</TableHead>
-                <TableHead>{t('ranking.score')}</TableHead>
-                <TableHead>{t('ranking.progress')}</TableHead>
-                <TableHead>{t('ranking.status')}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {ranking.map((profile) => {
-                const employee = users.find((item) => item.id === profile.employeeId);
-
-                return (
-                  <TableRow key={profile.employeeId}>
-                    <TableCell className="font-medium">{employee?.name}</TableCell>
-                    <TableCell>{profile.currentScore}</TableCell>
-                    <TableCell>{profile.promotionProgress}%</TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={humanizeGrowthStatus(profile.promotionStatus)}
-                        className={getGrowthPromotionBadgeClasses(profile.promotionStatus)}
-                      />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </SectionCard>
-
-        <SectionCard title={t('recommendationsTitle')} description={t('recommendationsDescription')}>
-          <div className="space-y-4">
-            {promotionRecommendations.map((recommendation) => {
-              const employee = users.find((item) => item.id === recommendation.employeeId);
-              const suggestedLevel = careerLevels.find(
-                (item) => item.id === recommendation.suggestedLevelId
-              );
-
-              return (
-                <div key={recommendation.id} className="rounded-lg border p-4">
-                  <div className="mb-2 flex items-center justify-between gap-3">
-                    <span className="font-medium">{employee?.name}</span>
-                    <StatusBadge
-                      label={humanizeGrowthStatus(recommendation.status)}
-                      className={getGrowthPromotionBadgeClasses(
-                        recommendation.eligible ? 'recommended' : 'developing'
-                      )}
-                    />
-                  </div>
-                  <p className="text-muted-foreground text-sm">
-                    {t('recommendations.nextLevel', { level: suggestedLevel?.name ?? '-' })}
-                  </p>
-                  <p className="mt-3 text-sm">{recommendation.justification}</p>
-                </div>
-              );
-            })}
-          </div>
-        </SectionCard>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('riskTitle')} description={t('riskDescription')}>
-          <div className="space-y-3">
-            {atRiskGoals.map((goal) => {
-              const employee = users.find((item) => item.id === goal.employeeId);
-
-              return (
-                <div key={goal.id} className="rounded-lg border p-4">
-                  <div className="flex items-center justify-between gap-3">
-                    <div>
-                      <p className="font-medium">{goal.title}</p>
-                      <p className="text-muted-foreground text-sm">
-                        {employee?.name ?? goal.teamName}
-                      </p>
-                    </div>
-                    <StatusBadge
-                      label={humanizeGrowthStatus(goal.status)}
-                      className={getGrowthGoalBadgeClasses(goal.status)}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </SectionCard>
-
-        <SectionCard title={t('certificationTitle')} description={t('certificationDescription')}>
-          <div className="space-y-3">
-            {pendingCertifications.map((certification) => {
-              const employee = users.find((item) => item.id === certification.employeeId);
-
-              return (
-                <div key={certification.id} className="rounded-lg border p-4">
-                  <div className="flex items-center justify-between gap-3">
-                    <div>
-                      <p className="font-medium">{employee?.name}</p>
-                      <p className="text-muted-foreground text-sm">
-                        {humanizeGrowthStatus(certification.status)}
-                      </p>
-                    </div>
-                    <StatusBadge
-                      label={humanizeGrowthStatus(certification.status)}
-                      className={getGrowthGoalBadgeClasses(
-                        certification.status === 'planned' ? 'draft' : 'at_risk'
-                      )}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </SectionCard>
-      </div>
-    </Page>
-  );
-}

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

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