Petru Paler
ce80fb1ede
- Add scripts/setup-db.ts to programmatically create missing PocketBase collections (period_logs, dailyLogs) with proper relation fields - Fix dark mode visibility across settings, login, calendar, and dashboard components by using semantic CSS tokens and dark: variants - Add db:setup npm script and document usage in AGENTS.md - Update vitest config to include scripts directory tests Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
// ABOUTME: Dashboard card displaying today's training decision.
|
|
// ABOUTME: Shows decision status, icon, and reason with color-coded backgrounds.
|
|
import type { Decision } from "@/types";
|
|
|
|
interface DecisionCardProps {
|
|
decision: Decision;
|
|
}
|
|
|
|
function getStatusColors(status: Decision["status"]): {
|
|
background: string;
|
|
text: string;
|
|
} {
|
|
switch (status) {
|
|
case "REST":
|
|
return {
|
|
background:
|
|
"bg-red-100 dark:bg-red-900/50 border-red-300 dark:border-red-700",
|
|
text: "text-red-700 dark:text-red-300",
|
|
};
|
|
case "GENTLE":
|
|
case "LIGHT":
|
|
case "REDUCED":
|
|
return {
|
|
background:
|
|
"bg-yellow-100 dark:bg-yellow-900/50 border-yellow-300 dark:border-yellow-700",
|
|
text: "text-yellow-700 dark:text-yellow-300",
|
|
};
|
|
case "TRAIN":
|
|
return {
|
|
background:
|
|
"bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700",
|
|
text: "text-green-700 dark:text-green-300",
|
|
};
|
|
default:
|
|
return { background: "border", text: "text-muted-foreground" };
|
|
}
|
|
}
|
|
|
|
export function DecisionCard({ decision }: DecisionCardProps) {
|
|
const colors = getStatusColors(decision.status);
|
|
|
|
return (
|
|
<div className={`rounded-lg p-6 ${colors.background}`}>
|
|
<div className="text-4xl mb-2">{decision.icon}</div>
|
|
<h2 className="text-2xl font-bold">{decision.status}</h2>
|
|
<p className={colors.text}>{decision.reason}</p>
|
|
</div>
|
|
);
|
|
}
|