feat: add task creation and editing interface

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",
+  },
+};