-
Editors
-
- {stats.editors.slice(0, 4).map((editor, idx) => (
-
-
-
- {getLanguageIcon(editor.name)}
-
-
- {editor.name}
-
- {idx === 0 && (
-
- PRIMARY
-
- )}
-
-
- {formatHours(editor.total_seconds)}
-
-
- ))}
-
+
-
-
- Operating Systems
-
-
- {stats.operating_systems.slice(0, 4).map((os, idx) => (
-
-
-
- {getLanguageIcon(os.name)}
-
-
- {os.name}
-
- {idx === 0 && (
-
- MAIN
-
- )}
-
-
- {formatHours(os.total_seconds)}
-
-
- ))}
-
+
+
+
+
diff --git a/app/components/dashboard/widgets/CodingActivity.tsx b/app/components/dashboard/widgets/CodingActivity.tsx
new file mode 100644
index 0000000..bb61942
--- /dev/null
+++ b/app/components/dashboard/widgets/CodingActivity.tsx
@@ -0,0 +1,101 @@
+import { formatHours } from "@/app/utils/time";
+import {
+ AreaChart,
+ Area,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+} from "recharts";
+
+export default function CodingActivity({
+ dailyData,
+}: {
+ dailyData: { day: string; hours: number }[];
+}) {
+ return (
+ <>
+
+
+
Coding Activity
+ Last 7 days
+
+
+
+
+
+
+
+
+
+
+
+
+ `${val}h`}
+ />
+ [
+ formatHours((value as number) * 3600),
+ "Time",
+ ]}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/dashboard/widgets/Editors.tsx b/app/components/dashboard/widgets/Editors.tsx
new file mode 100644
index 0000000..eacf1e4
--- /dev/null
+++ b/app/components/dashboard/widgets/Editors.tsx
@@ -0,0 +1,38 @@
+import { formatHours } from "@/app/utils/time";
+import { getDevIcon } from "../../DevIcon";
+import { StatsData } from "../Stats";
+
+export default function Editors({ stats }: { stats: StatsData }) {
+ return (
+ <>
+
+
Editors
+
+ {stats.editors.slice(0, 4).map((editor, idx) => (
+
+
+
+ {getDevIcon(editor.name)}
+
+
+ {editor.name}
+
+ {idx === 0 && (
+
+ PRIMARY
+
+ )}
+
+
+ {formatHours(editor.total_seconds)}
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/app/components/dashboard/widgets/LanguageDestribution.tsx b/app/components/dashboard/widgets/LanguageDestribution.tsx
new file mode 100644
index 0000000..246b59d
--- /dev/null
+++ b/app/components/dashboard/widgets/LanguageDestribution.tsx
@@ -0,0 +1,80 @@
+import { formatHours } from "@/app/utils/time";
+import { Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+
+const CHART_COLORS = [
+ "#6366f1",
+ "#8b5cf6",
+ "#a78bfa",
+ "#c084fc",
+ "#22d3ee",
+ "#34d399",
+ "#fbbf24",
+ "#f87171",
+];
+
+export default function LanguageDestribution({
+ pieData,
+}: {
+ pieData: { name: string; value: number }[];
+}) {
+ return (
+ <>
+
+
+ Language Distribution
+
+
+
+
+
+ {pieData.map((_, index) => (
+ |
+ ))}
+
+ [formatHours(value as number), "Time"]}
+ />
+
+
+
+ {/* Legend */}
+
+ {pieData.map((entry, idx) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/components/dashboard/widgets/OperatingSystem.tsx b/app/components/dashboard/widgets/OperatingSystem.tsx
new file mode 100644
index 0000000..b4c069c
--- /dev/null
+++ b/app/components/dashboard/widgets/OperatingSystem.tsx
@@ -0,0 +1,37 @@
+import { formatHours } from "@/app/utils/time";
+import { getDevIcon } from "../../DevIcon";
+import { StatsData } from "../Stats";
+
+export default function OperatingSystem({ stats }: { stats: StatsData }) {
+ return (
+ <>
+
+
+ Operating Systems
+
+
+ {stats.operating_systems.slice(0, 4).map((os, idx) => (
+
+
+
+ {getDevIcon(os.name)}
+
+
+ {os.name}
+
+ {idx === 0 && (
+
+ MAIN
+
+ )}
+
+
+ {formatHours(os.total_seconds)}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/components/dashboard/widgets/Projects.tsx b/app/components/dashboard/widgets/Projects.tsx
new file mode 100644
index 0000000..c51c21f
--- /dev/null
+++ b/app/components/dashboard/widgets/Projects.tsx
@@ -0,0 +1,45 @@
+import { formatHours } from "@/app/utils/time";
+import { StatsData } from "../Stats";
+
+export default function Projects({ stats }: { stats: StatsData }) {
+ return (
+ <>
+ {stats.projects ? (
+ <>
+
+
Projects
+
+ {stats.projects.slice(0, 4).map((project, idx) => (
+
+
+
+
+ {project.name}
+
+ {idx === 0 && (
+
+ PRIMARY
+
+ )}
+
+
+ {formatHours(project.total_seconds)}
+
+
+ ))}
+
+
+
+ ) : (
+
+
+
No project data available.
+
+
+ )}
+
+ );
+}
diff --git a/app/components/dashboard/widgets/StatsCard.tsx b/app/components/dashboard/widgets/StatsCard.tsx
new file mode 100644
index 0000000..137bd11
--- /dev/null
+++ b/app/components/dashboard/widgets/StatsCard.tsx
@@ -0,0 +1,68 @@
+export interface StatCard {
+ label: string;
+ value: string;
+ sub: string;
+ trend: string;
+ trendUp: boolean;
+ color: string;
+ progress: number; // 0 to 100
+}
+
+export default function StatsCard({
+ statCards,
+ animated,
+ setAnimated,
+}: {
+ statCards: StatCard[];
+ animated: boolean;
+ setAnimated: (val: boolean) => void;
+}) {
+ return (
+ <>
+
+ {statCards.map((card, idx) => (
+
+
+
+ {card.label}
+
+
+ {card.trend}
+
+
+
{card.value}
+
{card.sub}
+ {/* Mini bar */}
+
{
+ setAnimated(false);
+ setTimeout(() => setAnimated(true), 10);
+ }}
+ >
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/app/utils/time.ts b/app/utils/time.ts
new file mode 100644
index 0000000..3547fd9
--- /dev/null
+++ b/app/utils/time.ts
@@ -0,0 +1,8 @@
+export const formatHours = (seconds: number) => {
+ const safeSeconds = Number.isFinite(seconds) ? Math.max(0, seconds) : 0;
+ const totalMinutes = Math.round(safeSeconds / 60);
+ const hrs = Math.floor(totalMinutes / 60);
+ const mins = totalMinutes % 60;
+ if (hrs > 0) return `${hrs}h ${mins}m`;
+ return `${mins}m`;
+};
diff --git a/sql/user_projects.sql b/sql/user_projects.sql
new file mode 100644
index 0000000..93a53c7
--- /dev/null
+++ b/sql/user_projects.sql
@@ -0,0 +1,23 @@
+/* ---- User Projects Stats ----- */
+create table public.user_projects (
+ user_id uuid primary key references auth.users(id) on delete cascade,
+ projects jsonb not null,
+ last_fetched_at timestamp with time zone default now()
+);
+
+alter table public.user_projects enable row level security;
+
+create policy "Users can view their own projects"
+on public.user_projects
+for select
+using (auth.uid() = user_id);
+
+create policy "Users can insert their own projects"
+on public.user_projects
+for insert
+with check (auth.uid() = user_id);
+
+create policy "Users can update their own projects"
+on public.user_projects
+for update
+using (auth.uid() = user_id);