Update - CRM - Accounts - TaskView

- Remove SheetComponent
- Added native shadcn UI Sheet component
- Task closed after new task was added

app/[locale]/(routes)/crm/accounts/[accountId]/components/NewTaskForm.tsx

@@ -46,9 +46,10 @@ import { z } from "zod";
 
 interface NewTaskFormProps {
   account: crm_Accounts | null;
+  onFinish: () => void;
 }
 
-const NewTaskForm = ({ account }: NewTaskFormProps) => {
+const NewTaskForm = ({ account, onFinish }: NewTaskFormProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
   const [date, setDate] = useState<Date>();
@@ -105,14 +106,7 @@ const NewTaskForm = ({ account }: NewTaskFormProps) => {
       });
     } finally {
       setIsLoading(false);
-      form.reset({
-        title: "",
-        content: "",
-        user: "",
-        account: "",
-        dueDateAt: new Date(),
-        priority: "",
-      });
+      onFinish();
       router.refresh();
     }
   };

app/[locale]/(routes)/crm/accounts/[accountId]/components/TasksView.tsx

@@ -13,12 +13,18 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import SheetComponent from "@/components/sheets/Sheet";
 
 import { columns } from "../tasks-data-table/components/columns";
 import { TasksDataTable } from "../tasks-data-table/components/data-table";
 
 import NewTaskForm from "./NewTaskForm";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
 
 //TODO:
 interface TasksViewProps {
@@ -28,6 +34,8 @@ interface TasksViewProps {
 
 const AccountsTasksView = ({ data, account }: TasksViewProps) => {
   const router = useRouter();
+
+  const [open, setOpen] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
@@ -52,12 +60,25 @@ const AccountsTasksView = ({ data, account }: TasksViewProps) => {
             <CardDescription></CardDescription>
           </div>
           <div className="flex space-x-2">
-            <SheetComponent
-              button_label="+"
-              title={"Create Task for: " + account?.name}
-            >
-              <NewTaskForm account={account} />
-            </SheetComponent>
+            <Sheet open={open} onOpenChange={() => setOpen(false)}>
+              <Button
+                className="m-2 cursor-pointer"
+                onClick={() => setOpen(true)}
+              >
+                +
+              </Button>
+              <SheetContent className="min-w-[500px] space-y-2">
+                <SheetHeader>
+                  <SheetTitle>Create new Task</SheetTitle>
+                </SheetHeader>
+                <div className="h-full overflow-y-auto">
+                  <NewTaskForm
+                    account={account}
+                    onFinish={() => setOpen(false)}
+                  />
+                </div>
+              </SheetContent>
+            </Sheet>
           </div>
         </div>
         <Separator />