add: a project progress tracker

.tokeignore

@@ -9,5 +9,5 @@ MiSans.css
 *.yaml
 *.yml
 *.mdx
-packages/solid/src/drizzle/cred
-packages/solid/src/drizzle/main
+packages/core/drizzle/cred
+packages/core/drizzle/main

packages/tracker/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

packages/tracker/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+.env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+
+docs_llm
+
+data/

packages/tracker/.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

packages/tracker/.tokeignore

@@ -0,0 +1 @@
+app/components/ui

packages/tracker/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

packages/tracker/app/admin/users.tsx

@@ -0,0 +1,367 @@
+import type { Route } from "./+types/users";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { ArrowLeft, Plus, Trash2, Edit, Shield, ShieldOff, UserPlus } from "lucide-react";
+import { Link, Form } from "react-router";
+import { db } from "@lib/db";
+import { users } from "@lib/db/schema";
+import { getCurrentUser } from "@lib/auth-utils";
+import Layout from "@/components/layout";
+import { eq } from "drizzle-orm";
+import { hashPassword } from "@lib/auth";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { generate as generateId } from "@alikia/random-key";
+import { Checkbox } from "@/components/ui/checkbox";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "User Management - Admin" },
+		{ name: "description", content: "Manage users and permissions" }
+	];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const user = await getCurrentUser(request);
+	if (!user || !user.isAdmin) {
+		throw new Response("You do not have permission to view this page", { status: 403 });
+	}
+
+	// Fetch all users
+	const allUsers = await db.select().from(users).orderBy(users.createdAt);
+
+	return { users: allUsers, currentUser: user };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const user = await getCurrentUser(request);
+	if (!user || !user.isAdmin) {
+		throw new Response("You do not have permission to view this page", { status: 403 });
+	}
+
+	const formData = await request.formData();
+	const intent = formData.get("intent");
+	const userId = formData.get("userId") as string;
+
+	if (intent === "toggleAdmin") {
+		const targetUser = await db.select().from(users).where(eq(users.id, userId)).get();
+		if (!targetUser) {
+			return { error: "User not found" };
+		}
+
+		// Prevent self-demotion
+		if (targetUser.id === user.id) {
+			return { error: "Cannot change your own admin status" };
+		}
+
+		await db
+			.update(users)
+			.set({ isAdmin: !targetUser.isAdmin })
+			.where(eq(users.id, userId));
+
+		return { success: true };
+	}
+
+	if (intent === "deleteUser") {
+		const targetUser = await db.select().from(users).where(eq(users.id, userId)).get();
+		if (!targetUser) {
+			return { error: "User not found" };
+		}
+
+		// Prevent self-deletion
+		if (targetUser.id === user.id) {
+			return { error: "Cannot delete your own account" };
+		}
+
+		// Prevent deleting admin users
+		if (targetUser.isAdmin) {
+			return { error: "Cannot delete admin users" };
+		}
+
+		await db.delete(users).where(eq(users.id, userId));
+
+		return { success: true };
+	}
+
+	if (intent === "createUser") {
+		const username = formData.get("username") as string;
+		const password = formData.get("password") as string;
+		const isAdmin = formData.get("isAdmin") === "on";
+
+		if (!username || !password) {
+			return { error: "Username and password are required" };
+		}
+
+		// Check if username already exists
+		const existingUser = await db.select().from(users).where(eq(users.username, username)).get();
+		if (existingUser) {
+			return { error: "Username already exists" };
+		}
+
+		const hashedPassword = await hashPassword(password);
+		await db.insert(users).values({
+			id: await generateId(6),
+			username,
+			password: hashedPassword,
+			isAdmin,
+			createdAt: new Date(),
+			updatedAt: new Date()
+		});
+
+		return { success: true };
+	}
+
+	if (intent === "updateUser") {
+		const username = formData.get("username") as string;
+		const password = formData.get("password") as string;
+		const isAdmin = formData.get("isAdmin") === "on";
+
+		if (!username) {
+			return { error: "Username is required" };
+		}
+
+		const targetUser = await db.select().from(users).where(eq(users.id, userId)).get();
+		if (!targetUser) {
+			return { error: "User not found" };
+		}
+
+		// Check if username already exists (excluding current user)
+		const existingUser = await db.select().from(users).where(eq(users.username, username)).get();
+		if (existingUser && existingUser.id !== userId) {
+			return { error: "Username already exists" };
+		}
+
+		const updateData: any = {
+			username,
+			isAdmin,
+		};
+
+		// Only update password if provided
+		if (password) {
+			updateData.password = await hashPassword(password);
+		}
+
+		await db
+			.update(users)
+			.set(updateData)
+			.where(eq(users.id, userId));
+
+		return { success: true };
+	}
+
+	return { error: "Unknown action" };
+}
+
+export default function UserManagement({ loaderData }: Route.ComponentProps) {
+	const { users, currentUser } = loaderData;
+
+	return (
+		<Layout>
+			{/* Header */}
+			<div className="max-sm:flex-col max-sm:gap-6 flex sm:items-center justify-between mb-8">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">User Management</h1>
+					<p className="text-muted-foreground mt-2">Manage users and their permissions</p>
+				</div>
+				<div className="flex gap-2">
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button>
+								<UserPlus className="size-4.5 mr-1" />
+								Add User
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Add New User</DialogTitle>
+								<DialogDescription>
+									Create a new user account with username and password.
+								</DialogDescription>
+							</DialogHeader>
+							<Form method="post">
+								<input type="hidden" name="intent" value="createUser" />
+								<div className="grid gap-4 py-4">
+									<div className="grid gap-2">
+										<Label htmlFor="username">Username</Label>
+										<Input
+											id="username"
+											name="username"
+											placeholder="Enter username"
+											required
+										/>
+									</div>
+									<div className="grid gap-2">
+										<Label htmlFor="password">Password</Label>
+										<Input
+											id="password"
+											name="password"
+											type="password"
+											placeholder="Enter password"
+											required
+										/>
+									</div>
+									<div className="flex items-center gap-2">
+										<Checkbox
+											id="isAdmin"
+											name="isAdmin"
+											className="rounded border-gray-300"
+										/>
+										<Label htmlFor="isAdmin">Admin User</Label>
+									</div>
+								</div>
+								<DialogFooter>
+									<Button type="submit">Create User</Button>
+								</DialogFooter>
+							</Form>
+						</DialogContent>
+					</Dialog>
+					<Button variant="outline" asChild>
+						<Link to="/">
+							<ArrowLeft className="size-4.5 mr-1" />
+							Back to Projects
+						</Link>
+					</Button>
+				</div>
+			</div>
+
+			{/* Users Table */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Users</CardTitle>
+					<CardDescription>Manage user accounts and permissions</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Username</TableHead>
+								<TableHead>Admin</TableHead>
+								<TableHead>Created</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{users.map((user) => (
+								<TableRow key={user.id}>
+									<TableCell className="font-medium">{user.username}</TableCell>
+									<TableCell>
+										{user.isAdmin ? (
+											<Badge variant="default">Admin</Badge>
+										) : (
+											<Badge variant="secondary">User</Badge>
+										)}
+									</TableCell>
+									<TableCell>
+										{new Date(user.createdAt).toLocaleDateString()}
+									</TableCell>
+									<TableCell>
+										<div className="flex gap-2">
+											<Dialog>
+												<DialogTrigger asChild>
+													<Button variant="outline" size="sm">
+														<Edit className="size-4 mr-1" />
+														Edit
+													</Button>
+												</DialogTrigger>
+												<DialogContent>
+													<DialogHeader>
+														<DialogTitle>Edit User</DialogTitle>
+														<DialogDescription>
+															Update user information and permissions.
+														</DialogDescription>
+													</DialogHeader>
+													<Form method="post">
+														<input type="hidden" name="userId" value={user.id} />
+														<input type="hidden" name="intent" value="updateUser" />
+														<div className="grid gap-4 py-4">
+															<div className="grid gap-2">
+																<Label htmlFor={`username-${user.id}`}>Username</Label>
+																<Input
+																	id={`username-${user.id}`}
+																	name="username"
+																	defaultValue={user.username}
+																	placeholder="Enter username"
+																	required
+																/>
+															</div>
+															<div className="grid gap-2">
+																<Label htmlFor={`password-${user.id}`}>New Password</Label>
+																<Input
+																	id={`password-${user.id}`}
+																	name="password"
+																	type="password"
+																	placeholder="Leave blank to keep current password"
+																/>
+															</div>
+															<div className="flex items-center gap-2">
+																<input
+																	type="checkbox"
+																	id={`isAdmin-${user.id}`}
+																	name="isAdmin"
+																	defaultChecked={user.isAdmin || false}
+																	className="rounded border-gray-300"
+																	disabled={user.id === currentUser.id}
+																/>
+																<Label htmlFor={`isAdmin-${user.id}`}>Admin User</Label>
+																{user.id === currentUser.id && (
+																	<span className="text-xs text-muted-foreground">(Cannot change your own admin status)</span>
+																)}
+															</div>
+														</div>
+														<DialogFooter>
+															<Button type="submit">Update User</Button>
+														</DialogFooter>
+													</Form>
+												</DialogContent>
+											</Dialog>
+											<Form method="post">
+												<input type="hidden" name="userId" value={user.id} />
+												<input type="hidden" name="intent" value="toggleAdmin" />
+												<Button
+													type="submit"
+													variant="outline"
+													size="sm"
+													disabled={user.id === currentUser.id} // Prevent self-demotion
+												>
+													{user.isAdmin ? (
+														<ShieldOff className="size-4 mr-1" />
+													) : (
+														<Shield className="size-4 mr-1" />
+													)}
+													{user.isAdmin ? "Remove Admin" : "Make Admin"}
+												</Button>
+											</Form>
+											<Form method="post">
+												<input type="hidden" name="userId" value={user.id} />
+												<input type="hidden" name="intent" value="deleteUser" />
+												<Button
+													type="submit"
+													variant="destructive"
+													size="sm"
+													disabled={user.isAdmin || user.id === currentUser.id} // Prevent deleting admin or self
+												>
+													<Trash2 className="size-4 mr-1" />
+													Delete
+												</Button>
+											</Form>
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</Layout>
+	);
+}

packages/tracker/app/app.css

@@ -0,0 +1,201 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+	--font-sans:
+		"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+}
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.1448 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.1448 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.1448 0 0);
+	--primary: oklch(0 0 0);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.9702 0 0);
+	--secondary-foreground: oklch(0.2046 0 0);
+	--muted: oklch(0.9702 0 0);
+	--muted-foreground: oklch(0.5486 0 0);
+	--accent: oklch(0.9702 0 0);
+	--accent-foreground: oklch(0.2046 0 0);
+	--destructive: oklch(0.583 0.2387 28.4765);
+	--destructive-foreground: oklch(0.9702 0 0);
+	--border: oklch(0.9219 0 0);
+	--input: oklch(0.9219 0 0);
+	--ring: oklch(0.709 0 0);
+	--chart-1: oklch(0.5555 0 0);
+	--chart-2: oklch(0.5555 0 0);
+	--chart-3: oklch(0.5555 0 0);
+	--chart-4: oklch(0.5555 0 0);
+	--chart-5: oklch(0.5555 0 0);
+	--sidebar: oklch(0.9851 0 0);
+	--sidebar-foreground: oklch(0.1448 0 0);
+	--sidebar-primary: oklch(0.2046 0 0);
+	--sidebar-primary-foreground: oklch(0.9851 0 0);
+	--sidebar-accent: oklch(0.9702 0 0);
+	--sidebar-accent-foreground: oklch(0.2046 0 0);
+	--sidebar-border: oklch(0.9219 0 0);
+	--sidebar-ring: oklch(0.709 0 0);
+	--font-sans: Geist Mono, monospace;
+	--font-serif: Geist Mono, monospace;
+	--font-mono: Geist Mono, monospace;
+	--radius: 0rem;
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 0px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0;
+	--shadow-color: hsl(0 0% 0%);
+	--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+	--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+	--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
+	--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
+	--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
+	--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
+	--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
+	--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: oklch(0.1448 0 0);
+		--foreground: oklch(0.9851 0 0);
+		--card: oklch(0.2134 0 0);
+		--card-foreground: oklch(0.9851 0 0);
+		--popover: oklch(0.2686 0 0);
+		--popover-foreground: oklch(0.9851 0 0);
+		--primary: oklch(1 0 0);
+		--primary-foreground: oklch(0 0 0);
+		--secondary: oklch(0.2686 0 0);
+		--secondary-foreground: oklch(0.9851 0 0);
+		--muted: oklch(0.2686 0 0);
+		--muted-foreground: oklch(0.709 0 0);
+		--accent: oklch(0.3715 0 0);
+		--accent-foreground: oklch(0.9851 0 0);
+		--destructive: oklch(0.7022 0.1892 22.2279);
+		--destructive-foreground: oklch(0.2686 0 0);
+		--border: oklch(0.3407 0 0);
+		--input: oklch(0.4386 0 0);
+		--ring: oklch(0.5555 0 0);
+		--chart-1: oklch(0.5555 0 0);
+		--chart-2: oklch(0.5555 0 0);
+		--chart-3: oklch(0.5555 0 0);
+		--chart-4: oklch(0.5555 0 0);
+		--chart-5: oklch(0.5555 0 0);
+		--sidebar: oklch(0.2046 0 0);
+		--sidebar-foreground: oklch(0.9851 0 0);
+		--sidebar-primary: oklch(0.9851 0 0);
+		--sidebar-primary-foreground: oklch(0.2046 0 0);
+		--sidebar-accent: oklch(0.2686 0 0);
+		--sidebar-accent-foreground: oklch(0.9851 0 0);
+		--sidebar-border: oklch(1 0 0);
+		--sidebar-ring: oklch(0.4386 0 0);
+		--font-sans: Geist Mono, monospace;
+		--font-serif: Geist Mono, monospace;
+		--font-mono: Geist Mono, monospace;
+		--radius: 0rem;
+		--shadow-x: 0px;
+		--shadow-y: 1px;
+		--shadow-blur: 0px;
+		--shadow-spread: 0px;
+		--shadow-opacity: 0;
+		--shadow-color: hsl(0 0% 0%);
+		--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+		--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+		--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
+		--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
+		--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
+		--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
+		--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
+		--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
+	}
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+}
+
+.dark {
+	--sidebar:
+		hsl(240 5.9% 10%);
+	--sidebar-foreground:
+		hsl(240 4.8% 95.9%);
+	--sidebar-primary:
+		hsl(224.3 76.3% 48%);
+	--sidebar-primary-foreground:
+		hsl(0 0% 100%);
+	--sidebar-accent:
+		hsl(240 3.7% 15.9%);
+	--sidebar-accent-foreground:
+		hsl(240 4.8% 95.9%);
+	--sidebar-border:
+		hsl(240 3.7% 15.9%);
+	--sidebar-ring:
+		hsl(217.2 91.2% 59.8%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+	}
+  body {
+    @apply bg-background text-foreground;
+	}
+}

packages/tracker/app/components/column/ColumnDialog.tsx

@@ -0,0 +1,144 @@
+import { use, useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Trash2 } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from "@/components/ui/select";
+
+interface ColumnDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSubmit: (data: { name: string; position?: number }) => Promise<void>;
+	onDelete?: () => void;
+	columns: number;
+	initialData?: {
+		name?: string;
+		position?: number;
+	};
+	isEditing?: boolean;
+}
+
+export function ColumnDialog({
+	open,
+	onOpenChange,
+	onSubmit,
+	onDelete,
+	initialData,
+	columns,
+	isEditing = false
+}: ColumnDialogProps) {
+	const [name, setName] = useState(initialData?.name || "");
+	const [position, setPosition] = useState(initialData?.position?.toString() || "0");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	useEffect(() => {
+		if (initialData?.name) {
+			setName(initialData.name);
+		}
+		if (initialData?.position !== undefined) {
+			setPosition(initialData.position.toString());
+		}
+	}, [initialData?.name, initialData?.position, setName]);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!name.trim()) return;
+
+		setIsSubmitting(true);
+		try {
+			await onSubmit({
+				name: name.trim(),
+				position: parseInt(position) || 0
+			});
+			onOpenChange(false);
+			// Reset form
+			setName("");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const handleDelete = () => {
+		if (!onDelete) {
+			return;
+		}
+		setIsSubmitting(true);
+		try {
+			onDelete();
+			onOpenChange(false);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>{isEditing ? "Edit Column" : "Create New Column"}</DialogTitle>
+				</DialogHeader>
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div className="space-y-2">
+						<Label htmlFor="name">Column Name</Label>
+						<Input
+							id="name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							placeholder="Enter column name"
+							required
+						/>
+					</div>
+					{isEditing && (
+						<div className="space-y-2">
+							<Label htmlFor="position">Position</Label>
+							<Select value={position} onValueChange={setPosition}>
+								<SelectTrigger>
+									<SelectValue placeholder="Select column" />
+								</SelectTrigger>
+								<SelectContent>
+									{Array.from({ length: columns }, (_, index) => (
+										<SelectItem key={index} value={index.toString()}>
+											{index + 1}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					)}
+
+					<div className="max-sm: flex justify-between pt-4">
+						<div>
+							{isEditing && onDelete && (
+								<Button
+									type="button"
+									variant="destructive"
+									onClick={handleDelete}
+									disabled={isSubmitting}
+								>
+									<Trash2 className="w-4 h-4 mr-2" />
+									Delete
+								</Button>
+							)}
+						</div>
+						<div className="flex gap-2">
+							<Button type="submit" disabled={isSubmitting || !name.trim()}>
+								{isSubmitting
+									? "Saving..."
+									: isEditing
+										? "Save Changes"
+										: "Create Column"}
+							</Button>
+						</div>
+					</div>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

packages/tracker/app/components/layout.tsx

@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen bg-background">
+			<div className="container mx-auto px-6 my-16 xl:px-15">{children}</div>
+		</div>
+	);
+}

packages/tracker/app/components/project/ProjectDialog.tsx

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface ProjectDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSubmit: (data: {
+		name: string;
+		description: string;
+		isPublic: boolean;
+	}) => void;
+	onDelete?: () => void;
+	initialData?: {
+		name: string;
+		description: string;
+		isPublic?: boolean;
+	};
+	isEditing?: boolean;
+}
+
+export function ProjectDialog({
+	open,
+	onOpenChange,
+	onSubmit,
+	onDelete,
+	initialData,
+	isEditing = false,
+}: ProjectDialogProps) {
+	const [name, setName] = useState(initialData?.name || "");
+	const [description, setDescription] = useState(initialData?.description || "");
+	const [isPublic, setIsPublic] = useState(initialData?.isPublic || false);
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		onSubmit({
+			name,
+			description,
+			isPublic,
+		});
+		onOpenChange(false);
+		// Reset form
+		if (!isEditing) {
+			setName("");
+			setDescription("");
+		}
+	};
+
+	const handleOpenChange = (open: boolean) => {
+		onOpenChange(open);
+		if (!open && !isEditing) {
+			// Reset form when closing dialog in create mode
+			setName("");
+			setDescription("");
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="sm:max-w-[425px]">
+				<form onSubmit={handleSubmit}>
+					<DialogHeader>
+						<DialogTitle>
+							{isEditing ? "Edit Project" : "Create Project"}
+						</DialogTitle>
+						<DialogDescription>
+							{isEditing 
+								? "Update your project details." 
+								: "Create a new project to organize your tasks."
+							}
+						</DialogDescription>
+					</DialogHeader>
+					<div className="grid gap-4 py-4">
+						<div className="grid gap-2">
+							<Label htmlFor="name">Project Name</Label>
+							<Input
+								id="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Enter project name"
+								required
+							/>
+						</div>
+						<div className="grid gap-2">
+							<Label htmlFor="description">Description</Label>
+							<Textarea
+								id="description"
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+								placeholder="Enter project description (optional)"
+								rows={3}
+							/>
+						</div>
+						<div className="flex items-center gap-2">
+							<Checkbox
+								id="isPublic"
+								checked={isPublic}
+								onCheckedChange={(c: boolean) => setIsPublic(c)}
+								className="rounded border-gray-300"
+							/>
+							<Label htmlFor="isPublic">Public Project</Label>
+						</div>
+					</div>
+					<DialogFooter className="flex justify-between">
+						<div>
+							{isEditing && onDelete && (
+								<Button
+									type="button"
+									variant="destructive"
+									onClick={() => {
+										onDelete();
+										onOpenChange(false);
+									}}
+								>
+									Delete Project
+								</Button>
+							)}
+						</div>
+						<div className="flex gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => onOpenChange(false)}
+							>
+								Cancel
+							</Button>
+							<Button type="submit">
+								{isEditing ? "Update" : "Create"}
+							</Button>
+						</div>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

packages/tracker/app/components/project/UserSearch.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { UserPlus, Search, X } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+
+
+export function UserSearchModal({
+	availableUsers,
+	projectId
+}: {
+	availableUsers: Array<{ id: string; username: string }>;
+	projectId: string;
+}) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [selectedUserId, setSelectedUserId] = useState<string>("");
+	const [canEdit, setCanEdit] = useState(false);
+
+	const filteredUsers = availableUsers.filter((user) =>
+		user.username.toLowerCase().includes(searchTerm.toLowerCase())
+	);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!selectedUserId) return;
+
+		const formData = new FormData();
+		formData.append("intent", "addUser");
+		formData.append("userId", selectedUserId);
+		formData.append("canEdit", canEdit ? "on" : "");
+
+		try {
+			const response = await fetch(`/project/${projectId}/settings`, {
+				method: "POST",
+				body: formData
+			});
+
+			if (response.ok) {
+				setIsOpen(false);
+				setSelectedUserId("");
+				setSearchTerm("");
+				setCanEdit(false);
+				// Reload the page to show updated permissions
+				window.location.reload();
+			} else {
+				const result = await response.json();
+				alert(result.error || "Failed to add user");
+			}
+		} catch (error) {
+			console.error("Error adding user:", error);
+			alert("Failed to add user");
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="w-80 justify-start">
+					<Search className="size-4 mr-2" />
+					{selectedUserId
+						? availableUsers.find((u) => u.id === selectedUserId)?.username
+						: "Search and select user..."}
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Add User to Project</DialogTitle>
+					<DialogDescription>Search for a user to add to this project</DialogDescription>
+				</DialogHeader>
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div className="space-y-2">
+						<Label htmlFor="search">Search Users</Label>
+						<div className="flex gap-2">
+							<Input
+								id="search"
+								type="text"
+								placeholder="Type to search users..."
+								value={searchTerm}
+								onChange={(e) => setSearchTerm(e.target.value)}
+								className="flex-1"
+							/>
+							{searchTerm && (
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									onClick={() => setSearchTerm("")}
+								>
+									<X className="size-4" />
+								</Button>
+							)}
+						</div>
+					</div>
+
+					{filteredUsers.length > 0 && (
+						<div className="space-y-2 max-h-60 overflow-y-auto">
+							<Label>Select User</Label>
+							<div className="space-y-1">
+								{filteredUsers.map((user) => (
+									<div
+										key={user.id}
+										className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+											selectedUserId === user.id
+												? "bg-primary/10 border-primary"
+												: "hover:bg-muted"
+										}`}
+										onClick={() => setSelectedUserId(user.id)}
+									>
+										<div className="flex-1">
+											<div className="font-medium">{user.username}</div>
+										</div>
+										{selectedUserId === user.id && (
+											<div className="text-primary">✓</div>
+										)}
+									</div>
+								))}
+							</div>
+						</div>
+					)}
+
+					{filteredUsers.length === 0 && searchTerm && (
+						<div className="text-center text-muted-foreground py-4">
+							No users found matching "{searchTerm}"
+						</div>
+					)}
+
+					{selectedUserId && (
+						<div className="space-y-4 pt-4 border-t">
+							<div className="flex items-center gap-2">
+								<Checkbox
+									id="canEdit"
+									checked={canEdit}
+									onCheckedChange={(checked) => setCanEdit(checked === true)}
+								/>
+								<Label htmlFor="canEdit">Can Edit</Label>
+							</div>
+
+							<div className="flex gap-2">
+								<Button type="submit" className="flex-1" disabled={!selectedUserId}>
+									<UserPlus className="size-4 mr-2" />
+									Add User
+								</Button>
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => setIsOpen(false)}
+								>
+									Cancel
+								</Button>
+							</div>
+						</div>
+					)}
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

packages/tracker/app/components/task/TaskDialog.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { TaskForm } from "./TaskForm";
+
+interface TaskDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	projectId: string;
+	columns: Array<{ id: string; name: string }>;
+	onDelete: () => Promise<void>;
+	onSubmit: (data: {
+		title: string;
+		description: string;
+		columnId: string;
+		priority: "low" | "medium" | "high";
+		dueDate?: Date;
+	}) => Promise<void>;
+	initialData?: {
+		title?: string;
+		description?: string;
+		columnId?: string;
+		priority?: "low" | "medium" | "high";
+		dueDate?: Date;
+	};
+	isEditing?: boolean;
+	canEdit?: boolean;
+}
+
+export function TaskDialog({
+	open,
+	onOpenChange,
+	columns,
+	onSubmit,
+	onDelete,
+	initialData,
+	isEditing = false,
+	canEdit = true
+}: TaskDialogProps) {
+	const handleSubmit = async (data: {
+		title: string;
+		description: string;
+		columnId: string;
+		priority: "low" | "medium" | "high";
+		dueDate?: Date;
+	}) => {
+		try {
+			await onSubmit(data);
+			onOpenChange(false);
+		} finally {
+		}
+	};
+
+	const handleDelete = async () => {
+		try {
+			await onDelete();
+			onOpenChange(false);
+		} finally {
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>
+						{!canEdit ? "View Task" : isEditing ? "Edit Task" : "Create New Task"}
+					</DialogTitle>
+				</DialogHeader>
+				<TaskForm
+					columns={columns}
+					onSubmit={handleSubmit}
+					onDelete={handleDelete}
+					initialData={initialData}
+					isEditing={isEditing}
+					canEdit={canEdit}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+}

packages/tracker/app/components/task/TaskForm.tsx

@@ -0,0 +1,249 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from "@/components/ui/select";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CalendarIcon, Trash2, X, Flag } from "lucide-react";
+import { format } from "date-fns";
+import { cn } from "@/lib/utils";
+
+interface TaskFormProps {
+	columns: Array<{ id: string; name: string }>;
+	onSubmit: (data: {
+		title: string;
+		description: string;
+		columnId: string;
+		priority: "low" | "medium" | "high";
+		dueDate?: Date;
+	}) => Promise<void>;
+	onDelete: () => void;
+	initialData?: {
+		title?: string;
+		description?: string;
+		columnId?: string;
+		priority?: "low" | "medium" | "high";
+		dueDate?: Date;
+	};
+	isEditing?: boolean;
+	canEdit?: boolean;
+}
+
+export function TaskForm({
+	columns,
+	onSubmit,
+	onDelete,
+	initialData,
+	isEditing = false,
+	canEdit = true
+}: TaskFormProps) {
+	const [title, setTitle] = useState(initialData?.title || "");
+	const [description, setDescription] = useState(initialData?.description || "");
+	const [columnId, setColumnId] = useState(initialData?.columnId || columns[0]?.id || "");
+	const [priority, setPriority] = useState<"low" | "medium" | "high">(
+		initialData?.priority || "medium"
+	);
+	const [dueDate, setDueDate] = useState<Date | undefined>(initialData?.dueDate);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const currentColumn = columns.find((col) => col.id === columnId);
+	const priorityLabel = { low: "Low", medium: "Medium", high: "High" }[priority];
+	const priorityColor = {
+		low: "bg-green-100 text-green-800",
+		medium: "bg-yellow-100 text-yellow-800",
+		high: "bg-red-100 text-red-800"
+	}[priority];
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!title.trim() || !columnId) {
+			return;
+		}
+
+		setIsSubmitting(true);
+		try {
+			await onSubmit({
+				title: title.trim(),
+				description: description.trim(),
+				columnId,
+				priority,
+				dueDate
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<div className="space-y-2">
+				<label htmlFor="title" className="text-sm font-medium">
+					Task Title *
+				</label>
+				{canEdit ? (
+					<Input
+						id="title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						placeholder="Enter task title"
+						required
+						className="w-full"
+					/>
+				) : (
+					<div className="p-3 bg-background border rounded-md text-foreground">
+						{title || <span className="text-muted-foreground">No title</span>}
+					</div>
+				)}
+			</div>
+
+			<div className="space-y-2">
+				<label htmlFor="description" className="text-sm font-medium">
+					Description
+				</label>
+				{canEdit ? (
+					<Textarea
+						id="description"
+						value={description}
+						onChange={(e) => setDescription(e.target.value)}
+						placeholder="Describe the task (optional)"
+						rows={3}
+						className="w-full max-h-60"
+					/>
+				) : (
+					<div className="p-3 bg-background border rounded-md text-foreground min-h-[80px]">
+						{description || (
+							<span className="text-muted-foreground">No description</span>
+						)}
+					</div>
+				)}
+			</div>
+
+			<div className="grid grid-cols-2 gap-4">
+				<div className="space-y-2">
+					<label htmlFor="column" className="text-sm font-medium">
+						Column *
+					</label>
+					{canEdit ? (
+						<Select value={columnId} onValueChange={setColumnId}>
+							<SelectTrigger>
+								<SelectValue placeholder="Select column" />
+							</SelectTrigger>
+							<SelectContent>
+								{columns.map((column) => (
+									<SelectItem key={column.id} value={column.id}>
+										{column.name}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					) : (
+						<div className="h-12 px-4 flex items-center bg-background border rounded-md text-foreground">
+							{currentColumn?.name || (
+								<span className="text-muted-foreground">No column</span>
+							)}
+						</div>
+					)}
+				</div>
+
+				<div className="space-y-2">
+					<label htmlFor="priority" className="text-sm font-medium">
+						Priority
+					</label>
+					{canEdit ? (
+						<Select
+							value={priority}
+							onValueChange={(value: "low" | "medium" | "high") => setPriority(value)}
+						>
+							<SelectTrigger>
+								<SelectValue placeholder="Select priority" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="low">Low</SelectItem>
+								<SelectItem value="medium">Medium</SelectItem>
+								<SelectItem value="high">High</SelectItem>
+							</SelectContent>
+						</Select>
+					) : (
+						<div className="h-12 px-4 justify-between bg-background border rounded-md flex items-center gap-2">
+							<Flag className="w-4 h-4" />
+							<span className={`px-2 py-0.5 rounded-md text-xs font-medium ${priorityColor}`}>
+								{priorityLabel}
+							</span>
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="space-y-2">
+				<label className="text-sm font-medium">Due Date</label>
+				{canEdit ? (
+					<Popover>
+						<PopoverTrigger asChild>
+							<Button
+								variant="outline"
+								className={cn(
+									"w-full justify-start text-left font-normal",
+									!dueDate && "text-muted-foreground"
+								)}
+							>
+								<CalendarIcon className="mr-2 h-4 w-4" />
+								{dueDate ? format(dueDate, "PPP") : "Pick a date"}
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-auto p-0" align="start">
+							<Calendar mode="single" selected={dueDate} onSelect={setDueDate} />
+							{dueDate && (
+								<div className="p-3 border-t">
+									<Button
+										variant="ghost"
+										size="sm"
+										className="w-full"
+										onClick={() => setDueDate(undefined)}
+									>
+										<X className="w-4 h-4 mr-2" />
+										Clear date
+									</Button>
+								</div>
+							)}
+						</PopoverContent>
+					</Popover>
+				) : (
+					<div className="p-3 bg-background border rounded-md flex items-center text-foreground">
+						<CalendarIcon className="mr-2 h-4 w-4 text-muted-foreground" />
+						{dueDate ? (
+							format(dueDate, "PPP")
+						) : (
+							<span className="text-muted-foreground">No due date</span>
+						)}
+					</div>
+				)}
+			</div>
+			{canEdit && (
+				<div className="flex gap-2 pt-4">
+					{isEditing && (
+						<Button
+							type="button"
+							variant="destructive"
+							onClick={onDelete}
+							disabled={isSubmitting}
+						>
+							<Trash2 className="w-4 h-4 mr-2" />
+							Delete
+						</Button>
+					)}
+					<Button type="submit" disabled={isSubmitting || !title.trim() || !columnId}>
+						{isSubmitting ? "Saving..." : isEditing ? "Update Task" : "Create Task"}
+					</Button>
+				</div>
+			)}
+		</form>
+	);
+}

packages/tracker/app/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

packages/tracker/app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

packages/tracker/app/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

packages/tracker/app/components/ui/calendar.tsx

@@ -0,0 +1,211 @@
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

packages/tracker/app/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

packages/tracker/app/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

packages/tracker/app/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

packages/tracker/app/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

packages/tracker/app/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

packages/tracker/app/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

packages/tracker/app/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

packages/tracker/app/components/ui/select.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

packages/tracker/app/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

packages/tracker/app/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

packages/tracker/app/components/ui/sidebar.tsx

@@ -0,0 +1,724 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

packages/tracker/app/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

packages/tracker/app/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

packages/tracker/app/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

packages/tracker/app/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

packages/tracker/app/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

packages/tracker/app/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/tracker/app/home/home.tsx

@@ -0,0 +1,129 @@
+import type { Route } from "./+types/home";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, Kanban, LogOut } from "lucide-react";
+import { Link, Form, redirect } from "react-router";
+import { db } from "@lib/db";
+import { projects as projectsTable, tasks, users } from "@lib/db/schema";
+import { count, eq } from "drizzle-orm";
+import Layout from "@/components/layout";
+import { getCurrentUser } from "@lib/auth-utils";
+import { getUserProjects } from "@lib/auth";
+
+export function meta({}: Route.MetaArgs) {
+	return [{ title: "Projects - FramSpor" }];
+}
+
+export async function loader({ request }: { request: Request }) {
+	// Check if there are any users
+	const existingUsers = await db.select().from(users).limit(1);
+
+	// If users exist, redirect to login
+	if (existingUsers.length === 0) {
+		return redirect("/setup");
+	}
+
+	const user = await getCurrentUser(request);
+	if (!user) {
+		return redirect("/login");
+	}
+
+	// Fetch user's accessible projects
+	const projects = await getUserProjects(user.id);
+
+	// For each project, count the number of tasks
+	const projectsWithTaskCount = await Promise.all(
+		projects.map(async (project) => {
+			const taskCountResult = await db
+				.select({ count: count() })
+				.from(tasks)
+				.where(eq(tasks.projectId, project.id));
+
+			return {
+				...project,
+				taskCount: taskCountResult[0]?.count || 0
+			};
+		})
+	);
+
+	return { projects: projectsWithTaskCount, user };
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+	const { projects, user } = loaderData as { projects: any[]; user: any };
+
+	return (
+		<Layout>
+			{/* Header */}
+			<div className="max-sm:flex-col max-sm:gap-6 flex justify-between mb-8">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
+					<p className="text-muted-foreground mt-2">
+						Welcome, <Link to="/profile" className="text-blue-500">{user.username}</Link>! You have {projects.length} project
+						{projects.length === 1 ? "" : "s"}.
+						{user.isAdmin && <Link to="/admin/users"><span className="ml-2 text-blue-500">(Admin)</span></Link>}
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<Link to="/logout">
+						<Button type="submit" variant="outline">
+							<LogOut className="size-4 mr-1" />
+							Logout
+						</Button>
+					</Link>
+					<Button asChild>
+						<Link to="/project/new">
+							<Plus className="size-4.5 mr-1" />
+							New Project
+						</Link>
+					</Button>
+				</div>
+			</div>
+
+			{/* Projects Grid */}
+			<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{projects.map((project: any) => (
+					<Card key={project.id} className="hover:shadow-lg transition-shadow">
+						<CardHeader>
+							<div className="flex items-center gap-3">
+								<div>
+									<CardTitle className="text-xl">{project.name}</CardTitle>
+									<CardDescription>{project.description}</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent>
+							<div className="flex items-center justify-between">
+								<span className="text-sm text-muted-foreground">
+									{project.taskCount} tasks
+								</span>
+								<Button asChild variant="outline" size="sm">
+									<Link to={`/project/${project.id}`}>Open Board</Link>
+								</Button>
+							</div>
+						</CardContent>
+					</Card>
+				))}
+			</div>
+
+			{/* Empty State */}
+			{projects.length === 0 && (
+				<Card className="text-center py-12">
+					<CardContent>
+						<Kanban className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+						<h3 className="text-lg font-semibold mb-2">No projects yet</h3>
+						<p className="text-muted-foreground mb-4">
+							Create your first project to get started with task management
+						</p>
+						<Button asChild>
+							<Link to="/project/new">
+								<Plus className="size-4.5 mr-1" />
+								Create Project
+							</Link>
+						</Button>
+					</CardContent>
+				</Card>
+			)}
+		</Layout>
+	);
+}

packages/tracker/app/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

packages/tracker/app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/tracker/app/login/action.ts

@@ -0,0 +1,30 @@
+import { redirect } from "react-router";
+import { authenticateUser, createSession } from "@lib/auth";
+
+export async function action({ request }: { request: Request }) {
+	const formData = await request.formData();
+	const username = formData.get("username") as string;
+	const password = formData.get("password") as string;
+
+	if (!username || !password) {
+		return { error: "Username and password are required" };
+	}
+
+	console.log(username, password)
+	const user = await authenticateUser(username, password);
+	if (!user) {
+		return { error: "Invalid username or password" };
+	}
+
+	const sessionId = await createSession(user.id);
+	
+	// Set session cookie
+	const headers = new Headers();
+	headers.append(
+		"Set-Cookie",
+		`session=${sessionId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${30 * 24 * 60 * 60}`
+	);
+	headers.append("Location", "/");
+
+	return redirect("/", { headers });
+}

packages/tracker/app/login/page.tsx

@@ -0,0 +1,63 @@
+import { Form, redirect } from "react-router";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { getCurrentUser } from "@lib/auth-utils";
+import { db } from "@lib/db";
+import { users } from "@lib/db/schema";
+
+export async function loader({ request }: { request: Request }) {
+	const existingUsers = await db.select().from(users).limit(1);
+
+	if (existingUsers.length === 0) {
+		return redirect("/setup");
+	}
+
+	const user = await getCurrentUser(request);
+	if (user) {
+		return redirect("/");
+	}
+}
+
+export default function LoginPage() {
+	return (
+		<div className="min-h-screen flex items-center justify-center bg-background p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle>Login</CardTitle>
+					<CardDescription>Sign in to your account</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post" className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="username">Username</Label>
+							<Input
+								id="username"
+								name="username"
+								type="text"
+								required
+								placeholder="Enter your username"
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="password">Password</Label>
+							<Input
+								id="password"
+								name="password"
+								type="password"
+								required
+								placeholder="Enter your password"
+							/>
+						</div>
+						<Button type="submit" className="w-full">
+							Sign In
+						</Button>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
+
+export { action } from "./action";

packages/tracker/app/logout/logout.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { deleteSession } from "@lib/auth";
+import { getCurrentUser } from "@lib/auth-utils";
+import { db } from "@lib/db";
+import { users } from "@lib/db/schema";
+import { Link, redirect } from "react-router";
+
+export async function loader({ request }: { request: Request }) {
+	const existingUsers = await db.select().from(users).limit(1);
+
+	if (existingUsers.length === 0) {
+		return redirect("/setup");
+	}
+
+	const user = await getCurrentUser(request);
+	if (!user) {
+		return redirect("/login");
+	}
+
+	const cookies = request.headers.get("Cookie");
+	const sessionMatch = cookies?.match(/session=([^;]+)/);
+	const sessionId = sessionMatch?.[1];
+
+	if (sessionId) {
+		await deleteSession(sessionId);
+	}
+
+	// Clear session cookie
+	const headers = new Headers();
+	headers.append("Set-Cookie", "session=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0");
+	headers.append("Location", "/login");
+}
+
+export default function LogoutPage() {
+	return (
+		<div className="min-h-screen flex items-center justify-center bg-background p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle className="text-xl font-bold">Log out</CardTitle>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<p>You have been logged out.</p>
+					<Link to="/login">
+						<Button>Login</Button>
+					</Link>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

packages/tracker/app/projects/newProject.tsx

@@ -0,0 +1,136 @@
+import type { Route } from "./+types/newProject";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { ArrowLeft } from "lucide-react";
+import { Link, Form, redirect } from "react-router";
+import { db } from "@lib/db";
+import { projects, columns } from "@lib/db/schema";
+import { generate as generateId } from "@alikia/random-key";
+import Layout from "@/components/layout";
+import { getCurrentUser } from "@lib/auth-utils";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "Create New Project" },
+		{ name: "description", content: "Create a new project for task management" }
+	];
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	const formData = await request.formData();
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+
+	if (!name) {
+		return { error: "Project name is required" };
+	}
+
+	try {
+		const projectId = await generateId(6);
+		const now = new Date();
+
+		// Create the project
+		await db.insert(projects).values({
+			id: projectId,
+			ownerId: user.id,
+			name,
+			description,
+			createdAt: now,
+			updatedAt: now
+		});
+
+		// Create default columns for the project
+		const defaultColumns = [
+			{ name: "To Do", position: 0 },
+			{ name: "In Progress", position: 1 },
+			{ name: "Done", position: 2 }
+		];
+
+		for (const column of defaultColumns) {
+			await db.insert(columns).values({
+				id: await generateId(6),
+				projectId,
+				name: column.name,
+				position: column.position,
+				createdAt: now,
+				updatedAt: now
+			});
+		}
+
+		return redirect(`/project/${projectId}`);
+	} catch (error) {
+		console.error("Failed to create project:", error);
+		return { error: "Failed to create project. Please try again." };
+	}
+}
+
+export default function NewProject() {
+	return (
+		<Layout>
+			{/* Header */}
+			<div className="flex items-center gap-4 mb-8">
+				<Button variant="ghost" size="icon" asChild>
+					<Link to="/">
+						<ArrowLeft className="w-4 h-4" />
+					</Link>
+				</Button>
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">Create A New Project</h1>
+				</div>
+			</div>
+
+			{/* Project Creation Form */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Project Details</CardTitle>
+					<CardDescription>
+						Enter the basic information for your new project
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post" className="space-y-4">
+						<div className="space-y-2">
+							<label htmlFor="name" className="text-sm font-medium">
+								Project Name *
+							</label>
+							<Input
+								id="name"
+								name="name"
+								placeholder="Enter project name"
+								required
+								className="w-full"
+							/>
+						</div>
+
+						<div className="space-y-2">
+							<label htmlFor="description" className="text-sm font-medium">
+								Description
+							</label>
+							<Textarea
+								id="description"
+								name="description"
+								placeholder="Describe your project (optional)"
+								rows={4}
+								className="w-full"
+							/>
+						</div>
+
+						<div className="flex gap-2 pt-4">
+							<Button variant="outline" asChild>
+								<Link to="/">Cancel</Link>
+							</Button>
+							<Button type="submit">Create Project</Button>
+						</div>
+					</Form>
+				</CardContent>
+			</Card>
+		</Layout>
+	);
+}

packages/tracker/app/projects/projectPage.tsx

@@ -0,0 +1,412 @@
+import type { Route } from "./+types/projectPage";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Plus, SquarePen } from "lucide-react";
+import { Link, useRevalidator } from "react-router";
+import { db } from "@lib/db";
+import { projects, columns, tasks, type Task, type Column } from "@lib/db/schema";
+import { eq, asc, desc } from "drizzle-orm";
+import Layout from "@/components/layout";
+import { TaskDialog } from "@/components/task/TaskDialog";
+import { ColumnDialog } from "@/components/column/ColumnDialog";
+import { ProjectDialog } from "@/components/project/ProjectDialog";
+import { useEffect, useState } from "react";
+import { projectPageAction } from "./projectPageAction";
+import { getCurrentUser } from "@lib/auth-utils";
+import { canUserEditProject, canUserViewProject } from "@lib/auth";
+
+export function meta({ loaderData }: Route.MetaArgs) {
+	return [
+		{ title: `${loaderData.project.name} - FramSpor` },
+		{ name: "description", content: `Manage tasks for ${loaderData.project.name}` }
+	];
+}
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+	const user = await getCurrentUser(request);
+
+	const projectId = params.id;
+
+	// Check if user can view this project
+	const canView = await canUserViewProject(user?.id || "", projectId);
+	if (!canView) {
+		throw new Response("You do not have permission to view this project", { status: 403 });
+	}
+
+	// Fetch the project
+	const projectResult = await db
+		.select()
+		.from(projects)
+		.where(eq(projects.id, projectId))
+		.limit(1);
+
+	if (projectResult.length === 0) {
+		throw new Response("Project not found", { status: 404 });
+	}
+
+	const project = projectResult[0];
+
+	// Check if user can edit this project
+	const canEdit = await canUserEditProject(user?.id || "", projectId);
+
+	// Fetch columns for this project
+	const projectColumns = await db
+		.select()
+		.from(columns)
+		.where(eq(columns.projectId, projectId))
+		.orderBy(asc(columns.position));
+
+	// Fetch tasks for each column
+	const columnsWithTasks = await Promise.all(
+		projectColumns.map(async (column) => {
+			const columnTasks = await db
+				.select()
+				.from(tasks)
+				.where(eq(tasks.columnId, column.id))
+				.orderBy(desc(tasks.priority), asc(tasks.dueDate));
+
+			return {
+				...column,
+				tasks: columnTasks.sort((a, b) => {
+					if (a.dueDate === null && b.dueDate === null) return 0;
+					if (a.dueDate === null) return 1;
+					if (b.dueDate === null) return -1;
+					return a.dueDate.getTime() - b.dueDate.getTime();
+				})
+			};
+		})
+	);
+
+	return {
+		project,
+		columns: columnsWithTasks,
+		user,
+		canEdit
+	};
+}
+
+interface ColumnWithTasks extends Column {
+	tasks: Task[];
+}
+
+export const action = projectPageAction;
+
+export default function ProjectBoard({ loaderData }: Route.ComponentProps) {
+	const { project, columns: initialColumns, user, canEdit } = loaderData;
+	const [columns, setColumns] = useState(initialColumns);
+	const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+	const [isColumnDialogOpen, setIsColumnDialogOpen] = useState(false);
+	const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
+	const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null);
+	const [editingTask, setEditingTask] = useState<any>(null);
+	const [editingColumn, setEditingColumn] = useState<any>(null);
+	const revalidator = useRevalidator();
+
+	useEffect(() => {
+		setColumns(loaderData.columns);
+	}, [loaderData, loaderData.columns, loaderData.project]);
+
+	const handleAddTask = (columnId?: string) => {
+		setSelectedColumnId(columnId || null);
+		setEditingTask(null);
+		setIsTaskDialogOpen(true);
+	};
+
+	const handleEditTask = (task: Task) => {
+		setEditingTask(task);
+		setSelectedColumnId(null);
+		setIsTaskDialogOpen(true);
+	};
+
+	const handleAddColumn = () => {
+		setEditingColumn(null);
+		setIsColumnDialogOpen(true);
+	};
+
+	const handleEditColumn = (column: ColumnWithTasks) => {
+		setEditingColumn(column);
+		setIsColumnDialogOpen(true);
+	};
+
+	const handleEditProject = () => {
+		setIsProjectDialogOpen(true);
+	};
+
+	const handleColumnSubmit = async (data: { name: string }) => {
+		const formData = new FormData();
+
+		if (editingColumn) {
+			formData.append("intent", "updateColumn");
+			formData.append("columnId", editingColumn.id);
+		} else {
+			formData.append("intent", "createColumn");
+		}
+
+		formData.append("name", data.name);
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		revalidator.revalidate();
+	};
+
+	const handleDeleteColumn = async (columnId: string) => {
+		const formData = new FormData();
+		formData.append("intent", "deleteColumn");
+		formData.append("columnId", columnId);
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		if (response.ok) {
+			// Refresh the data
+			revalidator.revalidate();
+		}
+	};
+
+	const handleProjectSubmit = async (data: {
+		name: string;
+		description: string;
+		isPublic: boolean;
+	}) => {
+		const formData = new FormData();
+		formData.append("intent", "updateProject");
+		formData.append("name", data.name);
+		formData.append("description", data.description);
+		formData.append("isPublic", data.isPublic ? "true" : "false");
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		if (response.ok) {
+			// Refresh the data
+			revalidator.revalidate();
+		}
+	};
+
+	const handleDeleteProject = async () => {
+		const formData = new FormData();
+		formData.append("intent", "deleteProject");
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		if (response.ok) {
+			// Redirect to home page
+			window.location.href = "/";
+		}
+	};
+
+	const handleTaskSubmit = async (data: {
+		title: string;
+		description: string;
+		columnId: string;
+		priority: "low" | "medium" | "high";
+		dueDate?: Date;
+	}) => {
+		const formData = new FormData();
+
+		if (editingTask) {
+			formData.append("intent", "updateTask");
+			formData.append("taskId", editingTask.id);
+		} else {
+			formData.append("intent", "createTask");
+		}
+
+		formData.append("title", data.title);
+		formData.append("description", data.description);
+		formData.append("columnId", selectedColumnId || data.columnId);
+		formData.append("priority", data.priority);
+		if (data.dueDate) {
+			formData.append("dueDate", data.dueDate.toISOString());
+		}
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		revalidator.revalidate();
+	};
+
+	const handleTaskDelete = async () => {
+		const formData = new FormData();
+		formData.append("intent", "deleteTask");
+		formData.append("taskId", editingTask.id);
+
+		const response = await fetch(`/project/${project.id}`, {
+			method: "POST",
+			body: formData
+		});
+
+		revalidator.revalidate();
+	};
+
+	return (
+		<Layout>
+			<TaskDialog
+				open={isTaskDialogOpen}
+				onOpenChange={setIsTaskDialogOpen}
+				projectId={project.id}
+				columns={columns}
+				onSubmit={handleTaskSubmit}
+				onDelete={handleTaskDelete}
+				initialData={
+					editingTask || (selectedColumnId ? { columnId: selectedColumnId } : undefined)
+				}
+				isEditing={!!editingTask}
+				canEdit={canEdit}
+			/>
+			<ColumnDialog
+				open={isColumnDialogOpen}
+				onOpenChange={setIsColumnDialogOpen}
+				onSubmit={handleColumnSubmit}
+				onDelete={editingColumn ? () => handleDeleteColumn(editingColumn.id) : undefined}
+				initialData={editingColumn}
+				isEditing={!!editingColumn}
+				columns={columns.length}
+			/>
+			<ProjectDialog
+				open={isProjectDialogOpen}
+				onOpenChange={setIsProjectDialogOpen}
+				onSubmit={handleProjectSubmit}
+				onDelete={handleDeleteProject}
+				initialData={{
+					name: project.name,
+					description: project.description || ""
+				}}
+				isEditing={true}
+			/>
+			{/* Header */}
+			<div className="max-md:flex-col max-md:gap-4 flex justify-between mb-8">
+				<div className="flex items-start gap-4">
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
+						<p className="text-muted-foreground mt-2">
+							{project.description || "No description."}
+							{!canEdit && <span className="ml-2 text-orange-600">(View Only)</span>}
+						</p>
+					</div>
+				</div>
+				<div className="max-sm:flex-col flex gap-2">
+					{user && (
+						<Button variant="outline" asChild>
+							<Link to="/">
+								<ArrowLeft className="size-4.5 mr-1" />
+								Back to Projects
+							</Link>
+						</Button>
+					)}
+					{canEdit && (
+						<>
+							<Link to={`/project/${project.id}/settings`}>
+								<Button variant="outline" onClick={handleEditProject}>
+									<SquarePen className="size-4 mr-1" />
+									Edit Project
+								</Button>
+							</Link>
+
+							<Button onClick={() => handleAddTask()}>
+								<Plus className="size-4.5 mr-1" />
+								Add Task
+							</Button>
+						</>
+					)}
+				</div>
+			</div>
+
+			{/* Kanban Board */}
+			<div className="max-lg:flex-col flex gap-4 overflow-x-auto pb-6">
+				{columns.map((column) => (
+					<div
+						key={column.id}
+						className="min-w-80 lg:w-100 xl:w-100 2xl:w-110 flex-shrink-0"
+					>
+						<div className="border rounded-lg p-4 px-5 bg-card">
+							<div className="flex items-center justify-between mb-4">
+								<h3 className="font-semibold text-lg">{column.name}</h3>
+								{canEdit && (
+									<Button
+										variant="ghost"
+										size="icon"
+										onClick={() => handleEditColumn(column)}
+									>
+										<SquarePen className="w-4 h-4" />
+									</Button>
+								)}
+							</div>
+							<div className="space-y-3">
+								{column.tasks.map((task) => (
+									<div
+										key={task.id}
+										className="border rounded-md py-4 px-4.5 bg-background gap-3
+										hover:shadow-sm transition-shadow cursor-pointer flex flex-col"
+										onClick={() => handleEditTask(task)}
+									>
+										<h4 className="font-medium text-sm">{task.title}</h4>
+										{task.description && (
+											<p className="text-xs text-muted-foreground line-clamp-3 overflow-ellipsis">
+												<pre>{task.description}</pre>
+											</p>
+										)}
+										<div className="flex items-center justify-between text-xs">
+											{task.priority && (
+												<span
+													className={`px-2 py-1 text-xs ${
+														task.priority === "high"
+															? "bg-red-100 text-red-800"
+															: task.priority === "medium"
+																? "bg-yellow-100 text-yellow-800"
+																: "bg-blue-200 text-blue-800"
+													}`}
+												>
+													{task.priority}
+												</span>
+											)}
+											{task.dueDate && (
+												<span className="text-muted-foreground">
+													{new Date(task.dueDate).toLocaleDateString()}
+												</span>
+											)}
+										</div>
+									</div>
+								))}
+								{canEdit && (
+									<Button
+										variant="ghost"
+										className="w-full justify-start text-muted-foreground"
+										onClick={() => handleAddTask(column.id)}
+									>
+										<Plus className="w-4 h-4 mr-2" />
+										Add Task
+									</Button>
+								)}
+							</div>
+						</div>
+					</div>
+				))}
+				{canEdit && (
+					<div className="w-80 flex-shrink-0">
+						<div className="border-dashed border-2 rounded-lg p-6 flex items-center justify-center h-32">
+							<Button
+								variant="ghost"
+								className="text-muted-foreground"
+								onClick={handleAddColumn}
+							>
+								<Plus className="w-4 h-4 mr-2" />
+								Add Column
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</Layout>
+	);
+}

packages/tracker/app/projects/projectPageAction.ts

@@ -0,0 +1,255 @@
+import type { Route } from "./+types/projectPage";
+import { db } from "@lib/db";
+import { projects, columns, tasks } from "@lib/db/schema";
+import { eq, asc, desc } from "drizzle-orm";
+import { generate as generateId } from "@alikia/random-key";
+import { getCurrentUser } from "@lib/auth-utils";
+import { canUserEditProject } from "@lib/auth";
+
+export const projectPageAction = async ({ request, params }: Route.ActionArgs) => {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	const formData = await request.formData();
+	const intent = formData.get("intent");
+	const projectId = params.id;
+
+	// Check if user can edit this project for write operations
+	const canEdit = await canUserEditProject(user.id, projectId);
+	if (!canEdit && intent !== "getColumns") {
+		throw new Response("You do not have permission to edit this project", { status: 403 });
+	}
+
+	if (intent === "getColumns") {
+		const projectId = formData.get("projectId") as string;
+		
+		const projectColumns = await db
+			.select()
+			.from(columns)
+			.where(eq(columns.projectId, projectId))
+			.orderBy(asc(columns.position));
+
+		const columnsWithTasks = await Promise.all(
+			projectColumns.map(async (column) => {
+				const columnTasks = await db
+					.select()
+					.from(tasks)
+					.where(eq(tasks.columnId, column.id))
+					.orderBy(desc(tasks.priority), asc(tasks.dueDate));
+
+				return {
+					...column,
+					tasks: columnTasks.sort((a, b) => {
+						if (a.dueDate === null && b.dueDate === null) return 0;
+						if (a.dueDate === null) return 1;
+						if (b.dueDate === null) return -1;
+						return a.dueDate.getTime() - b.dueDate.getTime();
+					})
+				};
+			})
+		);
+		return { columnsWithTasks };
+	}
+
+	if (intent === "createTask") {
+		const title = formData.get("title") as string;
+		const description = formData.get("description") as string;
+		const columnId = formData.get("columnId") as string;
+		const priority = formData.get("priority") as "low" | "medium" | "high";
+		const dueDate = formData.get("dueDate") as string;
+
+		if (!title || !columnId) {
+			return { error: "Title and column are required" };
+		}
+
+		const taskId = await generateId(7);
+
+		await db.insert(tasks).values({
+			id: taskId,
+			projectId: projectId,
+			columnId: columnId,
+			title: title,
+			description: description,
+			priority: priority,
+			dueDate: dueDate ? new Date(dueDate) : null,
+			createdAt: new Date(),
+			updatedAt: new Date()
+		});
+
+		return { success: true, taskId };
+	}
+
+	if (intent === "updateTask") {
+		const taskId = formData.get("taskId") as string;
+		const title = formData.get("title") as string;
+		const description = formData.get("description") as string;
+		const columnId = formData.get("columnId") as string;
+		const priority = formData.get("priority") as "low" | "medium" | "high";
+		const dueDate = formData.get("dueDate") as string;
+
+		if (!title || !columnId || !taskId) {
+			return { error: "Title, column, and task ID are required" };
+		}
+
+		await db
+			.update(tasks)
+			.set({
+				title: title,
+				description: description,
+				columnId: columnId,
+				priority: priority,
+				dueDate: dueDate ? new Date(dueDate) : null,
+				updatedAt: new Date()
+			})
+			.where(eq(tasks.id, taskId));
+
+		return { success: true, taskId };
+	}
+
+	if (intent === "deleteTask") {
+		const taskId = formData.get("taskId") as string;
+
+		if (!taskId) {
+			return { error: "Task ID is required" };
+		}
+
+		await db.delete(tasks).where(eq(tasks.id, taskId));
+
+		return { success: true, taskId };
+	}
+
+	if (intent === "createColumn") {
+		const name = formData.get("name") as string;
+
+		if (!name) {
+			return { error: "Column name is required" };
+		}
+
+		const columnId = await generateId(7);
+
+		// Get the highest position for this project
+		const existingColumns = await db
+			.select()
+			.from(columns)
+			.where(eq(columns.projectId, projectId))
+			.orderBy(asc(columns.position));
+
+		const newPosition =
+			existingColumns.length > 0
+				? existingColumns[existingColumns.length - 1].position + 1
+				: 0;
+
+		await db.insert(columns).values({
+			id: columnId,
+			projectId: projectId,
+			name: name,
+			position: newPosition,
+			createdAt: new Date(),
+			updatedAt: new Date()
+		});
+
+		return { success: true, columnId };
+	}
+
+	if (intent === "updateColumn") {
+		const columnId = formData.get("columnId") as string;
+		const name = formData.get("name") as string;
+		const position = formData.get("position") as string;
+
+		if (!name || !columnId) {
+			return { error: "Column name and ID are required" };
+		}
+
+		await db
+			.update(columns)
+			.set({
+				name: name,
+				position: parseInt(position) || 0,
+				updatedAt: new Date()
+			})
+			.where(eq(columns.id, columnId));
+
+		return { success: true, columnId };
+	}
+
+	if (intent === "deleteColumn") {
+		const columnId = formData.get("columnId") as string;
+
+		if (!columnId) {
+			return { error: "Column ID is required" };
+		}
+
+		// Check if column has tasks
+		const columnTasks = await db.select().from(tasks).where(eq(tasks.columnId, columnId));
+
+		if (columnTasks.length > 0) {
+			return { error: "Cannot delete column with tasks. Please move or delete tasks first." };
+		}
+
+		await db.delete(columns).where(eq(columns.id, columnId));
+
+		return { success: true, columnId };
+	}
+
+	if (intent === "reorderColumns") {
+		const columnOrder = JSON.parse(formData.get("columnOrder") as string) as string[];
+
+		// Update positions for all columns
+		for (let i = 0; i < columnOrder.length; i++) {
+			const columnId = columnOrder[i];
+			await db
+				.update(columns)
+				.set({
+					position: i,
+					updatedAt: new Date()
+				})
+				.where(eq(columns.id, columnId));
+		}
+
+		return { success: true };
+	}
+
+	if (intent === "updateProject") {
+		const name = formData.get("name") as string;
+		const description = formData.get("description") as string;
+		const isPublic = formData.get("isPublic") === "true";
+
+		if (!name) {
+			return { error: "Project name is required" };
+		}
+
+		await db
+			.update(projects)
+			.set({
+				name: name,
+				description: description,
+				updatedAt: new Date(),
+				isPublic: isPublic
+			})
+			.where(eq(projects.id, projectId));
+
+		return { success: true };
+	}
+
+	if (intent === "deleteProject") {
+		// Check if project has columns
+		const projectColumns = await db
+			.select()
+			.from(columns)
+			.where(eq(columns.projectId, projectId));
+
+		if (projectColumns.length > 0) {
+			return {
+				error: "Cannot delete project with columns. Please delete all columns first."
+			};
+		}
+
+		await db.delete(projects).where(eq(projects.id, projectId));
+
+		return { success: true, redirect: "/" };
+	}
+
+	return { error: "Unknown action" };
+};

packages/tracker/app/projects/settings.tsx

@@ -0,0 +1,512 @@
+import type { Route } from "./+types/settings";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ArrowLeft, Save, Trash2, UserPlus, UserMinus, Search, X } from "lucide-react";
+import { Link, Form, redirect } from "react-router";
+import { db } from "@lib/db";
+import {
+	projects,
+	users,
+	projectPermissions,
+	type Project,
+	type User,
+	type ProjectPermission
+} from "@lib/db/schema";
+import { getCurrentUser } from "@lib/auth-utils";
+import Layout from "@/components/layout";
+import { eq, and, like } from "drizzle-orm";
+import { canUserEditProject } from "@lib/auth";
+import { Badge } from "@/components/ui/badge";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow
+} from "@/components/ui/table";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { UserSearchModal } from "@/components/project/UserSearch";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "Project Settings" },
+		{ name: "description", content: "Manage project settings and permissions" }
+	];
+}
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	const projectId = params.id;
+	if (!projectId) {
+		throw new Response("Project ID required", { status: 400 });
+	}
+
+	// Get project details
+	const project = await db.select().from(projects).where(eq(projects.id, projectId)).get();
+	if (!project) {
+		throw new Response("Project not found", { status: 404 });
+	}
+
+	// Check if user can edit this project
+	const canEdit = await canUserEditProject(user.id, projectId);
+	if (!canEdit) {
+		throw new Response("Forbidden", { status: 403 });
+	}
+
+	// Get all users for the user management section
+	const allUsers = await db.select().from(users).orderBy(users.username);
+
+	// Get current project permissions
+	const currentPermissions = await db
+		.select()
+		.from(projectPermissions)
+		.where(eq(projectPermissions.projectId, projectId));
+
+	const isOwner = await db
+		.select()
+		.from(projects)
+		.where(and(eq(projects.id, projectId), eq(projects.ownerId, user.id)))
+		.get();
+
+	return { project, allUsers, currentPermissions, currentUser: user, isOwner };
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+	const user = await getCurrentUser(request);
+	const projectId = params.id;
+	if (!projectId) {
+		throw new Response("Project ID required", { status: 400 });
+	}
+
+	const project = await db.select().from(projects).where(eq(projects.id, projectId)).get();
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	const formData = await request.formData();
+	const intent = formData.get("intent") as string;
+
+	// Check if user can edit this project
+	const canEdit = await canUserEditProject(user.id, projectId);
+	if (!canEdit) {
+		throw new Response("Forbidden", { status: 403 });
+	}
+
+	const isOwner = await db
+		.select()
+		.from(projects)
+		.where(and(eq(projects.id, projectId), eq(projects.ownerId, user.id)))
+		.get();
+
+	if (intent === "updateProject") {
+		const name = formData.get("name") as string;
+		const description = formData.get("description") as string;
+		const isPublic = isOwner ? formData.get("isPublic") === "on" : project?.isPublic;
+
+		if (!name) {
+			return { error: "Project name is required" };
+		}
+
+		await db
+			.update(projects)
+			.set({
+				name,
+				description,
+				isPublic,
+				updatedAt: new Date()
+			})
+			.where(eq(projects.id, projectId));
+
+		return redirect(`/project/${projectId}`);
+	}
+
+	// Danger zone (below): only project owner have access
+	if (!project || project.ownerId !== user.id) {
+		throw new Response("You do not have permission to edit this project", { status: 403 });
+	}
+
+	if (intent === "deleteProject") {
+		await db.delete(projects).where(eq(projects.id, projectId));
+		return redirect(`/projects`);
+	}
+
+	if (intent === "addUser") {
+		const userId = formData.get("userId") as string;
+		const canEditPermission = formData.get("canEdit") === "on";
+
+		if (!userId) {
+			return { error: "User ID is required" };
+		}
+
+		// Check if permission already exists
+		const existingPermission = await db
+			.select()
+			.from(projectPermissions)
+			.where(
+				and(
+					eq(projectPermissions.projectId, projectId),
+					eq(projectPermissions.userId, userId)
+				)
+			)
+			.get();
+
+		if (existingPermission) {
+			return { error: "User already has permission for this project" };
+		}
+
+		await db.insert(projectPermissions).values({
+			id: crypto.randomUUID(),
+			projectId,
+			userId,
+			canEdit: canEditPermission,
+			createdAt: new Date()
+		});
+
+		return redirect(`/project/${projectId}`);
+	}
+
+	if (intent === "removeUser") {
+		const userId = formData.get("userId") as string;
+
+		if (!userId) {
+			return { error: "User ID is required" };
+		}
+
+		// Don't allow removing the project owner
+		const project = await db.select().from(projects).where(eq(projects.id, projectId)).get();
+		if (project && project.ownerId === userId) {
+			return { error: "Cannot remove project owner" };
+		}
+
+		await db
+			.delete(projectPermissions)
+			.where(
+				and(
+					eq(projectPermissions.projectId, projectId),
+					eq(projectPermissions.userId, userId)
+				)
+			);
+
+		return redirect(`/project/${projectId}`);
+	}
+
+	if (intent === "updatePermission") {
+		const userId = formData.get("userId") as string;
+		const canEdit = formData.get("canEdit") === "on";
+
+		if (!userId) {
+			return { error: "User ID is required" };
+		}
+
+		// Don't allow changing the project owner's permissions
+		const project = await db.select().from(projects).where(eq(projects.id, projectId)).get();
+		if (project && project.ownerId === userId) {
+			return { error: "Cannot change project owner's permissions" };
+		}
+
+		await db
+			.update(projectPermissions)
+			.set({ canEdit })
+			.where(
+				and(
+					eq(projectPermissions.projectId, projectId),
+					eq(projectPermissions.userId, userId)
+				)
+			);
+
+		return redirect(`/project/${projectId}`);
+	}
+
+	return { error: "Unknown action" };
+}
+
+interface UsersManagementProps {
+	project: Project;
+	availableUsers: User[];
+	currentPermissions: ProjectPermission[];
+	allUsers: User[];
+}
+
+export function UsersManagement({
+	project,
+	availableUsers,
+	currentPermissions,
+	allUsers
+}: UsersManagementProps) {
+	return (
+		<Card className="mb-6">
+			<CardHeader>
+				<CardTitle>User Permissions</CardTitle>
+				<CardDescription>Manage who can view and edit this project</CardDescription>
+			</CardHeader>
+			<CardContent>
+				{/* Add User Form */}
+				<div className="mb-6">
+					<h3 className="text-lg font-semibold mb-4">Add User</h3>
+					<UserSearchModal availableUsers={availableUsers} projectId={project.id} />
+				</div>
+
+				{/* Current Users Table */}
+				<div>
+					<h3 className="text-lg font-semibold mb-4">Current Users</h3>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Username</TableHead>
+								<TableHead>Role</TableHead>
+								<TableHead>Permissions</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{/* Project Owner */}
+							<TableRow>
+								<TableCell className="font-medium">
+									{allUsers.find((u) => u.id === project.ownerId)?.username}
+									<Badge variant="default" className="ml-2">
+										Owner
+									</Badge>
+								</TableCell>
+								<TableCell>Owner</TableCell>
+								<TableCell>Full Access</TableCell>
+								<TableCell>-</TableCell>
+							</TableRow>
+
+							{/* Users with permissions */}
+							{currentPermissions.map((permission) => {
+								const user = allUsers.find((u) => u.id === permission.userId);
+								if (!user) return null;
+
+								return (
+									<TableRow key={permission.id}>
+										<TableCell className="font-medium">
+											{user.username}
+										</TableCell>
+										<TableCell>Collaborator</TableCell>
+										<TableCell>
+											<Form method="post">
+												<input
+													type="hidden"
+													name="intent"
+													value="updatePermission"
+												/>
+												<input
+													type="hidden"
+													name="userId"
+													value={user.id}
+												/>
+												<div className="flex items-center gap-2">
+													<Checkbox
+														id={`canEdit-${user.id}`}
+														name="canEdit"
+														defaultChecked={permission.canEdit || false}
+														className="rounded border-gray-300"
+														onCheckedChange={(e) => {
+															const canEdit = e;
+															const formData = new FormData();
+															formData.append(
+																"intent",
+																"updatePermission"
+															);
+															formData.append("userId", user.id);
+															formData.append(
+																"canEdit",
+																canEdit ? "on" : ""
+															);
+															fetch(
+																`/project/${project.id}/settings`,
+																{
+																	method: "POST",
+																	body: formData
+																}
+															);
+														}}
+													/>
+													<Label htmlFor={`canEdit-${user.id}`}>
+														Can Edit
+													</Label>
+												</div>
+											</Form>
+										</TableCell>
+										<TableCell>
+											<Form method="post">
+												<input
+													type="hidden"
+													name="intent"
+													value="removeUser"
+												/>
+												<input
+													type="hidden"
+													name="userId"
+													value={user.id}
+												/>
+												<Button
+													type="submit"
+													variant="destructive"
+													size="sm"
+												>
+													<UserMinus className="size-4 mr-1" />
+													Remove
+												</Button>
+											</Form>
+										</TableCell>
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
+
+export default function ProjectSettings({ loaderData }: Route.ComponentProps) {
+	const { project, allUsers, currentPermissions, currentUser } = loaderData;
+
+	// Create a map of user permissions for easy lookup
+	const userPermissions = new Map();
+	currentPermissions.forEach((permission) => {
+		userPermissions.set(permission.userId, permission);
+	});
+
+	// Get users who don't have permissions yet
+	const availableUsers = allUsers.filter(
+		(user) => !userPermissions.has(user.id) && user.id !== project.ownerId
+	);
+
+	return (
+		<Layout>
+			{/* Header */}
+			<div className="max-sm:flex-col max-sm:gap-6 flex sm:items-center justify-between mb-8">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">Project Settings</h1>
+					<p className="text-muted-foreground mt-2">
+						Manage project details and user permissions
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" asChild>
+						<Link to={`/project/${project.id}`}>
+							<ArrowLeft className="size-4.5 mr-1" />
+							Back to Project
+						</Link>
+					</Button>
+				</div>
+			</div>
+
+			{/* Project Details */}
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle>Project Details</CardTitle>
+					<CardDescription>
+						Update project name, description, and visibility
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post">
+						<input type="hidden" name="intent" value="updateProject" />
+						<div className="grid gap-4">
+							<div className="grid gap-2">
+								<Label htmlFor="name">Project Name</Label>
+								<Input
+									id="name"
+									name="name"
+									defaultValue={project.name}
+									placeholder="Enter project name"
+									required
+								/>
+							</div>
+							<div className="grid gap-2">
+								<Label htmlFor="description">Description</Label>
+								<Textarea
+									id="description"
+									name="description"
+									defaultValue={project.description || ""}
+									placeholder="Enter project description (optional)"
+									rows={3}
+								/>
+							</div>
+							{loaderData.isOwner && (
+								<div className="flex items-center gap-2">
+									<Checkbox
+										id="isPublic"
+										name="isPublic"
+										defaultChecked={project.isPublic || false}
+										className="rounded border-gray-300"
+									/>
+									<Label htmlFor="isPublic">Public Project</Label>
+								</div>
+							)}
+							<div>
+								<Button type="submit">
+									<Save className="size-4 mr-1" />
+									Save Changes
+								</Button>
+							</div>
+						</div>
+					</Form>
+				</CardContent>
+			</Card>
+
+			{loaderData.isOwner && (
+				<UsersManagement
+					project={project}
+					allUsers={allUsers}
+					currentPermissions={currentPermissions}
+					availableUsers={availableUsers}
+				/>
+			)}
+
+			{/* Danger Zone */}
+			{project.ownerId === currentUser.id && (
+				<Card className="border-destructive">
+					<CardHeader>
+						<CardTitle className="text-destructive">Danger Zone</CardTitle>
+						<CardDescription>
+							Permanently delete this project and all its data
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Form method="post">
+							<input type="hidden" name="intent" value="deleteProject" />
+							<Button
+								type="submit"
+								variant="destructive"
+								onClick={(e) => {
+									if (
+										!confirm(
+											"Are you sure you want to delete this project? This action cannot be undone."
+										)
+									) {
+										e.preventDefault();
+									}
+								}}
+							>
+								<Trash2 className="size-4 mr-1" />
+								Delete Project
+							</Button>
+						</Form>
+					</CardContent>
+				</Card>
+			)}
+		</Layout>
+	);
+}

packages/tracker/app/root.tsx

@@ -0,0 +1,91 @@
+import {
+	isRouteErrorResponse,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous"
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+	}
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<body>
+				{children}
+				<ScrollRestoration />
+				<Scripts />
+			</body>
+		</html>
+	);
+}
+
+export default function App() {
+	return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	let message = "Oops!";
+	let details = "An unexpected error occurred.";
+	let stack: string | undefined;
+
+	if (isRouteErrorResponse(error)) {
+		message = error.status.toString();
+		details = error.status === 404 ? "The requested page could not be found." : error.data;
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message;
+		stack = error.stack;
+	}
+
+	return (
+		<div className="w-full min-h-screen flex flex-col items-center justify-center">
+			<div className="mb-8 text-center">
+				<h1 className="text-6xl font-bold text-foreground mb-4">{message}</h1>
+				<p className="md:text-xl text-muted-foreground mb-8">{details}</p>
+				<div className="flex justify-center gap-4">
+					<a
+						href="/"
+						className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					>
+						Go Home
+					</a>
+					<button
+						onClick={() => window.location.reload()}
+						className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					>
+						Reload
+					</button>
+				</div>
+			</div>
+			{stack && (
+				<div className="mt-8 text-left">
+					<h3 className="text-lg font-semibold mb-2">Stack Trace:</h3>
+					<pre className="w-full p-4 overflow-x-auto bg-muted rounded-md text-sm">
+						<code>{stack}</code>
+					</pre>
+				</div>
+			)}
+		</div>
+	);
+}

packages/tracker/app/routes.ts

@@ -0,0 +1,13 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+	index("home/home.tsx"),
+	route("project/:id", "projects/projectPage.tsx"),
+	route("project/new", "projects/newProject.tsx"),
+    route("login", "login/page.tsx"),
+	route("admin/users", "admin/users.tsx"),
+	route("setup", "setup/setup.tsx"),
+	route("profile", "user/profile.tsx"),
+	route("logout", "logout/logout.tsx"),
+	route("project/:id/settings", "projects/settings.tsx"),
+] satisfies RouteConfig;

packages/tracker/app/setup/setup.tsx

@@ -0,0 +1,107 @@
+import type { Route } from "./+types/setup";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Form, redirect } from "react-router";
+import { db } from "@lib/db";
+import { users } from "@lib/db/schema";
+import { createUser, createSession } from "@lib/auth";
+import { eq } from "drizzle-orm";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "Initial Setup" },
+		{ name: "description", content: "Create initial admin user" }
+	];
+}
+
+export async function loader() {
+	// Check if there are any users
+	const existingUsers = await db.select().from(users).limit(1);
+	
+	// If users exist, redirect to login
+	if (existingUsers.length > 0) {
+		return redirect("/login");
+	}
+
+	return {};
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const formData = await request.formData();
+	const username = formData.get("username") as string;
+	const password = formData.get("password") as string;
+
+	if (!username || !password) {
+		return { error: "Username and password are required" };
+	}
+
+	try {
+		// Create admin user
+		const userId = await createUser(username, password);
+		
+		// Make user admin
+		await db
+			.update(users)
+			.set({ isAdmin: true })
+			.where(eq(users.id, userId));
+
+		// Create session and redirect
+		const sessionId = await createSession(userId);
+		
+		const headers = new Headers();
+		headers.append(
+			"Set-Cookie",
+			`session=${sessionId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${30 * 24 * 60 * 60}`
+		);
+		headers.append("Location", "/");
+
+		return redirect("/", { headers });
+	} catch (error) {
+		console.error("Failed to create admin user:", error);
+		return { error: "Failed to create admin user. Please try again." };
+	}
+}
+
+export default function SetupPage() {
+	return (
+		<div className="min-h-screen flex items-center justify-center bg-background p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle>Initial Setup</CardTitle>
+					<CardDescription>
+						Create the first admin user for the system
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post" className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="username">Admin Username</Label>
+							<Input
+								id="username"
+								name="username"
+								type="text"
+								required
+								placeholder="Enter admin username"
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="password">Password</Label>
+							<Input
+								id="password"
+								name="password"
+								type="password"
+								required
+								placeholder="Enter password"
+							/>
+						</div>
+						<Button type="submit" className="w-full">
+							Create Admin User
+						</Button>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

packages/tracker/app/user/profile.tsx

@@ -0,0 +1,253 @@
+import type { Route } from "./+types/profile";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ArrowLeft } from "lucide-react";
+import { Link, Form, useActionData } from "react-router";
+import { db } from "@lib/db";
+import { users } from "@lib/db/schema";
+import { getCurrentUser } from "@lib/auth-utils";
+import Layout from "@/components/layout";
+import { eq } from "drizzle-orm";
+import { hashPassword, passwordMatches } from "@lib/auth";
+import { useState, useEffect } from "react";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "User Profile" },
+		{ name: "description", content: "Manage your account settings" }
+	];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	return { user };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+
+	const formData = await request.formData();
+	const intent = formData.get("intent") as string;
+
+	if (intent === "changePassword") {
+		const currentPassword = formData.get("currentPassword") as string;
+		const newPassword = formData.get("newPassword") as string;
+		const confirmPassword = formData.get("confirmPassword") as string;
+
+		if (!currentPassword || !newPassword || !confirmPassword) {
+			return { error: "All password fields are required" };
+		}
+
+		if (newPassword !== confirmPassword) {
+			return { error: "New passwords do not match" };
+		}
+
+		const currentUser = await db.select().from(users).where(eq(users.id, user.id)).get();
+		if (!currentUser) {
+			return { error: "User not found" };
+		}
+
+		const isCurrentPasswordValid = await passwordMatches(currentPassword, currentUser.password);
+		if (!isCurrentPasswordValid) {
+			return { error: "Current password is incorrect" };
+		}
+
+		const hashedNewPassword = await hashPassword(newPassword);
+		await db
+			.update(users)
+			.set({ password: hashedNewPassword, updatedAt: new Date() })
+			.where(eq(users.id, user.id));
+
+		return { success: true, message: "Password updated successfully" };
+	}
+
+	if (intent === "changeUsername") {
+		const newUsername = formData.get("newUsername") as string;
+
+		if (!newUsername) {
+			return { error: "Username is required" };
+		}
+
+		const existingUser = await db
+			.select()
+			.from(users)
+			.where(eq(users.username, newUsername))
+			.get();
+		if (existingUser && existingUser.id !== user.id) {
+			return { error: "Username already exists" };
+		}
+
+		await db
+			.update(users)
+			.set({ username: newUsername, updatedAt: new Date() })
+			.where(eq(users.id, user.id));
+
+		const updatedUser = await db.select().from(users).where(eq(users.id, user.id)).get();
+
+		return {
+			success: true,
+			message: "Username updated successfully",
+			updatedUser
+		};
+	}
+
+	return { error: "Unknown action" };
+}
+
+export default function UserProfile({ loaderData }: Route.ComponentProps) {
+	const { user } = loaderData;
+	const actionData = useActionData();
+	const [userName, setUserName] = useState(user.username);
+	const [error, setError] = useState<string | null>(null);
+	const [success, setSuccess] = useState<string | null>(null);
+
+	// 处理动作返回的消息
+	useEffect(() => {
+		if (actionData?.error) {
+			setError(actionData.error);
+			setSuccess(null);
+		} else if (actionData?.success) {
+			setSuccess(actionData.message);
+			setError(null);
+
+			// 如果用户名更新了，同步状态
+			if (actionData.updatedUser?.username) {
+				setUserName(actionData.updatedUser.username);
+			}
+		}
+	}, [actionData]);
+
+	return (
+		<Layout>
+			{/* 头部 */}
+			<div className="max-sm:flex-col max-sm:gap-6 flex sm:items-center justify-between mb-8">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">User Profile</h1>
+					<p className="text-muted-foreground mt-2">Manage your account settings</p>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" asChild>
+						<Link to="/">
+							<ArrowLeft className="size-4.5 mr-1" />
+							Back to Projects
+						</Link>
+					</Button>
+				</div>
+			</div>
+
+			{/* 消息提示 */}
+			{error && <div className="mb-4 p-3 bg-red-50 text-red-600 rounded-md">{error}</div>}
+			{success && (
+				<div className="mb-4 p-3 bg-green-50 text-green-600 rounded-md">{success}</div>
+			)}
+
+			{/* 用户信息 */}
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle>Account Information</CardTitle>
+					<CardDescription>Your basic account details</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post">
+						<input type="hidden" name="intent" value="changeUsername" />
+						<div className="grid gap-4">
+							<div>
+								<Label htmlFor="username">Username</Label>
+								<div className="flex gap-2 mt-1">
+									<Input
+										id="username"
+										name="newUsername"
+										onChange={(e) => setUserName(e.target.value)}
+										value={userName}
+										className="flex-1"
+									/>
+									<Button type="submit" variant="outline">
+										Change
+									</Button>
+								</div>
+							</div>
+							<div>
+								<Label htmlFor="role">Role</Label>
+								<Input
+									id="role"
+									value={user.isAdmin ? "Administrator" : "User"}
+									disabled
+									className="mt-1"
+								/>
+							</div>
+							<div>
+								<Label htmlFor="created">Account Created</Label>
+								<Input
+									id="created"
+									value={new Date(user.createdAt).toLocaleDateString()}
+									disabled
+									className="mt-1"
+								/>
+							</div>
+						</div>
+					</Form>
+				</CardContent>
+			</Card>
+
+			{/* 更改密码 */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Change Password</CardTitle>
+					<CardDescription>Update your account password</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form method="post">
+						<input type="hidden" name="intent" value="changePassword" />
+						<div className="grid gap-4">
+							<div>
+								<Label htmlFor="currentPassword">Current Password</Label>
+								<Input
+									id="currentPassword"
+									name="currentPassword"
+									type="password"
+									placeholder="Enter your current password"
+									required
+									className="mt-1"
+								/>
+							</div>
+							<div>
+								<Label htmlFor="newPassword">New Password</Label>
+								<Input
+									id="newPassword"
+									name="newPassword"
+									type="password"
+									placeholder="Enter new password"
+									required
+									className="mt-1"
+								/>
+							</div>
+							<div>
+								<Label htmlFor="confirmPassword">Confirm New Password</Label>
+								<Input
+									id="confirmPassword"
+									name="confirmPassword"
+									type="password"
+									placeholder="Confirm new password"
+									required
+									className="mt-1"
+								/>
+							</div>
+							<div>
+								<Button type="submit">Change Password</Button>
+							</div>
+						</div>
+					</Form>
+				</CardContent>
+			</Card>
+		</Layout>
+	);
+}

packages/tracker/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/app.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

packages/tracker/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+	out: "./drizzle",
+	schema: "./lib/db/schema.ts",
+	dialect: "sqlite",
+	dbCredentials: {
+		url: process.env.DB_FILE_NAME!
+	},
+});

packages/tracker/lib/auth-utils.ts

@@ -0,0 +1,21 @@
+import { validateSession } from "./auth";
+
+export async function getCurrentUser(request: Request) {
+	const cookies = request.headers.get("Cookie");
+	const sessionMatch = cookies?.match(/session=([^;]+)/);
+	const sessionId = sessionMatch?.[1];
+
+	if (!sessionId) {
+		return null;
+	}
+
+	return await validateSession(sessionId);
+}
+
+export async function requireAuth(request: Request) {
+	const user = await getCurrentUser(request);
+	if (!user) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+	return user;
+}

packages/tracker/lib/auth.ts

@@ -0,0 +1,159 @@
+import { db } from "./db";
+import { users, sessions, projectPermissions, projects } from "./db/schema";
+import { eq, and, or, gte } from "drizzle-orm";
+import { randomBytes } from "crypto";
+import Argon2id from "@rabbit-company/argon2id";
+
+export async function passwordMatches(password: string, storedPassword: string) {
+	return Argon2id.verify(storedPassword, password);
+}
+
+export async function hashPassword(password: string) {
+	return Argon2id.hashEncoded(password);
+}
+
+// Generate a random session ID
+function generateSessionId(): string {
+	return randomBytes(32).toString("hex");
+}
+
+// Create a new user
+export async function createUser(username: string, password: string) {
+	const userId = randomBytes(16).toString("hex");
+	const now = new Date();
+	const hashedPassword = await Argon2id.hashEncoded(password);
+
+	await db.insert(users).values({
+		id: userId,
+		username,
+		password: hashedPassword,
+		createdAt: now,
+		updatedAt: now
+	});
+
+	return userId;
+}
+
+// Authenticate user
+export async function authenticateUser(username: string, password: string) {
+	const user = await db.select().from(users).where(eq(users.username, username)).get();
+	if (!user) return null;
+	const verified = await passwordMatches(password, user.password);
+	if (!verified) {
+		return null;
+	}
+
+	return user;
+}
+
+// Create a session
+export async function createSession(userId: string) {
+	const sessionId = generateSessionId();
+	const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30 days
+
+	await db.insert(sessions).values({
+		id: sessionId,
+		userId,
+		expiresAt,
+		createdAt: new Date()
+	});
+
+	return sessionId;
+}
+
+// Validate session
+export async function validateSession(sessionId: string) {
+	const session = await db
+		.select()
+		.from(sessions)
+		.where(and(eq(sessions.id, sessionId), gte(sessions.expiresAt, new Date())))
+		.get();
+
+	if (!session) {
+		return null;
+	}
+
+	// Get user data
+	const user = await db.select().from(users).where(eq(users.id, session.userId)).get();
+
+	return user;
+}
+
+// Check if user can edit project
+export async function canUserEditProject(userId: string, projectId: string) {
+	// Admin users can edit all projects
+	const user = await db.select().from(users).where(eq(users.id, userId)).get();
+	if (user?.isAdmin) {
+		return true;
+	}
+
+	// Check if user is project owner
+	const project = await db
+		.select()
+		.from(projects)
+		.where(and(eq(projects.id, projectId), eq(projects.ownerId, userId)))
+		.get();
+	if (project) {
+		return true;
+	}
+
+	// Check if user has edit permission
+	const permission = await db
+		.select()
+		.from(projectPermissions)
+		.where(
+			and(
+				eq(projectPermissions.projectId, projectId),
+				eq(projectPermissions.userId, userId)
+			)
+		)
+		.get();
+
+	return !!permission;
+}
+
+// Check if user can view project
+export async function canUserViewProject(userID: string, projectId: string) {
+	if (await canUserEditProject(userID, projectId)) {
+		return true;
+	}
+
+	// Check if project is public
+	const project = await db
+		.select()
+		.from(projects)
+		.where(and(eq(projects.id, projectId), eq(projects.isPublic, true)))
+		.get();
+
+	return !!project;
+}
+
+// Get projects accessible to user
+export async function getUserProjects(userId: string) {
+	const user = await db.select().from(users).where(eq(users.id, userId)).get();
+	
+	if (user?.isAdmin) {
+		// Admin can see all projects
+		return await db.select().from(projects).all();
+	}
+
+	// Get projects where user is owner or has permission
+	const accessibleProjects = await db
+		.select()
+		.from(projects)
+		.where(
+			or(
+				eq(projects.ownerId, userId),
+				eq(projectPermissions.userId, userId)
+			)
+		)
+		.leftJoin(projectPermissions, eq(projects.id, projectPermissions.projectId))
+		.all();
+
+	return accessibleProjects.map(row => row.projects);
+}
+
+// Delete session (logout)
+export async function deleteSession(sessionId: string) {
+	await db.delete(sessions).where(eq(sessions.id, sessionId));
+}

packages/tracker/lib/db/index.ts

@@ -0,0 +1,4 @@
+import { drizzle } from "drizzle-orm/libsql";
+
+
+export const db = drizzle(process.env.DB_FILE_NAME!);

packages/tracker/lib/db/schema.ts

@@ -0,0 +1,151 @@
+import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
+import { relations } from "drizzle-orm";
+
+// Users table
+export const users = sqliteTable("users", {
+	id: text("id").primaryKey(),
+	username: text("username").notNull(),
+	password: text("password_hash").notNull(),
+	isAdmin: integer("is_admin", { mode: "boolean" }).default(false),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+	updatedAt: integer("updated_at", { mode: "timestamp" }).notNull()
+});
+
+// Sessions table for authentication
+export const sessions = sqliteTable("sessions", {
+	id: text("id").primaryKey(),
+	userId: text("user_id")
+		.notNull()
+		.references(() => users.id, { onDelete: "cascade" }),
+	expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull()
+});
+
+// Project permissions table
+export const projectPermissions = sqliteTable("project_permissions", {
+	id: text("id").primaryKey(),
+	projectId: text("project_id")
+		.notNull()
+		.references(() => projects.id, { onDelete: "cascade" }),
+	userId: text("user_id")
+		.notNull()
+		.references(() => users.id, { onDelete: "cascade" }),
+	canEdit: integer("can_edit", { mode: "boolean" }).default(false),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull()
+});
+
+// Projects table
+export const projects = sqliteTable("projects", {
+	id: text("id").primaryKey(),
+	ownerId: text("owner_id")
+		.notNull()
+		.references(() => users.id, { onDelete: "cascade" }),
+	name: text("name").notNull(),
+	description: text("description"),
+	isPublic: integer("is_public", { mode: "boolean" }).default(false),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+	updatedAt: integer("updated_at", { mode: "timestamp" }).notNull()
+});
+
+// Columns table for Kanban board
+export const columns = sqliteTable("columns", {
+	id: text("id").primaryKey(),
+	projectId: text("project_id")
+		.notNull()
+		.references(() => projects.id, { onDelete: "cascade" }),
+	name: text("name").notNull(),
+	position: integer("position").notNull(),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+	updatedAt: integer("updated_at", { mode: "timestamp" }).notNull()
+});
+
+// Tasks table
+export const tasks = sqliteTable("tasks", {
+	id: text("id").primaryKey(),
+	projectId: text("project_id")
+		.notNull()
+		.references(() => projects.id, { onDelete: "cascade" }),
+	columnId: text("column_id")
+		.notNull()
+		.references(() => columns.id, { onDelete: "cascade" }),
+	title: text("title").notNull(),
+	description: text("description"),
+	priority: text("priority", { enum: ["low", "medium", "high"] }).default("medium"),
+	dueDate: integer("due_date", { mode: "timestamp" }),
+	createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+	updatedAt: integer("updated_at", { mode: "timestamp" }).notNull()
+});
+
+// Relations
+export const usersRelations = relations(users, ({ many }) => ({
+	ownedProjects: many(projects, { relationName: "owner" }),
+	projectPermissions: many(projectPermissions),
+	sessions: many(sessions)
+}));
+
+export const sessionsRelations = relations(sessions, ({ one }) => ({
+	user: one(users, {
+		fields: [sessions.userId],
+		references: [users.id]
+	})
+}));
+
+export const projectsRelations = relations(projects, ({ one, many }) => ({
+	owner: one(users, {
+		fields: [projects.ownerId],
+		references: [users.id],
+		relationName: "owner"
+	}),
+	permissions: many(projectPermissions),
+	columns: many(columns),
+	tasks: many(tasks)
+}));
+
+export const projectPermissionsRelations = relations(projectPermissions, ({ one }) => ({
+	project: one(projects, {
+		fields: [projectPermissions.projectId],
+		references: [projects.id]
+	}),
+	user: one(users, {
+		fields: [projectPermissions.userId],
+		references: [users.id]
+	})
+}));
+
+export const columnsRelations = relations(columns, ({ one, many }) => ({
+	project: one(projects, {
+		fields: [columns.projectId],
+		references: [projects.id]
+	}),
+	tasks: many(tasks)
+}));
+
+export const tasksRelations = relations(tasks, ({ one }) => ({
+	project: one(projects, {
+		fields: [tasks.projectId],
+		references: [projects.id]
+	}),
+	column: one(columns, {
+		fields: [tasks.columnId],
+		references: [columns.id]
+	})
+}));
+
+// Types
+export type User = typeof users.$inferSelect;
+export type NewUser = typeof users.$inferInsert;
+
+export type Session = typeof sessions.$inferSelect;
+export type NewSession = typeof sessions.$inferInsert;
+
+export type Project = typeof projects.$inferSelect;
+export type NewProject = typeof projects.$inferInsert;
+
+export type ProjectPermission = typeof projectPermissions.$inferSelect;
+export type NewProjectPermission = typeof projectPermissions.$inferInsert;
+
+export type Column = typeof columns.$inferSelect;
+export type NewColumn = typeof columns.$inferInsert;
+
+export type Task = typeof tasks.$inferSelect;
+export type NewTask = typeof tasks.$inferInsert;

packages/tracker/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "tracker",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "bunx --bun react-router build",
+		"dev": "bunx --bun react-router dev --port 7399",
+		"start": "bunx --bun react-router-serve ./build/server/index.js --port 7399",
+		"typecheck": "bunx --bun react-router typegen && tsc"
+	},
+	"dependencies": {
+		"@alikia/random-key": "npm:@jsr/alikia__random-key",
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
+		"@libsql/client": "^0.15.15",
+		"@rabbit-company/argon2id": "^2.1.0",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
+		"@radix-ui/react-checkbox": "^1.3.3",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-popover": "^1.1.15",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@radix-ui/react-select": "^2.2.6",
+		"@radix-ui/react-separator": "^1.1.7",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-tooltip": "^1.2.8",
+		"@react-router/node": "^7.9.2",
+		"@react-router/serve": "^7.9.2",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"drizzle-orm": "^0.44.6",
+		"isbot": "^5.1.31",
+		"lucide-react": "^0.545.0",
+		"next-themes": "^0.4.6",
+		"react": "^19.1.1",
+		"react-day-picker": "^9.11.1",
+		"react-dom": "^19.1.1",
+		"react-router": "^7.9.2",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.3.1"
+	},
+	"devDependencies": {
+		"@react-router/dev": "^7.9.2",
+		"@tailwindcss/vite": "^4.1.13",
+		"@types/bun": "^1.3.0",
+		"@types/node": "^22",
+		"@types/react": "^19.1.13",
+		"@types/react-dom": "^19.1.9",
+		"drizzle-kit": "^0.31.5",
+		"tailwindcss": "^4.1.13",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.7",
+		"vite-tsconfig-paths": "^5.1.4"
+	}
+}

packages/tracker/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

packages/tracker/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+	// Config options...
+	// Server-side render by default, to enable SPA mode set this to `false`
+	ssr: true
+} satisfies Config;

packages/tracker/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+	"compilerOptions": {
+		"lib": ["DOM", "DOM.Iterable", "ES2022"],
+		"types": ["bun", "vite/client"],
+		"target": "ES2022",
+		"module": "ES2022",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"rootDirs": [".", "./.react-router/types"],
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./app/*"],
+			"@lib/*": ["./lib/*"]
+		},
+		"esModuleInterop": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"strict": true
+	}
+}

packages/tracker/vite.config.ts

@@ -0,0 +1,11 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+	server: {
+		allowedHosts: [process.env.ALLOWED_HOST!]
+	}
+});