@hed-hog/operations 0.0.3 → 0.0.285

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

@@ -0,0 +1,288 @@
+'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/layout.tsx.ejs

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-
-export default function OperationsLayout({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  return children;
-}
+import { ReactNode } from 'react';
+
+export default function OperationsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

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

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