feat: Add NoteForm, ProjectForm, and ProjectTaskForm components

- Implemented NoteForm for adding notes to projects.
- Created ProjectForm for managing project details with contract selection.
- Developed ProjectTaskForm for adding tasks to projects, supporting both templates and custom tasks.

feat: Add ProjectTasksSection component

- Introduced ProjectTasksSection to display and manage tasks for a specific project.
- Includes functionality for adding, updating, and deleting tasks.

feat: Create TaskTemplateForm for managing task templates

- Added TaskTemplateForm for creating new task templates with required wait days.

feat: Implement UI components

- Created reusable UI components: Badge, Button, Card, Input, Loading, Navigation.
- Enhanced user experience with consistent styling and functionality.

feat: Set up database and queries

- Initialized SQLite database with tables for contracts, projects, tasks, project tasks, and notes.
- Implemented queries for managing contracts, projects, tasks, and notes.

chore: Add error handling and loading states

- Improved error handling in forms and data fetching.
- Added loading states for better user feedback during data operations.

src/app/api/contracts/route.js

@@ -0,0 +1,39 @@
+import db from "@/lib/db";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+	const contracts = db
+		.prepare(
+			`
+    SELECT contract_id, contract_number, contract_name FROM contracts
+  `
+		)
+		.all();
+	return NextResponse.json(contracts);
+}
+
+export async function POST(req) {
+	const data = await req.json();
+	db.prepare(
+		`
+    INSERT INTO contracts (
+      contract_number,
+      contract_name,
+      customer_contract_number,
+      customer,
+	  investor,
+      date_signed,
+      finish_date
+    ) VALUES (?, ?, ?, ?, ?, ?, ?)
+  `
+	).run(
+		data.contract_number,
+		data.contract_name,
+		data.customer_contract_number,
+		data.customer,
+		data.investor,
+		data.date_signed,
+		data.finish_date
+	);
+	return NextResponse.json({ success: true });
+}

src/app/api/notes/route.js

@@ -0,0 +1,44 @@
+import db from "@/lib/db";
+import { NextResponse } from "next/server";
+
+export async function POST(req) {
+	const { project_id, task_id, note } = await req.json();
+
+	if (!note || (!project_id && !task_id)) {
+		return NextResponse.json({ error: "Missing fields" }, { status: 400 });
+	}
+
+	db.prepare(
+		`
+	  INSERT INTO notes (project_id, task_id, note)
+	  VALUES (?, ?, ?)
+	`
+	).run(project_id || null, task_id || null, note);
+
+	return NextResponse.json({ success: true });
+}
+
+export async function DELETE(_, { params }) {
+	const { id } = params;
+
+	db.prepare("DELETE FROM notes WHERE note_id = ?").run(id);
+
+	return NextResponse.json({ success: true });
+}
+
+export async function PUT(req, { params }) {
+	const noteId = params.id;
+	const { note } = await req.json();
+
+	if (!note || !noteId) {
+		return NextResponse.json({ error: "Missing note or ID" }, { status: 400 });
+	}
+
+	db.prepare(
+		`
+	  UPDATE notes SET note = ? WHERE note_id = ?
+	`
+	).run(note, noteId);
+
+	return NextResponse.json({ success: true });
+}

src/app/api/project-tasks/[id]/route.js

@@ -0,0 +1,40 @@
+import {
+	updateProjectTaskStatus,
+	deleteProjectTask,
+} from "@/lib/queries/tasks";
+import { NextResponse } from "next/server";
+
+// PATCH: Update project task status
+export async function PATCH(req, { params }) {
+	try {
+		const { status } = await req.json();
+
+		if (!status) {
+			return NextResponse.json(
+				{ error: "Status is required" },
+				{ status: 400 }
+			);
+		}
+
+		updateProjectTaskStatus(params.id, status);
+		return NextResponse.json({ success: true });
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to update project task" },
+			{ status: 500 }
+		);
+	}
+}
+
+// DELETE: Delete a project task
+export async function DELETE(req, { params }) {
+	try {
+		deleteProjectTask(params.id);
+		return NextResponse.json({ success: true });
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to delete project task" },
+			{ status: 500 }
+		);
+	}
+}

src/app/api/project-tasks/route.js

@@ -0,0 +1,52 @@
+import {
+	getAllTaskTemplates,
+	getProjectTasks,
+	createProjectTask,
+} from "@/lib/queries/tasks";
+import { NextResponse } from "next/server";
+
+// GET: Get all project tasks or task templates based on query params
+export async function GET(req) {
+	const { searchParams } = new URL(req.url);
+	const projectId = searchParams.get("project_id");
+
+	if (projectId) {
+		// Get tasks for a specific project
+		const tasks = getProjectTasks(projectId);
+		return NextResponse.json(tasks);
+	} else {
+		// Default: return all task templates
+		const templates = getAllTaskTemplates();
+		return NextResponse.json(templates);
+	}
+}
+
+// POST: Create a new project task
+export async function POST(req) {
+	try {
+		const data = await req.json();
+
+		if (!data.project_id) {
+			return NextResponse.json(
+				{ error: "project_id is required" },
+				{ status: 400 }
+			);
+		}
+
+		// Check if it's a template task or custom task
+		if (!data.task_template_id && !data.custom_task_name) {
+			return NextResponse.json(
+				{ error: "Either task_template_id or custom_task_name is required" },
+				{ status: 400 }
+			);
+		}
+
+		const result = createProjectTask(data);
+		return NextResponse.json({ success: true, id: result.lastInsertRowid });
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to create project task" },
+			{ status: 500 }
+		);
+	}
+}

src/app/api/projects/[id]/route.js

@@ -0,0 +1,22 @@
+import {
+	getProjectById,
+	updateProject,
+	deleteProject,
+} from "@/lib/queries/projects";
+import { NextResponse } from "next/server";
+
+export async function GET(_, { params }) {
+	const project = getProjectById(params.id);
+	return NextResponse.json(project);
+}
+
+export async function PUT(req, { params }) {
+	const data = await req.json();
+	updateProject(params.id, data);
+	return NextResponse.json({ success: true });
+}
+
+export async function DELETE(_, { params }) {
+	deleteProject(params.id);
+	return NextResponse.json({ success: true });
+}

src/app/api/projects/route.js

@@ -0,0 +1,17 @@
+import { getAllProjects, createProject } from "@/lib/queries/projects";
+import initializeDatabase from "@/lib/init-db";
+import { NextResponse } from "next/server";
+
+// Make sure the DB is initialized before queries run
+initializeDatabase();
+
+export async function GET() {
+	const projects = getAllProjects();
+	return NextResponse.json(projects);
+}
+
+export async function POST(req) {
+	const data = await req.json();
+	createProject(data);
+	return NextResponse.json({ success: true });
+}

src/app/api/tasks/route.js

@@ -0,0 +1,20 @@
+import db from "@/lib/db";
+import { NextResponse } from "next/server";
+
+// POST: create new template
+export async function POST(req) {
+	const { name, max_wait_days } = await req.json();
+
+	if (!name) {
+		return NextResponse.json({ error: "Name is required" }, { status: 400 });
+	}
+
+	db.prepare(
+		`
+    INSERT INTO tasks (name, max_wait_days, is_standard)
+    VALUES (?, ?, 1)
+  `
+	).run(name, max_wait_days || 0);
+
+	return NextResponse.json({ success: true });
+}

src/app/api/tasks/templates/route.js

@@ -0,0 +1,8 @@
+import { getAllTaskTemplates } from "@/lib/queries/tasks";
+import { NextResponse } from "next/server";
+
+// GET: Get all task templates
+export async function GET() {
+	const templates = getAllTaskTemplates();
+	return NextResponse.json(templates);
+}

src/app/contracts/new/page.js

@@ -0,0 +1,10 @@
+import ContractForm from "@/components/ContractForm";
+
+export default function NewContractPage() {
+	return (
+		<div className="p-4 max-w-2xl mx-auto">
+			<h1 className="text-xl font-bold mb-4">Nowa umowa</h1>
+			<ContractForm />
+		</div>
+	);
+}

src/app/contracts/route.js

@@ -0,0 +1,39 @@
+import db from "@/lib/db";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+	const contracts = db
+		.prepare(
+			`
+    SELECT contract_id, contract_number, contract_name FROM contracts
+  `
+		)
+		.all();
+	return NextResponse.json(contracts);
+}
+
+export async function POST(req) {
+	const data = await req.json();
+	db.prepare(
+		`
+    INSERT INTO contracts (
+      contract_number,
+      contract_name,
+      customer_contract_number,
+      customer,
+	  investor,
+      date_signed,
+      finish_date
+    ) VALUES (?, ?, ?, ?, ?, ?, ?)
+  `
+	).run(
+		data.contract_number,
+		data.contract_name,
+		data.customer_contract_number,
+		data.customer,
+		data.investor,
+		data.date_signed,
+		data.finish_date
+	);
+	return NextResponse.json({ success: true });
+}

src/app/globals.css

@@ -3,19 +3,58 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+	--background: #ffffff;
+	--foreground: #171717;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+	color: var(--foreground);
+	background: var(--background);
+	font-family: Helvetica, Arial, sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #c1c1c1;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #a8a8a8;
+}
+
+/* Focus styles */
+.focus-ring {
+	@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+}
+
+/* Animation utilities */
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in {
+	animation: fadeIn 0.3s ease-out;
 }

src/app/layout.js

@@ -1,29 +1,31 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navigation from "@/components/ui/Navigation";
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+	variable: "--font-geist-sans",
+	subsets: ["latin"],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+	variable: "--font-geist-mono",
+	subsets: ["latin"],
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+	title: "Project Management Panel",
+	description: "Professional project management dashboard",
 };
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+			>
+				<Navigation />
+				<main>{children}</main>
+			</body>
+		</html>
+	);
 }

src/app/page.js

@@ -1,101 +1,360 @@
-import Image from "next/image";
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
 
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.js
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+	const [stats, setStats] = useState({
+		totalProjects: 0,
+		activeProjects: 0,
+		pendingTasks: 0,
+		completedTasks: 0,
+	});
+	const [recentProjects, setRecentProjects] = useState([]);
+	const [loading, setLoading] = useState(true);
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+	useEffect(() => {
+		const fetchDashboardData = async () => {
+			try {
+				// Fetch projects for stats and recent projects
+				const projectsRes = await fetch("/api/projects");
+				const projects = await projectsRes.json();
+
+				setStats({
+					totalProjects: projects.length,
+					activeProjects: projects.filter(
+						(p) => new Date(p.finish_date) >= new Date()
+					).length,
+					pendingTasks: 0, // You might want to fetch this from tasks API
+					completedTasks: 0, // You might want to fetch this from tasks API
+				});
+
+				setRecentProjects(projects.slice(0, 5));
+			} catch (error) {
+				console.error("Failed to fetch dashboard data:", error);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchDashboardData();
+	}, []);
+
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="max-w-6xl mx-auto p-6">
+				<div className="mb-8">
+					<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+					<p className="text-gray-600 mt-1">
+						Overview of your projects and tasks
+					</p>
+				</div>
+
+				{/* Stats Cards */}
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+					<Card>
+						<CardContent className="p-6">
+							<div className="flex items-center">
+								<div className="flex-1">
+									<p className="text-sm font-medium text-gray-600">
+										Total Projects
+									</p>
+									<p className="text-2xl font-bold text-gray-900">
+										{stats.totalProjects}
+									</p>
+								</div>
+								<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+									<svg
+										className="w-6 h-6 text-blue-600"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+										/>
+									</svg>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardContent className="p-6">
+							<div className="flex items-center">
+								<div className="flex-1">
+									<p className="text-sm font-medium text-gray-600">
+										Active Projects
+									</p>
+									<p className="text-2xl font-bold text-gray-900">
+										{stats.activeProjects}
+									</p>
+								</div>
+								<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+									<svg
+										className="w-6 h-6 text-green-600"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardContent className="p-6">
+							<div className="flex items-center">
+								<div className="flex-1">
+									<p className="text-sm font-medium text-gray-600">
+										Pending Tasks
+									</p>
+									<p className="text-2xl font-bold text-gray-900">
+										{stats.pendingTasks}
+									</p>
+								</div>
+								<div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
+									<svg
+										className="w-6 h-6 text-yellow-600"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardContent className="p-6">
+							<div className="flex items-center">
+								<div className="flex-1">
+									<p className="text-sm font-medium text-gray-600">
+										Completed Tasks
+									</p>
+									<p className="text-2xl font-bold text-gray-900">
+										{stats.completedTasks}
+									</p>
+								</div>
+								<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
+									<svg
+										className="w-6 h-6 text-purple-600"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M5 13l4 4L19 7"
+										/>
+									</svg>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+
+				{/* Recent Projects */}
+				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+					<Card>
+						<CardHeader>
+							<div className="flex items-center justify-between">
+								<h2 className="text-xl font-semibold text-gray-900">
+									Recent Projects
+								</h2>
+								<Link href="/projects">
+									<Button variant="outline" size="sm">
+										View All
+									</Button>
+								</Link>
+							</div>
+						</CardHeader>
+						<CardContent className="p-0">
+							{loading ? (
+								<div className="p-6">
+									<div className="animate-pulse space-y-3">
+										{[...Array(3)].map((_, i) => (
+											<div key={i} className="flex items-center space-x-3">
+												<div className="w-3 h-3 bg-gray-200 rounded-full"></div>
+												<div className="flex-1 space-y-1">
+													<div className="h-4 bg-gray-200 rounded w-3/4"></div>
+													<div className="h-3 bg-gray-200 rounded w-1/2"></div>
+												</div>
+											</div>
+										))}
+									</div>
+								</div>
+							) : recentProjects.length === 0 ? (
+								<div className="p-6 text-center">
+									<p className="text-gray-500">No projects yet.</p>
+									<Link href="/projects/new" className="mt-2 inline-block">
+										<Button variant="primary" size="sm">
+											Create First Project
+										</Button>
+									</Link>
+								</div>
+							) : (
+								<div className="divide-y divide-gray-200">
+									{recentProjects.map((project) => (
+										<div
+											key={project.project_id}
+											className="p-4 hover:bg-gray-50 transition-colors"
+										>
+											<div className="flex items-center justify-between">
+												<div className="flex-1 min-w-0">
+													<Link
+														href={`/projects/${project.project_id}`}
+														className="text-sm font-medium text-blue-600 hover:text-blue-800 truncate block"
+													>
+														{project.project_name}
+													</Link>
+													<p className="text-xs text-gray-500 mt-1">
+														{project.city} • Due: {project.finish_date}
+													</p>
+												</div>
+												<Badge
+													variant={
+														new Date(project.finish_date) >= new Date()
+															? "success"
+															: "danger"
+													}
+													size="xs"
+												>
+													{new Date(project.finish_date) >= new Date()
+														? "Active"
+														: "Overdue"}
+												</Badge>
+											</div>
+										</div>
+									))}
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					{/* Quick Actions */}
+					<Card>
+						<CardHeader>
+							<h2 className="text-xl font-semibold text-gray-900">
+								Quick Actions
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<Link href="/projects/new" className="block">
+								<div className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+									<div className="flex items-center">
+										<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+											<svg
+												className="w-6 h-6 text-blue-600"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 4v16m8-8H4"
+												/>
+											</svg>
+										</div>
+										<div>
+											<h3 className="text-sm font-medium text-gray-900">
+												New Project
+											</h3>
+											<p className="text-xs text-gray-500">
+												Create a new project
+											</p>
+										</div>
+									</div>
+								</div>
+							</Link>
+
+							<Link href="/contracts/new" className="block">
+								<div className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+									<div className="flex items-center">
+										<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
+											<svg
+												className="w-6 h-6 text-green-600"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+												/>
+											</svg>
+										</div>
+										<div>
+											<h3 className="text-sm font-medium text-gray-900">
+												New Contract
+											</h3>
+											<p className="text-xs text-gray-500">
+												Add a new contract
+											</p>
+										</div>
+									</div>
+								</div>
+							</Link>
+
+							<Link href="/tasks/templates/new" className="block">
+								<div className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+									<div className="flex items-center">
+										<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+											<svg
+												className="w-6 h-6 text-purple-600"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+												/>
+											</svg>
+										</div>
+										<div>
+											<h3 className="text-sm font-medium text-gray-900">
+												Task Template
+											</h3>
+											<p className="text-xs text-gray-500">
+												Create task template
+											</p>
+										</div>
+									</div>
+								</div>
+							</Link>
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+		</div>
+	);
 }

src/app/projects/[id]/edit/page.js

@@ -0,0 +1,15 @@
+import ProjectForm from "@/components/ProjectForm";
+
+export default async function EditProjectPage({ params }) {
+	const res = await fetch(`http://localhost:3000/api/projects/${params.id}`, {
+		cache: "no-store",
+	});
+	const project = await res.json();
+
+	return (
+		<div className="p-4 max-w-2xl mx-auto">
+			<h1 className="text-xl font-bold mb-4">Edit Project</h1>
+			<ProjectForm initialData={project} />
+		</div>
+	);
+}

src/app/projects/[id]/page.js

@@ -0,0 +1,234 @@
+import {
+	getProjectWithContract,
+	getNotesForProject,
+} from "@/lib/queries/projects";
+import NoteForm from "@/components/NoteForm";
+import ProjectTasksSection from "@/components/ProjectTasksSection";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
+import Link from "next/link";
+import { differenceInCalendarDays, parseISO } from "date-fns";
+
+export default async function ProjectViewPage({ params }) {
+	const project = getProjectWithContract(params.id);
+	const notes = getNotesForProject(params.id);
+	const daysRemaining = differenceInCalendarDays(
+		parseISO(project.finish_date),
+		new Date()
+	);
+
+	if (!project) {
+		return (
+			<div className="min-h-screen bg-gray-50 flex items-center justify-center">
+				<Card>
+					<CardContent className="text-center py-8">
+						<p className="text-red-600 text-lg">Project not found.</p>
+						<Link href="/projects" className="mt-4 inline-block">
+							<Button variant="primary">Back to Projects</Button>
+						</Link>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	const getDeadlineVariant = (days) => {
+		if (days < 0) return "danger";
+		if (days <= 7) return "warning";
+		return "success";
+	};
+
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="max-w-6xl mx-auto p-6 space-y-6">
+				<div className="flex items-center justify-between">
+					<Link href="/projects">
+						<Button variant="outline" size="sm">
+							<svg
+								className="w-4 h-4 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M15 19l-7-7 7-7"
+								/>
+							</svg>
+							Back to Projects
+						</Button>
+					</Link>
+					<Link href={`/projects/${params.id}/edit`}>
+						<Button variant="secondary">Edit Project</Button>
+					</Link>
+				</div>
+
+				<div className="flex items-center gap-4 mb-6">
+					<h1 className="text-3xl font-bold text-gray-900">
+						{project.project_name}
+					</h1>
+					<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
+						{daysRemaining === 0
+							? "Due Today"
+							: daysRemaining > 0
+							? `${daysRemaining} days left`
+							: `${Math.abs(daysRemaining)} days overdue`}
+					</Badge>
+				</div>
+
+				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+					<Card>
+						<CardHeader>
+							<h2 className="text-xl font-semibold text-gray-900">
+								Project Information
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Location
+									</span>
+									<p className="text-gray-900">{project.city}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Address
+									</span>
+									<p className="text-gray-900">{project.address}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Plot
+									</span>
+									<p className="text-gray-900">{project.plot}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										District
+									</span>
+									<p className="text-gray-900">{project.district}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Unit
+									</span>
+									<p className="text-gray-900">{project.unit}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Deadline
+									</span>
+									<p className="text-gray-900">{project.finish_date}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">WP</span>
+									<p className="text-gray-900">{project.wp}</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Investment Number
+									</span>
+									<p className="text-gray-900">{project.investment_number}</p>
+								</div>
+							</div>
+							<div>
+								<span className="text-sm font-medium text-gray-500">
+									Contact
+								</span>
+								<p className="text-gray-900">{project.contact}</p>
+							</div>
+							{project.notes && (
+								<div>
+									<span className="text-sm font-medium text-gray-500">
+										Notes
+									</span>
+									<p className="text-gray-900">{project.notes}</p>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<h2 className="text-xl font-semibold text-gray-900">
+								Contract Details
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<span className="text-sm font-medium text-gray-500">
+									Contract Number
+								</span>
+								<p className="text-gray-900">{project.contract_number}</p>
+							</div>
+							<div>
+								<span className="text-sm font-medium text-gray-500">
+									Contract Name
+								</span>
+								<p className="text-gray-900">{project.contract_name}</p>
+							</div>
+							<div>
+								<span className="text-sm font-medium text-gray-500">
+									Customer
+								</span>
+								<p className="text-gray-900">{project.customer}</p>
+							</div>
+							<div>
+								<span className="text-sm font-medium text-gray-500">
+									Investor
+								</span>
+								<p className="text-gray-900">{project.investor}</p>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+
+				<ProjectTasksSection projectId={params.id} />
+
+				<Card>
+					<CardHeader>
+						<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
+					</CardHeader>
+					<CardContent>
+						<div className="mb-6">
+							<NoteForm projectId={params.id} />
+						</div>
+						{notes.length === 0 ? (
+							<div className="text-center py-8">
+								<div className="text-gray-400 mb-2">
+									<svg
+										className="w-12 h-12 mx-auto"
+										fill="currentColor"
+										viewBox="0 0 20 20"
+									>
+										<path
+											fillRule="evenodd"
+											d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v4a1 1 0 001 1h1a1 1 0 100-2v-1a2 2 0 00-2-2H7a1 1 0 000 2z"
+										/>
+									</svg>
+								</div>
+								<p className="text-gray-500">No notes yet.</p>
+							</div>
+						) : (
+							<div className="space-y-3">
+								{notes.map((n) => (
+									<div
+										key={n.note_id}
+										className="border border-gray-200 p-4 rounded-lg bg-gray-50"
+									>
+										<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
+										<p className="text-gray-900">{n.note}</p>
+									</div>
+								))}
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}

src/app/projects/new/page.js

@@ -0,0 +1,10 @@
+import ProjectForm from "@/components/ProjectForm";
+
+export default function NewProjectPage() {
+	return (
+		<div className="p-4 max-w-2xl mx-auto">
+			<h1 className="text-xl font-bold mb-4">New Project</h1>
+			<ProjectForm />
+		</div>
+	);
+}

src/app/projects/page.js

@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
+
+export default function ProjectListPage() {
+	const [projects, setProjects] = useState([]);
+
+	useEffect(() => {
+		fetch("/api/projects")
+			.then((res) => res.json())
+			.then(setProjects);
+	}, []);
+
+	async function handleDelete(id) {
+		const confirmed = confirm("Are you sure you want to delete this project?");
+		if (!confirmed) return;
+
+		const res = await fetch(`/api/projects/${id}`, {
+			method: "DELETE",
+		});
+
+		if (res.ok) {
+			setProjects((prev) => prev.filter((p) => p.project_id !== id));
+		}
+	}
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="max-w-6xl mx-auto p-6">
+				<div className="flex justify-between items-center mb-8">
+					<div>
+						<h1 className="text-3xl font-bold text-gray-900">Projects</h1>
+						<p className="text-gray-600 mt-1">Manage and track your projects</p>
+					</div>
+					<Link href="/projects/new">
+						<Button variant="primary" size="lg">
+							<svg
+								className="w-5 h-5 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							Add Project
+						</Button>
+					</Link>
+				</div>
+
+				{projects.length === 0 ? (
+					<Card>
+						<CardContent className="text-center py-12">
+							<div className="text-gray-400 mb-4">
+								<svg
+									className="w-16 h-16 mx-auto"
+									fill="currentColor"
+									viewBox="0 0 20 20"
+								>
+									<path
+										fillRule="evenodd"
+										d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</div>
+							<h3 className="text-lg font-medium text-gray-900 mb-2">
+								No projects yet
+							</h3>
+							<p className="text-gray-500 mb-6">
+								Get started by creating your first project
+							</p>
+							<Link href="/projects/new">
+								<Button variant="primary">Create First Project</Button>
+							</Link>
+						</CardContent>
+					</Card>
+				) : (
+					<div className="space-y-4">
+						{projects.map((project) => (
+							<Card
+								key={project.project_id}
+								className="hover:shadow-md transition-shadow"
+							>
+								<CardContent className="p-6">
+									<div className="flex items-start justify-between">
+										<div className="flex-1 min-w-0">
+											<div className="flex items-center gap-3 mb-2">
+												<Link
+													href={`/projects/${project.project_id}`}
+													className="text-xl font-semibold text-blue-600 hover:text-blue-800 transition-colors truncate"
+												>
+													{project.project_name}
+												</Link>
+												<Badge variant="primary" size="sm">
+													{project.project_number}
+												</Badge>
+											</div>
+
+											<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-600 mb-4">
+												<div>
+													<span className="font-medium">Location:</span>{" "}
+													{project.city}
+												</div>
+												<div>
+													<span className="font-medium">Finish Date:</span>{" "}
+													{project.finish_date}
+												</div>
+												<div>
+													<span className="font-medium">Contract:</span>{" "}
+													{project.contract_number}
+												</div>
+											</div>
+
+											<div className="flex items-center gap-4">
+												<Link href={`/projects/${project.project_id}`}>
+													<Button variant="outline" size="sm">
+														View Details
+													</Button>
+												</Link>
+												<Link href={`/projects/${project.project_id}/edit`}>
+													<Button variant="secondary" size="sm">
+														Edit
+													</Button>
+												</Link>
+											</div>
+										</div>
+
+										<div className="ml-4 flex-shrink-0">
+											<Button
+												variant="danger"
+												size="sm"
+												onClick={() => handleDelete(project.project_id)}
+											>
+												Delete
+											</Button>
+										</div>
+									</div>
+								</CardContent>
+							</Card>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

src/app/tasks/templates/new/page.js

@@ -0,0 +1,10 @@
+import TaskTemplateForm from "@/components/TaskTemplateForm";
+
+export default function NewTaskTemplatePage() {
+	return (
+		<div className="p-4 max-w-xl mx-auto">
+			<h1 className="text-xl font-bold mb-4">New Task Template</h1>
+			<TaskTemplateForm />
+		</div>
+	);
+}

src/app/tasks/templates/page.js

@@ -0,0 +1,115 @@
+import db from "@/lib/db";
+import Link from "next/link";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
+
+export default function TaskTemplatesPage() {
+	const templates = db
+		.prepare(
+			`
+    SELECT * FROM tasks WHERE is_standard = 1 ORDER BY name ASC
+  `
+		)
+		.all();
+
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="max-w-6xl mx-auto p-6">
+				<div className="flex justify-between items-center mb-8">
+					<div>
+						<h1 className="text-3xl font-bold text-gray-900">Task Templates</h1>
+						<p className="text-gray-600 mt-1">Manage reusable task templates</p>
+					</div>
+					<Link href="/tasks/templates/new">
+						<Button variant="primary" size="lg">
+							<svg
+								className="w-5 h-5 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							New Template
+						</Button>
+					</Link>
+				</div>
+
+				{templates.length === 0 ? (
+					<Card>
+						<CardContent className="text-center py-12">
+							<div className="text-gray-400 mb-4">
+								<svg
+									className="w-16 h-16 mx-auto"
+									fill="currentColor"
+									viewBox="0 0 20 20"
+								>
+									<path
+										fillRule="evenodd"
+										d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</div>
+							<h3 className="text-lg font-medium text-gray-900 mb-2">
+								No task templates yet
+							</h3>
+							<p className="text-gray-500 mb-6">
+								Create reusable task templates to streamline your workflow
+							</p>
+							<Link href="/tasks/templates/new">
+								<Button variant="primary">Create First Template</Button>
+							</Link>
+						</CardContent>
+					</Card>
+				) : (
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+						{templates.map((template) => (
+							<Card
+								key={template.task_id}
+								className="hover:shadow-md transition-shadow"
+							>
+								<CardContent className="p-6">
+									<div className="flex items-start justify-between mb-4">
+										<h3 className="text-lg font-semibold text-gray-900 truncate pr-2">
+											{template.name}
+										</h3>
+										<Badge variant="primary" size="sm">
+											{template.max_wait_days} days
+										</Badge>
+									</div>
+
+									{template.description && (
+										<p className="text-gray-600 text-sm mb-4 line-clamp-2">
+											{template.description}
+										</p>
+									)}
+
+									<div className="flex items-center justify-between">
+										<span className="text-xs text-gray-500">
+											Template ID: {template.task_id}
+										</span>
+										<div className="flex space-x-2">
+											<Button variant="outline" size="sm">
+												Edit
+											</Button>
+											<Button variant="secondary" size="sm">
+												Duplicate
+											</Button>
+										</div>
+									</div>
+								</CardContent>
+							</Card>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}