Refactor portfolio admin and views

app/root/portfolio/projects/[id]/page.tsx

@@ -6,6 +6,15 @@ import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getMediaOptions } from "@/lib/media";
 import {
@@ -72,8 +81,6 @@ export default async function RootPortfolioProjectPage({
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
-      saveButtonLabel={copy.saveProject}
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>
@@ -88,20 +95,37 @@ export default async function RootPortfolioProjectPage({
         </MotionFade>
 
         <MotionFade delay={0.2}>
-          <AppCard>
-            <CardContent className="flex items-center justify-between gap-4 p-6">
+          <AppCard level={2}>
+            <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
               <div>
                 <p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
                 <p className="mt-1 text-sm text-muted-foreground">
                   {copy.dangerText}
                 </p>
               </div>
-              <form action={deleteProjectAction}>
-                <input type="hidden" name="id" value={project.id} />
-                <Button type="submit" variant="destructive">
-                  {copy.deleteProject}
-                </Button>
-              </form>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button type="button" variant="destructive">
+                    {copy.deleteProject}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>{copy.deleteProject}</DialogTitle>
+                    <DialogDescription>
+                      This action permanently removes the project data from the database.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <form action={deleteProjectAction}>
+                      <input type="hidden" name="id" value={project.id} />
+                      <Button type="submit" variant="destructive">
+                        Confirm Delete
+                      </Button>
+                    </form>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
             </CardContent>
           </AppCard>
         </MotionFade>

app/root/portfolio/projects/new/page.tsx

@@ -49,7 +49,6 @@ export default async function RootNewPortfolioProjectPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>