feat: unified Skills Hub — merge analytics + marketplace into one page

Combines SkillsAnalytics (496 LOC) and SkillMarketplace (346 LOC) into a single tabbed Skills Hub (770 LOC total, -9% code). New structure: - skills/shared.tsx: ProficiencyBadge, GapIndicator, constants (extracted) - skills/OverviewTab.tsx: KPI cards, top 10 table, distribution chart, export - skills/SearchTab.tsx: skill search + proficiency + availability filter - skills/GapsTab.tsx: supply vs demand table with gap indicators - skills/PeopleFinderTab.tsx: multi-rule AND/OR builder, chapter filter, export - SkillsHub.tsx: tabbed container with URL-persisted tab state (?tab=) Routing: - /analytics/skills renders SkillsHub (was SkillsAnalytics) - /analytics/skill-marketplace redirects to /analytics/skills?tab=search - Sidebar: "Skill Marketplace" removed, renamed to "Skills Hub" No API changes — reuses existing queries with conditional fetching per tab. Full dark theme support on all components. Co-Authored-By: claude-flow <ruv@ruv.net>
2026-03-22 21:33:21 +01:00
parent 1f4c230b8b
commit c7b76e086d
10 changed files with 901 additions and 272 deletions
@@ -0,0 +1,110 @@
+"use client";
+
+import { useSearchParams, useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+import { trpc } from "~/lib/trpc/client.js";
+
+const OverviewTab = dynamic(() => import("./skills/OverviewTab.js").then((m) => ({ default: m.OverviewTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const SearchTab = dynamic(() => import("./skills/SearchTab.js").then((m) => ({ default: m.SearchTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const GapsTab = dynamic(() => import("./skills/GapsTab.js").then((m) => ({ default: m.GapsTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const PeopleFinderTab = dynamic(() => import("./skills/PeopleFinderTab.js").then((m) => ({ default: m.PeopleFinderTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+
+const TABS = [
+  { key: "overview", label: "Overview" },
+  { key: "search", label: "Search" },
+  { key: "gaps", label: "Gaps" },
+  { key: "people", label: "People Finder" },
+] as const;
+
+type TabKey = (typeof TABS)[number]["key"];
+
+export function SkillsHub() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const rawTab = searchParams.get("tab");
+  const activeTab: TabKey = TABS.some((t) => t.key === rawTab) ? (rawTab as TabKey) : "overview";
+
+  function setTab(tab: TabKey) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", tab);
+    router.replace(`/analytics/skills?${params.toString()}` as `/analytics/skills`, { scroll: false });
+  }
+
+  const { data, isLoading, error } = trpc.resource.getSkillsAnalytics.useQuery(undefined, { staleTime: 60_000 });
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="h-8 shimmer-skeleton rounded w-64" />
+        <div className="h-64 shimmer-skeleton rounded-xl" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 text-sm text-red-700 dark:text-red-300">
+          {error.message}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 pb-24 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Skills Hub</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          {data?.totalResources} active resources &middot; {data?.totalSkillEntries} distinct skills
+        </p>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex gap-1 border-b border-gray-200 dark:border-slate-700">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => setTab(tab.key)}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${
+              activeTab === tab.key
+                ? "border-brand-600 text-brand-600 dark:text-brand-400 dark:border-brand-400"
+                : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-slate-600"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      {activeTab === "overview" && data && (
+        <OverviewTab
+          aggregated={data.aggregated}
+          categories={data.categories}
+          totalResources={data.totalResources}
+          totalSkillEntries={data.totalSkillEntries}
+        />
+      )}
+      {activeTab === "search" && <SearchTab />}
+      {activeTab === "gaps" && <GapsTab />}
+      {activeTab === "people" && data && (
+        <PeopleFinderTab
+          allSkillNames={data.aggregated.map((e) => e.skill)}
+          allChapters={data.allChapters}
+        />
+      )}
+    </div>
+  );
+}