From 53ecfa4caf3d63d58578816e965c8c075c8f1b37 Mon Sep 17 00:00:00 2001
From: Mpho10111 <mphomurashiwa@gmail.com>
Date: Tue, 11 Aug 2026 20:55:27 +0200
Subject: [PATCH] feat: add task creation and editing interface

---
 components/AddTaskForm.tsx  |  86 +++++++----------
 components/EditTaskForm.tsx | 186 ++++++++++++++++++++++++++++++++++++
 components/TaskCard.tsx     | 174 +++++++++++++++++++++++++++++++++
 3 files changed, 395 insertions(+), 51 deletions(-)
 create mode 100644 components/EditTaskForm.tsx

diff --git a/components/AddTaskForm.tsx b/components/AddTaskForm.tsx
index 318b808..65a2d78 100644
--- a/components/AddTaskForm.tsx
+++ b/components/AddTaskForm.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import { useState } from "react";
+import type { TaskInput } from "@/types/task";
 
 export default function AddTaskForm({
   onSubmit,
   onClose,
 }: {
-  onSubmit: (task: any) => void;
+  onSubmit: (task: TaskInput) => Promise<void> | void;
   onClose: () => void;
 }) {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<TaskInput>({
     title: "",
     description: "",
     dueDate: "",
@@ -22,13 +23,13 @@ export default function AddTaskForm({
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData.topic) {
       alert("Please select a topic before saving.");
       return;
     }
-    onSubmit(formData);
+    await onSubmit(formData);
     onClose();
   };
 
@@ -61,23 +62,21 @@ export default function AddTaskForm({
             style={styles.input}
           />
 
-          {/* ✅ Dropdown with placeholder */}
           <select
-                name="topic"
-                value={formData.topic}
-                onChange={handleChange}
-                required
-                style={styles.input}
->
-                <option value="">Select a topic...</option>
-                <option value="Academic">Academic</option>
-                <option value="Work">Work</option>
-                <option value="Personal">Personal</option>
-                <option value="Creative">Creative</option>
-                <option value="Household">Household</option>
-                <option value="Other">Other</option>
-            </select>
-
+            name="topic"
+            value={formData.topic}
+            onChange={handleChange}
+            required
+            style={styles.input}
+          >
+            <option value="">Select a topic...</option>
+            <option value="Academic">Academic</option>
+            <option value="Work">Work</option>
+            <option value="Personal">Personal</option>
+            <option value="Creative">Creative</option>
+            <option value="Household">Household</option>
+            <option value="Other">Other</option>
+          </select>
 
           <div style={styles.actions}>
             <button type="submit" style={styles.saveButton}>
@@ -126,34 +125,22 @@ const styles = {
     gap: "12px",
   },
   input: {
-  padding: "10px",
-  borderRadius: "8px",
-  border: "1px solid #cbd5e1",
-  fontSize: "14px",
-  color: "var(--text-dark)",          // dark text
-  fontFamily: "inherit",     // same font as title/description
-},
-
-textarea: {
-  padding: "10px",
-  borderRadius: "8px",
-  border: "1px solid #cbd5e1",
-  fontSize: "14px",
-  color: "var(--text-dark)",
-  fontFamily: "inherit",
-  minHeight: "60px",
-},
-
-select: {
-  padding: "10px",
-  borderRadius: "8px",
-  border: "1px solid #cbd5e1",
-  fontSize: "14px",
-  color: "var(--text-dark)",
-  fontFamily: "inherit",
-  backgroundColor: "white",  // consistent with inputs
-},
-
+    padding: "10px",
+    borderRadius: "8px",
+    border: "1px solid #cbd5e1",
+    fontSize: "14px",
+    color: "var(--text-dark)",
+    fontFamily: "inherit",
+  },
+  textarea: {
+    padding: "10px",
+    borderRadius: "8px",
+    border: "1px solid #cbd5e1",
+    fontSize: "14px",
+    color: "var(--text-dark)",
+    fontFamily: "inherit",
+    minHeight: "60px",
+  },
   actions: {
     display: "flex",
     justifyContent: "space-between",
@@ -178,6 +165,3 @@ select: {
     fontWeight: "600",
   },
 };
-
-
-
diff --git a/components/EditTaskForm.tsx b/components/EditTaskForm.tsx
new file mode 100644
index 0000000..349fb73
--- /dev/null
+++ b/components/EditTaskForm.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useState } from "react";
+import type { Task, TaskStatus, TaskUpdate } from "@/types/task";
+
+type EditFormData = {
+  title: string;
+  description: string;
+  dueDate: string;
+  topic: string;
+  status: TaskStatus;
+};
+
+export default function EditTaskForm({
+  task,
+  onClose,
+  onSubmit,
+}: {
+  task: Task;
+  onClose: () => void;
+  onSubmit: (updates: TaskUpdate) => Promise<void> | void;
+}) {
+  const [formData, setFormData] = useState<EditFormData>({
+    title: task.title,
+    description: task.description,
+    dueDate: task.dueDate,
+    topic: task.topic,
+    status: task.status,
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSubmit(formData);
+    onClose();
+  };
+
+  return (
+    <div style={styles.overlay}>
+      <div style={styles.modal}>
+        <h2 style={styles.title}>Edit Task</h2>
+        <form onSubmit={handleSubmit} style={styles.form}>
+          <input
+            name="title"
+            placeholder="Title"
+            value={formData.title}
+            onChange={handleChange}
+            required
+            style={styles.input}
+          />
+          <textarea
+            name="description"
+            placeholder="Description"
+            value={formData.description}
+            onChange={handleChange}
+            style={styles.textarea}
+          />
+          <input
+            name="dueDate"
+            type="date"
+            value={formData.dueDate}
+            onChange={handleChange}
+            required
+            style={styles.input}
+          />
+          <select
+            name="topic"
+            value={formData.topic}
+            onChange={handleChange}
+            required
+            style={styles.input}
+          >
+            <option value="">Select a topic...</option>
+            <option value="Academic">Academic</option>
+            <option value="Work">Work</option>
+            <option value="Personal">Personal</option>
+            <option value="Creative">Creative</option>
+            <option value="Household">Household</option>
+            <option value="Other">Other</option>
+            <option value="Lab">Lab</option>
+            <option value="Project">Project</option>
+          </select>
+          <select
+            name="status"
+            value={formData.status}
+            onChange={handleChange}
+            required
+            style={styles.input}
+          >
+            <option value="Todo">Todo</option>
+            <option value="In-Progress">In-Progress</option>
+            <option value="Complete">Complete</option>
+          </select>
+
+          <div style={styles.actions}>
+            <button type="submit" style={styles.saveButton}>
+              Save
+            </button>
+            <button type="button" onClick={onClose} style={styles.cancelButton}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  overlay: {
+    position: "fixed" as const,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    background: "rgba(0,0,0,0.4)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1000,
+  },
+  modal: {
+    background: "#f8fafc",
+    padding: "25px",
+    borderRadius: "12px",
+    boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
+    width: "350px",
+  },
+  title: {
+    marginBottom: "15px",
+    fontSize: "22px",
+    fontWeight: "700",
+    color: "var(--text-dark)",
+    textAlign: "center" as const,
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: "12px",
+  },
+  input: {
+    padding: "10px",
+    borderRadius: "8px",
+    border: "1px solid #cbd5e1",
+    fontSize: "14px",
+    color: "var(--text-dark)",
+    fontFamily: "inherit",
+  },
+  textarea: {
+    padding: "10px",
+    borderRadius: "8px",
+    border: "1px solid #cbd5e1",
+    fontSize: "14px",
+    color: "var(--text-dark)",
+    fontFamily: "inherit",
+    minHeight: "60px",
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "15px",
+  },
+  saveButton: {
+    background: "#0ea5e9",
+    color: "white",
+    border: "none",
+    padding: "8px 16px",
+    borderRadius: "8px",
+    cursor: "pointer",
+    fontWeight: "600",
+  },
+  cancelButton: {
+    background: "#e2e8f0",
+    color: "#0f172a",
+    border: "none",
+    padding: "8px 16px",
+    borderRadius: "8px",
+    cursor: "pointer",
+    fontWeight: "600",
+  },
+};
diff --git a/components/TaskCard.tsx b/components/TaskCard.tsx
index e69de29..52cb791 100644
--- a/components/TaskCard.tsx
+++ b/components/TaskCard.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import type { Task } from "@/types/task";
+
+export default function TaskCard({
+  task,
+  onArchive,
+  onEdit,
+  onStatusClick,
+}: {
+  task: Task;
+  onArchive: (task: Task) => void;
+  onEdit: (task: Task) => void;
+  onStatusClick: (task: Task) => void;
+}) {
+  const cardStyle = {
+    ...styles.card,
+    ...(task.isOverdue ? styles.overdueCard : {}),
+    ...(task.archivedAt ? styles.archivedCard : {}),
+  };
+
+  return (
+    <div style={cardStyle}>
+      <div style={styles.cardHeader}>
+        <button
+          type="button"
+          style={{
+            ...styles.circle,
+            cursor:
+              task.status === "Complete" || task.archivedAt ? "default" : "pointer",
+          }}
+          onClick={() => onStatusClick(task)}
+          title="Change Status"
+          disabled={task.status === "Complete" || Boolean(task.archivedAt)}
+        >
+          {task.status === "Complete" ? "✓" : ""}
+        </button>
+
+        <div style={styles.cardTitle}>{task.title}</div>
+      </div>
+
+      <div style={styles.cardDescription}>
+        {task.description.slice(0, 60)}
+        {task.description.length > 60 && "..."}
+      </div>
+
+      <div style={styles.metaRow}>
+        <span>Due: {task.dueDate}</span>
+        <span>{task.topic}</span>
+      </div>
+
+      <div style={styles.badgeRow}>
+        <span style={styles.statusBadge}>{task.status}</span>
+        {task.isOverdue && <span style={styles.overdueBadge}>Overdue</span>}
+        {task.archivedAt && <span style={styles.archivedBadge}>Archived</span>}
+      </div>
+
+      <div style={styles.actions}>
+        <button type="button" onClick={() => onEdit(task)} style={styles.actionButton}>
+          Edit
+        </button>
+        <button
+          type="button"
+          onClick={() => onArchive(task)}
+          style={styles.actionButton}
+          disabled={Boolean(task.archivedAt)}
+        >
+          Archive
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  card: {
+    background: "#dae4f0",
+    padding: "18px",
+    borderRadius: "12px",
+    marginBottom: "15px",
+    color: "#0f172a",
+    fontSize: "16px",
+    border: "2px solid transparent",
+  },
+  overdueCard: {
+    borderColor: "#dc2626",
+    background: "#fee2e2",
+  },
+  archivedCard: {
+    opacity: 0.72,
+  },
+  cardHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "6px",
+    gap: "10px",
+  },
+  cardTitle: {
+    fontWeight: "700",
+    flex: 1,
+  },
+  cardDescription: {
+    fontSize: "13px",
+    opacity: 0.7,
+    marginBottom: "8px",
+  },
+  metaRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "12px",
+    fontSize: "12px",
+    opacity: 0.72,
+    marginBottom: "10px",
+  },
+  badgeRow: {
+    display: "flex",
+    flexWrap: "wrap" as const,
+    gap: "6px",
+    marginBottom: "12px",
+  },
+  statusBadge: {
+    background: "#e0f2fe",
+    color: "#075985",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  overdueBadge: {
+    background: "#dc2626",
+    color: "white",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  archivedBadge: {
+    background: "#475569",
+    color: "white",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  circle: {
+    width: "22px",
+    height: "22px",
+    border: "2px solid black",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "14px",
+    fontWeight: "bold",
+    backgroundColor: "white",
+    color: "#0f172a",
+    padding: 0,
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+  },
+  actionButton: {
+    background: "#f8fafc",
+    color: "#0f172a",
+    border: "1px solid #cbd5e1",
+    padding: "6px 10px",
+    borderRadius: "8px",
+    cursor: "pointer",
+    fontWeight: "600",
+  },
+};