@burdenoff/microfe-technospam 2026.512.1 → 2026.704.1

package/dist/technospam/pages/ApplicationsProblemsPagePage.js

@@ -1,203 +1,202 @@
-import { useTechnoSpamStore as e } from "../store/technospamStore.js";
-import { useMemo as t, useState as n } from "react";
-import { BarChart3 as r, CheckCircle as i, Code as a, Search as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l, Card as u, CardContent as d, CardHeader as f, CardTitle as p, Input as m } from "@burdenoff/fe-libs/ui";
+import { useTechnoSpam as e, useTechnoSpamNavigate as t } from "../providers/TechnoSpamProvider.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { StatCard as r } from "../components/StatCard.js";
+import { StatusBadge as i } from "../components/StatusBadge.js";
+import { EmptyView as a, ErrorView as o, LoadingGrid as s } from "../components/StateViews.js";
+import "../components/index.js";
+import { useProblemsQuery as c, useSubmissionsQuery as l } from "../api/technospamApi.js";
+import { useMemo as u, useState as d } from "react";
+import { CheckCircle2 as f, Code2 as p, Flame as m, Gauge as h, Layers as g, Search as _, Tag as v, Trophy as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Badge as S, GlassCard as C, Input as w, Tabs as T, TabsList as E, TabsTrigger as D } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/ApplicationsProblemsPagePage.tsx
-function h() {
-	let { problems: h, userStats: g } = e(), [_, v] = n(""), [y, b] = n("all"), x = t(() => h.filter((e) => {
-		let t = _ === "" || e.title.toLowerCase().includes(_.toLowerCase()) || e.category.toLowerCase().includes(_.toLowerCase()) || e.tags.some((e) => e.toLowerCase().includes(_.toLowerCase())), n = y === "all" || e.difficulty === y;
-		return t && n;
-	}), [
-		h,
-		_,
-		y
-	]), S = h.filter((e) => e.isSolved).length, C = (e) => {
-		switch (e) {
-			case "easy": return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
-			case "medium": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400";
-			case "hard": return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400";
-			default: return "";
-		}
-	};
-	return /* @__PURE__ */ c("div", {
-		className: "space-y-6 p-6",
-		children: [
-			/* @__PURE__ */ s("div", {
-				className: "flex items-center justify-between",
-				children: /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h1", {
-					className: "text-2xl font-semibold text-foreground",
-					children: "Coding Problems"
-				}), /* @__PURE__ */ s("p", {
-					className: "text-sm text-muted-foreground",
-					children: "Practice and sharpen your problem-solving skills"
-				})] })
-			}),
-			/* @__PURE__ */ c("div", {
-				className: "grid gap-4 md:grid-cols-3",
-				children: [
-					/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(f, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ s(p, {
-							className: "text-sm font-medium",
-							children: "Total Problems"
-						}), /* @__PURE__ */ s(a, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s("div", {
-						className: "text-2xl font-bold",
-						children: h.length
-					}) })] }),
-					/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(f, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ s(p, {
-							className: "text-sm font-medium",
-							children: "Solved"
-						}), /* @__PURE__ */ s(i, { className: "h-4 w-4 text-green-500" })]
-					}), /* @__PURE__ */ c(d, { children: [/* @__PURE__ */ s("div", {
-						className: "text-2xl font-bold",
-						children: S
-					}), /* @__PURE__ */ c("p", {
-						className: "text-xs text-muted-foreground",
-						children: [g.problemsSolved, " lifetime"]
-					})] })] }),
-					/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(f, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ s(p, {
-							className: "text-sm font-medium",
-							children: "Acceptance Avg"
-						}), /* @__PURE__ */ s(r, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ s(d, { children: /* @__PURE__ */ c("div", {
-						className: "text-2xl font-bold",
-						children: [(h.reduce((e, t) => e + t.acceptanceRate, 0) / h.length).toFixed(1), "%"]
-					}) })] })
-				]
-			}),
-			/* @__PURE__ */ s(u, { children: /* @__PURE__ */ s(d, {
-				className: "pt-6",
-				children: /* @__PURE__ */ c("div", {
-					className: "flex flex-col gap-4 sm:flex-row sm:items-center",
-					children: [/* @__PURE__ */ c("div", {
-						className: "relative flex-1",
-						children: [/* @__PURE__ */ s(o, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(m, {
-							placeholder: "Search problems, categories, tags...",
-							value: _,
-							onChange: (e) => v(e.target.value),
-							className: "pl-9"
-						})]
-					}), /* @__PURE__ */ s("div", {
-						className: "flex gap-2",
-						children: [
-							{
-								label: "All",
-								value: "all"
-							},
-							{
-								label: "Easy",
-								value: "easy"
-							},
-							{
-								label: "Medium",
-								value: "medium"
-							},
-							{
-								label: "Hard",
-								value: "hard"
-							}
-						].map((e) => /* @__PURE__ */ s(l, {
-							variant: y === e.value ? "default" : "outline",
-							size: "sm",
-							onClick: () => b(e.value),
-							children: e.label
-						}, e.value))
-					})]
+var O = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "EASY",
+		label: "Easy"
+	},
+	{
+		value: "MEDIUM",
+		label: "Medium"
+	},
+	{
+		value: "HARD",
+		label: "Hard"
+	}
+];
+function k(e) {
+	let t = [
+		"from-accent-primary/25 to-accent-teal/20",
+		"from-accent-teal/25 to-accent-primary/15",
+		"from-status-success-bg-subtle to-accent-wash",
+		"from-accent-wash to-bg-sunken"
+	], n = 0;
+	for (let t = 0; t < e.length; t += 1) n = n * 31 + e.charCodeAt(t) >>> 0;
+	return t[n % t.length];
+}
+function A({ problem: e, solved: t, onOpen: n }) {
+	return /* @__PURE__ */ x(C, {
+		className: "group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md",
+		onClick: n,
+		children: [/* @__PURE__ */ x("div", {
+			className: `relative flex h-20 items-end bg-gradient-to-br ${k(e.topic ?? e.difficulty)} p-4`,
+			children: [
+				/* @__PURE__ */ b(p, {
+					className: "absolute right-3 top-3 text-text-muted/60",
+					size: 18
+				}),
+				t ? /* @__PURE__ */ x("span", {
+					className: "absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-success-text",
+					children: [/* @__PURE__ */ b(f, { size: 12 }), " Solved"]
+				}) : null,
+				/* @__PURE__ */ b(i, {
+					status: e.difficulty,
+					kind: "level"
 				})
-			}) }),
-			/* @__PURE__ */ s(u, { children: /* @__PURE__ */ s(d, {
-				className: "pt-6",
-				children: x.length === 0 ? /* @__PURE__ */ s("p", {
-					className: "py-8 text-center text-sm text-muted-foreground",
-					children: "No problems match your filters"
-				}) : /* @__PURE__ */ s("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ c("table", {
-						className: "w-full text-sm",
-						children: [/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", {
-							className: "border-b text-left text-muted-foreground",
+			]
+		}), /* @__PURE__ */ x("div", {
+			className: "flex flex-1 flex-col gap-3 p-4",
+			children: [
+				/* @__PURE__ */ x("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ b("h3", {
+						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
+						children: e.title
+					}), e.statement ? /* @__PURE__ */ b("p", {
+						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
+						children: e.statement
+					}) : null]
+				}),
+				/* @__PURE__ */ x("div", {
+					className: "mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted",
+					children: [
+						e.topic ? /* @__PURE__ */ x("span", {
+							className: "inline-flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ b(g, { size: 13 }),
+								" ",
+								e.topic
+							]
+						}) : null,
+						/* @__PURE__ */ x("span", {
+							className: "inline-flex items-center gap-1",
 							children: [
-								/* @__PURE__ */ s("th", {
-									className: "p-3 w-8",
-									children: "#"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3",
-									children: "Title"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3",
-									children: "Category"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3",
-									children: "Difficulty"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3",
-									children: "Acceptance"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3",
-									children: "Company"
-								}),
-								/* @__PURE__ */ s("th", {
-									className: "p-3 text-right",
-									children: "Status"
-								})
+								/* @__PURE__ */ b(y, { size: 13 }),
+								" ",
+								e.points,
+								" pts"
 							]
-						}) }), /* @__PURE__ */ s("tbody", { children: x.map((e, t) => /* @__PURE__ */ c("tr", {
-							className: "border-b hover:bg-muted/50",
+						}),
+						e.languages.length ? /* @__PURE__ */ x("span", {
+							className: "inline-flex items-center gap-1",
 							children: [
-								/* @__PURE__ */ s("td", {
-									className: "p-3 text-muted-foreground",
-									children: t + 1
-								}),
-								/* @__PURE__ */ s("td", {
-									className: "p-3 font-medium",
-									children: e.title
-								}),
-								/* @__PURE__ */ s("td", {
-									className: "p-3 text-muted-foreground",
-									children: e.category
-								}),
-								/* @__PURE__ */ s("td", {
-									className: "p-3",
-									children: /* @__PURE__ */ s("span", {
-										className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${C(e.difficulty)}`,
-										children: e.difficulty
-									})
-								}),
-								/* @__PURE__ */ c("td", {
-									className: "p-3 text-muted-foreground",
-									children: [e.acceptanceRate, "%"]
-								}),
-								/* @__PURE__ */ s("td", {
-									className: "p-3 text-muted-foreground",
-									children: e.company ?? "-"
-								}),
-								/* @__PURE__ */ s("td", {
-									className: "p-3 text-right",
-									children: e.isSolved ? /* @__PURE__ */ s(i, { className: "ml-auto h-4 w-4 text-green-500" }) : /* @__PURE__ */ s("span", {
-										className: "text-xs text-muted-foreground",
-										children: "Unsolved"
-									})
-								})
+								/* @__PURE__ */ b(p, { size: 13 }),
+								" ",
+								e.languages.length,
+								" lang",
+								e.languages.length === 1 ? "" : "s"
 							]
-						}, e.id)) })]
+						}) : null
+					]
+				}),
+				e.tags.length ? /* @__PURE__ */ b("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ x(S, {
+						variant: "secondary",
+						className: "text-[11px]",
+						children: [/* @__PURE__ */ b(v, {
+							size: 10,
+							className: "mr-1"
+						}), e]
+					}, e))
+				}) : null
+			]
+		})]
+	});
+}
+function j() {
+	let i = t(), { currentUser: g } = e(), v = g?.id, [y, S] = d("ALL"), [C, k] = d(""), { data: j, loading: M, error: N } = c({
+		status: "PUBLISHED",
+		...y === "ALL" ? {} : { difficulty: y }
+	}), { data: P } = l(v ? { learnerId: v } : {}), F = j?.tecListProblems.items ?? [], I = u(() => new Set((P?.tecListSubmissions.items ?? []).filter((e) => e.verdict === "ACCEPTED").map((e) => e.problemId)), [P]), L = F.filter((e) => I.has(e.id)).length, R = F.filter((e) => e.difficulty === "EASY").length, z = F.filter((e) => e.difficulty === "HARD").length, B = u(() => {
+		let e = C.trim().toLowerCase();
+		return e ? F.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : F;
+	}, [F, C]);
+	return /* @__PURE__ */ x(n, {
+		hero: !0,
+		title: "Coding Problems",
+		description: "Sharpen your problem-solving with runnable, judged challenges across topics and difficulty.",
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
+				children: [
+					/* @__PURE__ */ b(r, {
+						label: "Problems",
+						value: F.length,
+						icon: p
+					}),
+					/* @__PURE__ */ b(r, {
+						label: "Solved",
+						value: L,
+						icon: f
+					}),
+					/* @__PURE__ */ b(r, {
+						label: "Easy",
+						value: R,
+						icon: h
+					}),
+					/* @__PURE__ */ b(r, {
+						label: "Hard",
+						value: z,
+						icon: m
 					})
-				})
-			}) })
+				]
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ b(T, {
+					value: y,
+					onValueChange: (e) => S(e),
+					children: /* @__PURE__ */ b(E, { children: O.map((e) => /* @__PURE__ */ b(D, {
+						value: e.value,
+						children: e.label
+					}, e.value)) })
+				}), /* @__PURE__ */ x("div", {
+					className: "relative w-full sm:w-72",
+					children: [/* @__PURE__ */ b(_, {
+						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
+						size: 16
+					}), /* @__PURE__ */ b(w, {
+						className: "pl-9",
+						placeholder: "Search problems…",
+						value: C,
+						onChange: (e) => k(e.target.value)
+					})]
+				})]
+			}),
+			M && !F.length ? /* @__PURE__ */ b(s, {}) : N ? /* @__PURE__ */ b(o, {
+				title: "Couldn't load problems",
+				error: N
+			}) : B.length === 0 ? /* @__PURE__ */ b(a, {
+				icon: /* @__PURE__ */ b(p, { size: 26 }),
+				title: C || y !== "ALL" ? "No matching problems" : "No problems published yet",
+				description: C || y !== "ALL" ? "Try a different search or difficulty filter." : "Published problems will appear here. Check back soon — TechnoSpam is pre-launch."
+			}) : /* @__PURE__ */ b("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: B.map((e) => /* @__PURE__ */ b(A, {
+					problem: e,
+					solved: I.has(e.id),
+					onOpen: () => i(`/applications/problem-details-page?id=${e.id}`)
+				}, e.id))
+			})
 		]
 	});
 }
 //#endregion
-export { h as ApplicationsProblemsPagePage };
+export { j as ApplicationsProblemsPagePage };
 
 //# sourceMappingURL=ApplicationsProblemsPagePage.js.map

package/dist/technospam/pages/ApplicationsProblemsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationsProblemsPagePage.js","names":[],"sources":["../../../src/technospam/pages/ApplicationsProblemsPagePage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Badge,\n  Button,\n  Input,\n} from '@burdenoff/fe-libs/ui';\nimport { Search, Code, CheckCircle, BarChart3 } from 'lucide-react';\nimport { useTechnoSpamStore } from '../store/technospamStore';\n\ntype DifficultyFilter = 'all' | 'easy' | 'medium' | 'hard';\n\nexport function ApplicationsProblemsPagePage() {\n  const { problems, userStats } = useTechnoSpamStore();\n  const [searchTerm, setSearchTerm] = useState('');\n  const [difficultyFilter, setDifficultyFilter] = useState<DifficultyFilter>('all');\n\n  const filteredProblems = useMemo(() => {\n    return problems.filter((p) => {\n      const matchesSearch =\n        searchTerm === '' ||\n        p.title.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        p.category.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        p.tags.some((t) => t.toLowerCase().includes(searchTerm.toLowerCase()));\n      const matchesDifficulty = difficultyFilter === 'all' || p.difficulty === difficultyFilter;\n      return matchesSearch && matchesDifficulty;\n    });\n  }, [problems, searchTerm, difficultyFilter]);\n\n  const solvedCount = problems.filter((p) => p.isSolved).length;\n\n  const difficultyColor = (d: string) => {\n    switch (d) {\n      case 'easy':\n        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';\n      case 'medium':\n        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';\n      case 'hard':\n        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';\n      default:\n        return '';\n    }\n  };\n\n  const filters: { label: string; value: DifficultyFilter }[] = [\n    { label: 'All', value: 'all' },\n    { label: 'Easy', value: 'easy' },\n    { label: 'Medium', value: 'medium' },\n    { label: 'Hard', value: 'hard' },\n  ];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold text-foreground\">Coding Problems</h1>\n          <p className=\"text-sm text-muted-foreground\">\n            Practice and sharpen your problem-solving skills\n          </p>\n        </div>\n      </div>\n\n      {/* Stats */}\n      <div className=\"grid gap-4 md:grid-cols-3\">\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Total Problems</CardTitle>\n            <Code className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{problems.length}</div>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Solved</CardTitle>\n            <CheckCircle className=\"h-4 w-4 text-green-500\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{solvedCount}</div>\n            <p className=\"text-xs text-muted-foreground\">{userStats.problemsSolved} lifetime</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Acceptance Avg</CardTitle>\n            <BarChart3 className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">\n              {(problems.reduce((sum, p) => sum + p.acceptanceRate, 0) / problems.length).toFixed(\n                1\n              )}\n              %\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Filters */}\n      <Card>\n        <CardContent className=\"pt-6\">\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <div className=\"relative flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n              <Input\n                placeholder=\"Search problems, categories, tags...\"\n                value={searchTerm}\n                onChange={(e) => setSearchTerm(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n            <div className=\"flex gap-2\">\n              {filters.map((f) => (\n                <Button\n                  key={f.value}\n                  variant={difficultyFilter === f.value ? 'default' : 'outline'}\n                  size=\"sm\"\n                  onClick={() => setDifficultyFilter(f.value)}\n                >\n                  {f.label}\n                </Button>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Problems Table */}\n      <Card>\n        <CardContent className=\"pt-6\">\n          {filteredProblems.length === 0 ? (\n            <p className=\"py-8 text-center text-sm text-muted-foreground\">\n              No problems match your filters\n            </p>\n          ) : (\n            <div className=\"overflow-x-auto\">\n              <table className=\"w-full text-sm\">\n                <thead>\n                  <tr className=\"border-b text-left text-muted-foreground\">\n                    <th className=\"p-3 w-8\">#</th>\n                    <th className=\"p-3\">Title</th>\n                    <th className=\"p-3\">Category</th>\n                    <th className=\"p-3\">Difficulty</th>\n                    <th className=\"p-3\">Acceptance</th>\n                    <th className=\"p-3\">Company</th>\n                    <th className=\"p-3 text-right\">Status</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {filteredProblems.map((problem, idx) => (\n                    <tr key={problem.id} className=\"border-b hover:bg-muted/50\">\n                      <td className=\"p-3 text-muted-foreground\">{idx + 1}</td>\n                      <td className=\"p-3 font-medium\">{problem.title}</td>\n                      <td className=\"p-3 text-muted-foreground\">{problem.category}</td>\n                      <td className=\"p-3\">\n                        <span\n                          className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${difficultyColor(problem.difficulty)}`}\n                        >\n                          {problem.difficulty}\n                        </span>\n                      </td>\n                      <td className=\"p-3 text-muted-foreground\">{problem.acceptanceRate}%</td>\n                      <td className=\"p-3 text-muted-foreground\">{problem.company ?? '-'}</td>\n                      <td className=\"p-3 text-right\">\n                        {problem.isSolved ? (\n                          <CheckCircle className=\"ml-auto h-4 w-4 text-green-500\" />\n                        ) : (\n                          <span className=\"text-xs text-muted-foreground\">Unsolved</span>\n                        )}\n                      </td>\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ApplicationsProblemsPagePage.js","names":[],"sources":["../../../src/technospam/pages/ApplicationsProblemsPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { CheckCircle2, Code2, Flame, Gauge, Layers, Search, Tag, Trophy } from 'lucide-react';\nimport { Badge, GlassCard, Input, Tabs, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingGrid,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useProblemsQuery,\n  useSubmissionsQuery,\n  type TecProblem,\n  type TecProblemDifficulty,\n} from '../api/technospamApi';\n\nconst DIFFICULTIES: Array<{ value: 'ALL' | TecProblemDifficulty; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'EASY', label: 'Easy' },\n  { value: 'MEDIUM', label: 'Medium' },\n  { value: 'HARD', label: 'Hard' },\n];\n\n/** Deterministic token-based header gradient keyed off the problem topic/difficulty. */\nfunction coverGradient(seed: string): string {\n  const gradients = [\n    'from-accent-primary/25 to-accent-teal/20',\n    'from-accent-teal/25 to-accent-primary/15',\n    'from-status-success-bg-subtle to-accent-wash',\n    'from-accent-wash to-bg-sunken',\n  ];\n  let hash = 0;\n  for (let i = 0; i < seed.length; i += 1) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;\n  return gradients[hash % gradients.length]!;\n}\n\nfunction ProblemCard({\n  problem,\n  solved,\n  onOpen,\n}: {\n  problem: TecProblem;\n  solved: boolean;\n  onOpen: () => void;\n}) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <div\n        className={`relative flex h-20 items-end bg-gradient-to-br ${coverGradient(\n          problem.topic ?? problem.difficulty\n        )} p-4`}\n      >\n        <Code2 className=\"absolute right-3 top-3 text-text-muted/60\" size={18} />\n        {solved ? (\n          <span className=\"absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-success-text\">\n            <CheckCircle2 size={12} /> Solved\n          </span>\n        ) : null}\n        <StatusBadge status={problem.difficulty} kind=\"level\" />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {problem.title}\n          </h3>\n          {problem.statement ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{problem.statement}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {problem.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {problem.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Trophy size={13} /> {problem.points} pts\n          </span>\n          {problem.languages.length ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Code2 size={13} /> {problem.languages.length} lang\n              {problem.languages.length === 1 ? '' : 's'}\n            </span>\n          ) : null}\n        </div>\n        {problem.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {problem.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                <Tag size={10} className=\"mr-1\" />\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function ApplicationsProblemsPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n  const [difficulty, setDifficulty] = useState<'ALL' | TecProblemDifficulty>('ALL');\n  const [search, setSearch] = useState('');\n\n  const { data, loading, error } = useProblemsQuery({\n    status: 'PUBLISHED',\n    ...(difficulty !== 'ALL' ? { difficulty } : {}),\n  });\n  const { data: subsData } = useSubmissionsQuery(learnerId ? { learnerId } : {});\n\n  const problems = data?.tecListProblems.items ?? [];\n\n  const solvedSet = useMemo(\n    () =>\n      new Set(\n        (subsData?.tecListSubmissions.items ?? [])\n          .filter((s) => s.verdict === 'ACCEPTED')\n          .map((s) => s.problemId)\n      ),\n    [subsData]\n  );\n\n  const solvedCount = problems.filter((p) => solvedSet.has(p.id)).length;\n  const easyCount = problems.filter((p) => p.difficulty === 'EASY').length;\n  const hardCount = problems.filter((p) => p.difficulty === 'HARD').length;\n\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return problems;\n    return problems.filter(\n      (p) =>\n        p.title.toLowerCase().includes(q) ||\n        (p.topic ?? '').toLowerCase().includes(q) ||\n        p.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [problems, search]);\n\n  return (\n    <PageLayout\n      hero\n      title=\"Coding Problems\"\n      description=\"Sharpen your problem-solving with runnable, judged challenges across topics and difficulty.\"\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Problems\" value={problems.length} icon={Code2} />\n        <StatCard label=\"Solved\" value={solvedCount} icon={CheckCircle2} />\n        <StatCard label=\"Easy\" value={easyCount} icon={Gauge} />\n        <StatCard label=\"Hard\" value={hardCount} icon={Flame} />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs\n          value={difficulty}\n          onValueChange={(v) => setDifficulty(v as 'ALL' | TecProblemDifficulty)}\n        >\n          <TabsList>\n            {DIFFICULTIES.map((d) => (\n              <TabsTrigger key={d.value} value={d.value}>\n                {d.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder=\"Search problems…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n      </div>\n\n      {loading && !problems.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load problems\" error={error} />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<Code2 size={26} />}\n          title={\n            search || difficulty !== 'ALL' ? 'No matching problems' : 'No problems published yet'\n          }\n          description={\n            search || difficulty !== 'ALL'\n              ? 'Try a different search or difficulty filter.'\n              : 'Published problems will appear here. Check back soon — TechnoSpam is pre-launch.'\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((problem) => (\n            <ProblemCard\n              key={problem.id}\n              problem={problem}\n              solved={solvedSet.has(problem.id)}\n              onOpen={() => navigate(`/applications/problem-details-page?id=${problem.id}`)}\n            />\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}