feat: Implement project search functionality and task management features

- Added search functionality to the Project List page, allowing users to filter projects by name, WP, plot, or investment number.
- Created a new Project Tasks page to manage tasks across all projects, including filtering by status and priority.
- Implemented task status updates and deletion functionality.
- Added a new Task Template Edit page for modifying existing task templates.
- Enhanced Task Template Form to include a description field and loading state during submission.
- Updated UI components for better user experience, including badges for task status and priority.
- Introduced new database queries for managing contracts and projects, including fetching tasks related to projects.
- Added migrations to the database for new columns and improved data handling.

src/components/TaskTemplateForm.js

@@ -1,61 +1,132 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import Button from "./ui/Button";
+import { Input } from "./ui/Input";
 
-export default function TaskTemplateForm() {
+export default function TaskTemplateForm({
+	templateId = null,
+	initialData = null,
+}) {
 	const [name, setName] = useState("");
 	const [max_wait_days, setRequiredWaitDays] = useState("");
+	const [description, setDescription] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [isEditing, setIsEditing] = useState(false);
 	const router = useRouter();
 
+	// Load initial data for editing
+	useEffect(() => {
+		if (templateId) {
+			setIsEditing(true);
+			if (initialData) {
+				setName(initialData.name || "");
+				setRequiredWaitDays(initialData.max_wait_days?.toString() || "");
+				setDescription(initialData.description || "");
+			}
+		}
+	}, [templateId, initialData]);
+
 	async function handleSubmit(e) {
 		e.preventDefault();
+		setLoading(true);
 
-		const res = await fetch("/api/tasks", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				name,
-				max_wait_days: parseInt(max_wait_days, 10) || 0,
-			}),
-		});
+		try {
+			const url = isEditing ? `/api/tasks/${templateId}` : "/api/tasks";
+			const method = isEditing ? "PUT" : "POST";
 
-		if (res.ok) {
-			router.push("/tasks/templates");
-		} else {
-			alert("Failed to create task template.");
+			const res = await fetch(url, {
+				method,
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					name,
+					max_wait_days: parseInt(max_wait_days, 10) || 0,
+					description: description || null,
+				}),
+			});
+
+			if (res.ok) {
+				router.push("/tasks/templates");
+			} else {
+				const error = await res.json();
+				alert(
+					error.error ||
+						`Failed to ${isEditing ? "update" : "create"} task template.`
+				);
+			}
+		} catch (error) {
+			alert(`Error ${isEditing ? "updating" : "creating"} task template.`);
+		} finally {
+			setLoading(false);
 		}
 	}
-
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
+		<form onSubmit={handleSubmit} className="space-y-6">
 			<div>
-				<label className="block font-medium">Name</label>
-				<input
+				<label className="block text-sm font-medium text-gray-700 mb-2">
+					Template Name *
+				</label>
+				<Input
 					type="text"
-					name="name"
 					value={name}
 					onChange={(e) => setName(e.target.value)}
-					className="border p-2 w-full"
+					placeholder="Enter template name"
 					required
 				/>
 			</div>
+
 			<div>
-				<label className="block font-medium">Required Wait Days</label>
-				<input
+				<label className="block text-sm font-medium text-gray-700 mb-2">
+					Max Wait Days
+				</label>
+				<Input
 					type="number"
-					name="max_wait_days"
 					value={max_wait_days}
 					onChange={(e) => setRequiredWaitDays(e.target.value)}
-					className="border p-2 w-full"
+					placeholder="Enter maximum wait days"
+					min="0"
+				/>
+				<p className="text-sm text-gray-500 mt-1">
+					Maximum number of days this task can wait before it needs attention
+				</p>
+			</div>
+
+			<div>
+				<label className="block text-sm font-medium text-gray-700 mb-2">
+					Description
+				</label>
+				<textarea
+					value={description}
+					onChange={(e) => setDescription(e.target.value)}
+					placeholder="Enter template description (optional)"
+					rows={3}
+					className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
 				/>
 			</div>
-			<button
-				type="submit"
-				className="bg-blue-600 text-white px-4 py-2 rounded"
-			>
-				Create Template
-			</button>
+
+			<div className="flex gap-3">
+				<Button type="submit" variant="primary" disabled={loading}>
+					{loading ? (
+						<>
+							<div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+							{isEditing ? "Updating..." : "Creating..."}
+						</>
+					) : isEditing ? (
+						"Update Template"
+					) : (
+						"Create Template"
+					)}
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					onClick={() => router.push("/tasks/templates")}
+					disabled={loading}
+				>
+					Cancel
+				</Button>
+			</div>
 		</form>
 	);
 }

src/components/ui/Badge.js

@@ -9,6 +9,7 @@ const Badge = ({
 	const variants = {
 		default: "bg-gray-100 text-gray-800",
 		primary: "bg-blue-100 text-blue-800",
+		secondary: "bg-gray-200 text-gray-700",
 		success: "bg-green-100 text-green-800",
 		warning: "bg-yellow-100 text-yellow-800",
 		danger: "bg-red-100 text-red-800",

src/components/ui/Button.js

@@ -33,13 +33,13 @@ const Button = forwardRef(
 			<button
 				ref={ref}
 				className={`
-        inline-flex items-center justify-center rounded-lg font-medium transition-colors
-        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
-        disabled:opacity-50 disabled:cursor-not-allowed
-        ${buttonVariants[variant]}
-        ${buttonSizes[size]}
-        ${className}
-      `}
+					inline-flex items-center justify-center rounded-lg font-medium transition-colors
+					focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+					disabled:opacity-50 disabled:cursor-not-allowed
+					${buttonVariants[variant]}
+					${buttonSizes[size]}
+					${className}
+				`}
 				disabled={disabled}
 				{...props}
 			>

src/components/ui/Navigation.js

@@ -5,16 +5,19 @@ import { usePathname } from "next/navigation";
 
 const Navigation = () => {
 	const pathname = usePathname();
-
 	const isActive = (path) => {
 		if (path === "/") return pathname === "/";
-		return pathname.startsWith(path);
+		// Exact match for paths
+		if (pathname === path) return true;
+		// For nested paths, ensure we match the full path segment
+		if (pathname.startsWith(path + "/")) return true;
+		return false;
 	};
-
 	const navItems = [
 		{ href: "/", label: "Dashboard" },
 		{ href: "/projects", label: "Projects" },
 		{ href: "/tasks/templates", label: "Task Templates" },
+		{ href: "/tasks", label: "Project Tasks" },
 		{ href: "/contracts", label: "Contracts" },
 	];