Fix update task value null, add create button on toolbar action

src/app/_components/create-task-sheet.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus, Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetClose,
+  SheetTrigger,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+import type { CreateTaskSchema } from "../_lib/validations"
+import { createTaskSchema } from "../_lib/validations"
+import { createTask } from "../_lib/actions"
+import { TaskForm } from "./task-form"
+
+export function CreateTaskSheet() {
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+
+  const form = useForm<CreateTaskSchema>({
+    resolver: zodResolver(createTaskSchema),
+  })
+
+  function onSubmit(input: CreateTaskSchema) {
+    startTransition(async () => {
+      const { error } = await createTask(input)
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      form.reset()
+      setOpen(false)
+      toast.success("Task created")
+    })
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Plus className="size-4" aria-hidden="true" />
+          New task
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Create task</SheetTitle>
+          <SheetDescription>
+            Fill in the details below to create a new task
+          </SheetDescription>
+        </SheetHeader>
+        <TaskForm<CreateTaskSchema> form={form} onSubmit={onSubmit}>
+          <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+            <SheetClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </SheetClose>
+            <Button disabled={isPending}>
+              {isPending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Create
+            </Button>
+          </SheetFooter>
+        </TaskForm>
+      </SheetContent>
+    </Sheet>
+  )
+}

src/app/_components/task-form.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { tasks } from "@/db/schema"
+import type { UseFormReturn, FieldValues, FieldPath } from "react-hook-form"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+interface TaskFormProps<T extends FieldValues> extends Omit<React.ComponentPropsWithRef<"form">, "onSubmit"> {
+  children: React.ReactNode;
+  form: UseFormReturn<T>;
+  onSubmit: (data: T) => void;
+}
+
+export function TaskForm<T extends FieldValues>({
+  form,
+  onSubmit,
+  children,
+}: TaskFormProps<T>) {
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-4"
+      >
+        <FormField
+          control={form.control}
+          name={"title" as FieldPath<T>}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Do a kickflip"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={"label" as FieldPath<T>}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="capitalize">
+                    <SelectValue placeholder="Select a label" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.label.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={"status" as FieldPath<T>}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="capitalize">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.status.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={"priority" as FieldPath<T>}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Priority</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="capitalize">
+                    <SelectValue placeholder="Select a priority" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.priority.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {children}
+      </form>
+    </Form>
+  )
+}

src/app/_components/tasks-table-columns.tsx

@@ -163,7 +163,9 @@ export function getColumns({
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Created At" />
       ),
-      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+      cell: ({ row }) => (
+        <div className="whitespace-nowrap">{formatDate(row.original.createdAt)}</div>
+      ),
     },
     {
       id: "actions",

src/app/_components/tasks-table-toolbar-actions.tsx

@@ -8,6 +8,7 @@ import { exportTableToCSV } from "@/lib/export"
 import { Button } from "@/components/ui/button"
 
 import { DeleteTasksDialog } from "./delete-tasks-dialog"
+import { CreateTaskSheet } from "./create-task-sheet"
 
 interface TasksTableToolbarActionsProps {
   table: Table<Task>
@@ -26,6 +27,7 @@ export function TasksTableToolbarActions({
           onSuccess={() => table.toggleAllRowsSelected(false)}
         />
       ) : null}
+      <CreateTaskSheet />
       <Button
         variant="outline"
         size="sm"