skalara-web/app/projects/[id]/page.tsx

"use client";
import { useState, useEffect } from "react";
import { Project, Task } from "@/types/models";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const taskSchema = z.object({
  description: z.string().min(10, "Description must be at least 10 characters"),
  status: z.string().optional(),
  priority: z.string().optional(),
  dueDate: z.date().optional(),
  tags: z.array(z.string()).optional(),
});

export default function Project({ params }: { params: { id: string } }) {
  const [project, setProject] = useState<Project | undefined>();
  const [loading, setLoading] = useState(true);
  const [taskOpen, setTaskOpen] = useState(false);
  const form = useForm<z.infer<typeof taskSchema>>({
    resolver: zodResolver(taskSchema),
    defaultValues: {
      description: "",
      status: "",
      priority: "",
      dueDate: undefined,
    },
  });

  useEffect(() => {
    if (params.id) {
      fetch(`/api/projects/${params.id}`)
        .then((res) => {
          if (!res.ok) throw new Error("HTTP status " + res.status);
          return res.json();
        })
        .then((data) => {
          setProject(data);
          setLoading(false);
        })
        .catch((err) => console.error("Failed to fetch project:", err));
    }
  }, [params.id]);

  async function handleSubmit(values: z.infer<typeof taskSchema>) {
    try {
      const res = await fetch(`/api/projects/${params.id}/tasks`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(values),
      });

      if (!res.ok) throw new Error("HTTP status " + res.status);
      const newTask = await res.json();
      setProject((prevProject) => {
        if (!prevProject) return;

        const prevTasks = prevProject.tasks || [];
        return {
          ...prevProject,
          tasks: [...prevTasks, newTask],
        };
      });

      setTaskOpen(false);
    } catch (err) {
      console.error("Failed to create task:", err);
    }
  }

  if (loading) return <p>Loading...</p>;
  if (!project) return <p>No project found.</p>;

  return (
    <div>
      <h2>{project.title}</h2>
      <p>{project.description}</p>
      <div>
        <h2>{project.title}</h2>
        <p>{project.description}</p>
        <Dialog open={taskOpen} onOpenChange={setTaskOpen}>
          <DialogTrigger className={buttonVariants({ variant: "default" })}>
            Add Task
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Task</DialogTitle>
              <DialogDescription>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(handleSubmit)}>
                    <FormField
                      control={form.control}
                      name="description"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Task Description</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="status"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Task Status</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="priority"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Task Priority</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <Button type="submit">Submit</Button>
                  </form>
                </Form>
              </DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
        <h3>Tasks</h3>
        {project.tasks?.map((task: Task) => (
          <div key={task.id}>
            <p>{task.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}