feat: add task creation and editing interface

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