feat: initial commit

components/dashboard/postgres/start-postgres.tsx

@@ -0,0 +1,65 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { CheckCircle2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+  postgresId: string;
+}
+
+export const StartPostgres = ({ postgresId }: Props) => {
+  const { mutateAsync, isLoading } = api.postgres.start.useMutation();
+  const utils = api.useUtils();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="secondary" isLoading={isLoading}>
+          Start
+          <CheckCircle2 className="size-4" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Are you sure to start the database?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will start the database
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={async () => {
+              await mutateAsync({
+                postgresId,
+              })
+                .then(async () => {
+                  await utils.postgres.one.invalidate({
+                    postgresId,
+                  });
+                  toast.success("Database started succesfully");
+                })
+                .catch(() => {
+                  toast.error("Error to start the Database");
+                });
+            }}
+          >
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};