add delete confirm modal to resources and sites

src/app/[orgId]/settings/general/layout.tsx

@@ -0,0 +1,85 @@
+import { internal } from "@app/api";
+import { authCookieHeader } from "@app/api/cookies";
+import { SidebarSettings } from "@app/components/SidebarSettings";
+import { verifySession } from "@app/lib/auth/verifySession";
+import OrgProvider from "@app/providers/OrgProvider";
+import OrgUserProvider from "@app/providers/OrgUserProvider";
+import { GetOrgResponse } from "@server/routers/org";
+import { GetOrgUserResponse } from "@server/routers/user";
+import { AxiosResponse } from "axios";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+type GeneralSettingsProps = {
+    children: React.ReactNode;
+    params: Promise<{ orgId: string }>;
+};
+
+export default async function GeneralSettingsPage({
+    children,
+    params,
+}: GeneralSettingsProps) {
+    const { orgId } = await params;
+
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect("/auth/login");
+    }
+
+    let orgUser = null;
+    try {
+        const getOrgUser = cache(async () =>
+            internal.get<AxiosResponse<GetOrgUserResponse>>(
+                `/org/${orgId}/user/${user.userId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrgUser();
+        orgUser = res.data.data;
+    } catch {
+        redirect(`/${orgId}`);
+    }
+
+    let org = null;
+    try {
+        const getOrg = cache(async () =>
+            internal.get<AxiosResponse<GetOrgResponse>>(
+                `/org/${orgId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrg();
+        org = res.data.data;
+    } catch {
+        redirect(`/${orgId}`);
+    }
+
+    const sidebarNavItems = [
+        {
+            title: "General",
+            href: `/{orgId}/settings/general`,
+        },
+    ];
+
+    return (
+        <>
+            <OrgProvider org={org}>
+                <OrgUserProvider orgUser={orgUser}>
+                    <div className="space-y-0.5 select-none mb-6">
+                        <h2 className="text-2xl font-bold tracking-tight">
+                            General
+                        </h2>
+                        <p className="text-muted-foreground">
+                            Configure your organization's general settings
+                        </p>
+                    </div>
+                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                        {children}
+                    </SidebarSettings>
+                </OrgUserProvider>
+            </OrgProvider>
+        </>
+    );
+}

src/app/[orgId]/settings/general/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { Button } from "@app/components/ui/button";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
+import { useState } from "react";
+
+export default function GeneralPage() {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+    const { orgUser } = userOrgUserContext();
+    const { org } = useOrgContext();
+
+    async function deleteOrg() {
+        console.log("not implemented");
+    }
+
+    return (
+        <>
+            <ConfirmDeleteDialog
+                open={isDeleteModalOpen}
+                setOpen={(val) => {
+                    setIsDeleteModalOpen(val);
+                }}
+                dialog={
+                    <div>
+                        <p className="mb-2">
+                            Are you sure you want to delete the organization{" "}
+                            <b>{org?.org.name}?</b>
+                        </p>
+
+                        <p className="mb-2">
+                            This action is irreversible and will delete all
+                            associated data.
+                        </p>
+
+                        <p>
+                            To confirm, type the name of the organization below.
+                        </p>
+                    </div>
+                }
+                buttonText="Confirm delete organization"
+                onConfirm={deleteOrg}
+                string={org?.org.name || ""}
+                title="Delete organization"
+            />
+
+            {orgUser.isOwner ? (
+                <Button onClick={() => setIsDeleteModalOpen(true)}>
+                    Delete Organization
+                </Button>
+            ) : (
+                <p>Nothing to see here</p>
+            )}
+        </>
+    );
+}