create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/settings/logos/components/LogoForm.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import { useState, useTransition, type ChangeEvent } from 'react'
+import { useRouter } from 'next/navigation'
+import Image from 'next/image'
+import { Input } from '@nextblock-cms/ui'
+import { Label } from '@nextblock-cms/ui'
+import { Button } from '@nextblock-cms/ui'
+import type { Database } from '@nextblock-cms/db'
+import { ImageIcon, X as XIcon } from 'lucide-react'
+import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog'
+type Media = Database['public']['Tables']['media']['Row'];
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+
+interface LogoDetails {
+  id?: string
+  name: string
+  media_id: string | null
+  object_key: string | null
+  width: number | null
+  height: number | null
+  blur_data_url: string | null
+}
+
+interface LogoFormProps {  logo?: Database["public"]["Tables"]["logos"]["Row"] & { media: Media | null }
+  action: (
+    payload:
+      | { name: string; media_id: string }
+      | { id: string; name: string; media_id: string },
+  ) => Promise<{ success: boolean; error?: string }>
+}
+
+export default function LogoForm({ logo, action }: LogoFormProps) {
+  const router = useRouter()
+  const [logoDetails, setLogoDetails] = useState<LogoDetails>({
+    id: logo?.id,
+    name: logo?.name || '',
+    media_id: logo?.media_id || null,
+    object_key: logo?.media?.object_key || null,
+    width: logo?.media?.width || null,
+    height: logo?.media?.height || null,
+    blur_data_url: logo?.media?.blur_data_url || null,
+  })
+  const [formError, setFormError] = useState<string | null>(null)
+  const [isPending, startTransition] = useTransition()
+
+  // Removed unused media library state and effect
+
+  const handleMediaSelect = (media: Media) => {
+    setLogoDetails(prev => ({
+      ...prev,
+      media_id: media.id,
+      object_key: media.object_key,
+      width: media.width ?? null,
+      height: media.height ?? null,
+      blur_data_url: media.blur_data_url ?? null,
+    }))
+    // MediaPickerDialog closes itself after selection
+  }
+
+  const handleRemoveImage = () => {
+    setLogoDetails(prev => ({
+      ...prev,
+      media_id: null,
+      object_key: null,
+      width: null,
+      height: null,
+      blur_data_url: null,
+    }))
+  }
+
+  const handleSave = async () => {
+    if (!logoDetails.name || !logoDetails.media_id) {
+      setFormError('Please provide a name and select an image.')
+      return
+    }
+
+    setFormError(null)
+
+    startTransition(async () => {
+      const payload = {
+        name: logoDetails.name,
+        media_id: logoDetails.media_id as string,
+        ...(logoDetails.id && { id: logoDetails.id }),
+      }
+      const result = await action(payload)
+
+      if (result?.error) {
+        setFormError(result.error)
+      }
+
+      if (result?.success) {
+        router.push('/cms/settings/logos')
+        router.refresh()
+      }
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Label htmlFor="name">Logo Name</Label>
+        <Input
+          id="name"
+          name="name"
+          value={logoDetails.name}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setLogoDetails(prev => ({ ...prev, name: e.target.value }))
+          }
+          required
+          className="mt-1"
+        />
+      </div>
+
+      <div>
+        <Label>Logo Image</Label>
+        <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
+          {logoDetails.object_key &&
+          logoDetails.width &&
+          logoDetails.height ? (
+            <div
+              className="relative group inline-block"
+              style={{ maxWidth: logoDetails.width, maxHeight: 200 }}
+            >
+              <Image
+                src={`${R2_BASE_URL}/${logoDetails.object_key}`}
+                alt={logoDetails.name || 'Selected logo'}
+                width={logoDetails.width}
+                height={logoDetails.height}
+                className="rounded-md object-contain"
+                style={{ maxHeight: '200px' }}
+                placeholder={logoDetails.blur_data_url ? 'blur' : 'empty'}
+                blurDataURL={logoDetails.blur_data_url || undefined}
+              />
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon"
+                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
+                onClick={handleRemoveImage}
+                title="Remove Image"
+              >
+                <XIcon className="h-3 w-3" />
+              </Button>
+            </div>
+          ) : (
+            <ImageIcon className="h-16 w-16 text-muted-foreground" />
+          )}
+
+          <MediaPickerDialog
+            triggerLabel={logoDetails.object_key ? 'Change Image' : 'Select from Library'}
+            onSelect={handleMediaSelect}
+            accept={(m: Media) => !!m.file_type?.startsWith('image/')}
+            title="Select or Upload Logo"
+            defaultFolder="logos/"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Button
+          onClick={handleSave}
+          disabled={isPending || !logoDetails.name || !logoDetails.media_id}
+        >
+          {isPending ? 'Saving...' : `${logo ? 'Update' : 'Create'} Logo`}
+        </Button>
+        {formError && (
+          <div className="text-red-500 text-sm">{formError}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+
+
+

package/templates/nextblock-template/app/cms/settings/logos/new/page.tsx

@@ -0,0 +1,11 @@
+import LogoForm from '../components/LogoForm'
+import { createLogo } from '../actions'
+
+export default function NewLogoPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">Create New Logo</h1>
+      <LogoForm action={createLogo} />
+    </div>
+  )
+}

package/templates/nextblock-template/app/cms/settings/logos/page.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import Link from 'next/link'
+import { Button } from '@nextblock-cms/ui'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@nextblock-cms/ui'
+import { MoreHorizontal, PlusCircle, Edit3, Image as ImageIcon } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@nextblock-cms/ui'
+import { deleteLogo, getLogos } from './actions'
+import MediaImage from '@/app/cms/media/components/MediaImage'
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+
+export default async function CmsLogosListPage() {
+  const logos = await getLogos()
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-semibold">Manage Logos</h1>
+        <Button variant="default" asChild>
+          <Link href="/cms/settings/logos/new">
+            <PlusCircle className="mr-2 h-4 w-4" /> New Logo
+          </Link>
+        </Button>
+      </div>
+
+      {logos.length === 0 ? (
+        <div className="text-center py-10 border rounded-lg">
+          <ImageIcon className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium">No logos found.</h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Get started by creating a new logo.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/settings/logos/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Create Logo
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[80px]">Image</TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead className="hidden md:table-cell">Created At</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {logos.map(logo => (
+                <TableRow key={logo.id}>
+                  <TableCell>
+                    {logo.media ? (
+                      <MediaImage
+                        src={`${R2_BASE_URL}/${logo.media.object_key}`}
+                        alt={logo.media.alt_text || logo.name}
+                        width={logo.media.width || 100}
+                        height={logo.media.height || 100}
+                        className="max-w-16 max-h-16 object-contain"
+                      />
+                    ) : (
+                      <div className="w-16 h-16 bg-muted rounded-sm flex items-center justify-center">
+                        <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">{logo.name}</TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    {new Date(logo.created_at).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link href={`/cms/settings/logos/${logo.id}/edit`}>
+                            <Edit3 className="mr-2 h-4 w-4" />
+                            Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <form action={deleteLogo.bind(null, logo.id)}>
+                          <button type="submit" className="w-full text-left px-2 py-1.5 text-sm text-red-500">
+                            Delete
+                          </button>
+                        </form>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/nextblock-template/app/cms/settings/logos/types.ts

@@ -0,0 +1,8 @@
+import type { Database } from '@nextblock-cms/db';
+
+export type Logo = Database['public']['Tables']['logos']['Row'] & {
+  site_title?: string | null;
+  media: (Database['public']['Tables']['media']['Row'] & {
+    alt_text: string | null;
+  }) | null;
+};

package/templates/nextblock-template/app/cms/users/[id]/edit/page.tsx

@@ -0,0 +1,91 @@
+// app/cms/users/[id]/edit/page.tsx
+import { createClient } from "@nextblock-cms/db/server";
+import UserForm from "../../components/UserForm";
+import { updateUserProfile } from "../../actions";
+import type { Database } from "@nextblock-cms/db";
+import { notFound } from "next/navigation";
+
+type Profile = Database['public']['Tables']['profiles']['Row'];
+type AuthUser = {
+    id: string;
+    email: string | undefined;
+    created_at: string | undefined;
+    last_sign_in_at: string | undefined;
+};
+
+async function getUserAndProfileData(userId: string): Promise<{ authUser: AuthUser; profile: Profile | null } | null> {
+  const supabase = createClient();
+
+  // Fetch user from auth.users
+  // For admin operations, you might need a service_role client to fetch any user.
+  // However, for just getting user details by ID, this might work if RLS allows admin to read.
+  // A more robust way for admin panel is to use supabase.auth.admin.getUserById(userId)
+  // This requires a client initialized with SERVICE_ROLE_KEY.
+
+  // Let's use the admin API for fetching the auth user.
+   const { createClient: createServiceRoleClient } = await import('@supabase/supabase-js');
+   const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+   const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+   
+   if (!supabaseUrl || !serviceRoleKey) {
+     throw new Error('Missing required environment variables');
+   }
+   
+   const serviceSupabase = createServiceRoleClient(supabaseUrl, serviceRoleKey);
+
+  const { data: { user: authUserData }, error: authUserError } = await serviceSupabase.auth.admin.getUserById(userId);
+
+  if (authUserError || !authUserData) {
+    console.error("Error fetching auth user for edit:", authUserError);
+    return null;
+  }
+
+  // Fetch profile from public.profiles
+  const { data: profileData, error: profileError } = await supabase
+    .from("profiles")
+    .select("*")
+    .eq("id", userId)
+    .single();
+
+  if (profileError && profileError.code !== 'PGRST116') { // PGRST116: single row not found, which is okay if profile not created yet
+    console.error("Error fetching profile for edit:", profileError);
+    // Decide if this is a critical error. A user might exist in auth but not profiles if trigger failed.
+  }
+  
+  const simplifiedAuthUser: AuthUser = {
+      id: authUserData.id,
+      email: authUserData.email,
+      created_at: authUserData.created_at,
+      last_sign_in_at: authUserData.last_sign_in_at,
+  };
+
+  return { authUser: simplifiedAuthUser, profile: profileData as Profile | null };
+}
+
+export default async function EditUserPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const userId = params.id;
+  if (!userId) {
+    return notFound();
+  }
+
+  const userData = await getUserAndProfileData(userId);
+
+  if (!userData || !userData.authUser) {
+    return notFound(); // Or a more specific "User not found" component
+  }
+
+  const updateUserActionWithId = updateUserProfile.bind(null, userId);
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Edit User: {userData.authUser.email}</h1>
+      <UserForm
+        userToEditAuth={userData.authUser}
+        userToEditProfile={userData.profile}
+        formAction={updateUserActionWithId}
+        actionButtonText="Update User Profile"
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/users/actions.ts

@@ -0,0 +1,156 @@
+// app/cms/users/actions.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import type { Database } from "@nextblock-cms/db";
+
+type UserRole = Database['public']['Enums']['user_role'];
+
+// Helper to check admin role using the server client
+async function verifyAdmin(supabase: ReturnType<typeof createClient>): Promise<{ isAdmin: boolean; error?: string; userId?: string }> {
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+  if (authError || !user) {
+    return { isAdmin: false, error: "Authentication required." };
+  }
+  const { data: profile, error: profileError } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", user.id)
+    .single();
+
+  if (profileError || !profile) {
+    return { isAdmin: false, error: "Profile not found or error fetching profile." };
+  }
+  if (profile.role !== "ADMIN") {
+    return { isAdmin: false, error: "Admin privileges required." };
+  }
+  return { isAdmin: true, userId: user.id };
+}
+
+type UpdateUserProfilePayload = {
+  role: UserRole;
+  username?: string | null;
+  full_name?: string | null;
+  // Add other editable profile fields here if needed
+};
+
+export async function updateUserProfile(userIdToUpdate: string, formData: FormData) {
+  const supabase = createClient();
+  const adminCheck = await verifyAdmin(supabase);
+  if (!adminCheck.isAdmin) {
+    return { error: adminCheck.error || "Unauthorized" };
+  }
+
+  const rawFormData = {
+    role: formData.get("role") as UserRole,
+    username: formData.get("username") as string || null,
+    full_name: formData.get("full_name") as string || null,
+  };
+
+  if (!rawFormData.role) {
+    return { error: "Role is a required field." };
+  }
+  if (!['ADMIN', 'WRITER', 'USER'].includes(rawFormData.role)) {
+      return { error: "Invalid role specified." };
+  }
+
+  // Prevent an admin from accidentally removing their own admin role if they are the only admin
+  // This is a basic check; a more robust system might count admins.
+  if (userIdToUpdate === adminCheck.userId && rawFormData.role !== 'ADMIN') {
+      const { count } = await supabase
+        .from('profiles')
+        .select('*', { count: 'exact', head: true })
+        .eq('role', 'ADMIN');
+      if (count === 1) {
+          return { error: "Cannot remove the last admin's role." };
+      }
+  }
+
+
+  const profileData: UpdateUserProfilePayload = {
+    role: rawFormData.role,
+    username: rawFormData.username,
+    full_name: rawFormData.full_name,
+  };
+
+  const { error } = await supabase
+    .from("profiles")
+    .update(profileData)
+    .eq("id", userIdToUpdate);
+
+  if (error) {
+    console.error("Error updating user profile:", error);
+    return { error: `Failed to update profile: ${error.message}` };
+  }
+
+  revalidatePath("/cms/users");
+  revalidatePath(`/cms/users/${userIdToUpdate}/edit`);
+  redirect(`/cms/users/${userIdToUpdate}/edit?success=User profile updated successfully`);
+}
+
+export async function deleteUserAndProfile(userIdToDelete: string) {
+
+  // For deleting a user, we need to use the Supabase Admin API,
+  // which requires a client initialized with the SERVICE_ROLE_KEY.
+  // This ensures the operation has the necessary privileges.
+  // IMPORTANT: Ensure SUPABASE_SERVICE_ROLE_KEY is set in your .env.local and Vercel env vars.
+  const supabaseAdmin = createClient(
+    // Re-create client with service role. This is a common pattern.
+    // Ensure your createClient function can be called without args to use env vars,
+    // or pass them explicitly if needed. The one from the template should work.
+    // If your createClient is specific to user context (cookies), you might need a separate
+    // admin client factory. For now, assuming `createClient()` can make a service client
+    // if called in a server action without user cookie context, or if it defaults to service key.
+    // A safer way:
+    // const supabaseAdmin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!);
+    // However, the template's createClient for server components/actions should handle this by not having cookie access.
+    // Let's assume for now createClient() is sufficient if it can use service role.
+    // A more explicit way for admin actions:
+    // import { createClient as createAdminClient } from '@supabase/supabase-js';
+    // const supabaseAdmin = createAdminClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!);
+  );
+
+
+  const adminCheck = await verifyAdmin(supabaseAdmin); // Verify current user is admin
+  if (!adminCheck.isAdmin) {
+    return { error: adminCheck.error || "Unauthorized" };
+  }
+
+  if (userIdToDelete === adminCheck.userId) {
+    return { error: "Admins cannot delete their own account through this panel." };
+  }
+
+  // Use the Supabase Auth Admin API to delete the user
+  // This requires the `SERVICE_ROLE_KEY` to be configured for the Supabase client.
+  // The standard `createClient` from `utils/supabase/server` might not use the service role by default.
+  // You might need a dedicated admin client instance.
+  // For this example, we'll assume `supabase.auth.admin.deleteUser` is available and configured.
+  // If not, this part needs adjustment to use a service_role client.
+
+  // The `createClient()` from `@supabase/ssr` for server context doesn't directly expose `auth.admin`.
+  // We need to create a standard Supabase client with the service role key.
+  const { createClient: createServiceRoleClient } = await import('@supabase/supabase-js');
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  
+  if (!supabaseUrl || !serviceRoleKey) {
+    throw new Error('Missing required environment variables');
+  }
+  
+  const serviceSupabase = createServiceRoleClient(supabaseUrl, serviceRoleKey);
+
+
+  const { error: deletionError } = await serviceSupabase.auth.admin.deleteUser(userIdToDelete);
+
+  if (deletionError) {
+    console.error("Error deleting user:", deletionError);
+    // If the profile was deleted by cascade but auth user deletion failed, this is an inconsistent state.
+    return { error: `Failed to delete user: ${deletionError.message}` };
+  }
+
+  // The `profiles` table has ON DELETE CASCADE for the user ID, so it should be deleted automatically.
+  revalidatePath("/cms/users");
+  redirect("/cms/users?success=User deleted successfully");
+}

package/templates/nextblock-template/app/cms/users/components/DeleteUserButton.tsx

@@ -0,0 +1,71 @@
+// app/cms/users/components/DeleteUserButton.tsx
+"use client"; // This is crucial
+
+import React, { useState, useTransition } from "react";
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2, ShieldAlert } from "lucide-react";
+import { deleteUserAndProfile } from "../actions";
+import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+
+export function DeleteUserButtonClient({
+  userId,
+  userEmail,
+  currentAdminId,
+}: {
+  userId: string;
+  userEmail?: string;
+  currentAdminId?: string;
+}) {
+  void userEmail;
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleDelete = () => {
+    if (userId === currentAdminId) {
+      alert("Admins cannot delete their own account through this panel.");
+      setIsModalOpen(false);
+      return;
+    }
+    startTransition(async () => {
+      const result = await deleteUserAndProfile(userId);
+      if (result?.error) {
+        alert(`Error: ${result.error}`);
+      }
+      setIsModalOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className={`text-red-600 hover:!text-red-600 hover:!bg-red-50 dark:hover:!bg-red-700/20 ${
+          userId === currentAdminId ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+        onSelect={(e) => {
+          e.preventDefault();
+          if (userId !== currentAdminId) setIsModalOpen(true);
+        }}
+        disabled={userId === currentAdminId}
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        Delete User
+        {userId === currentAdminId && (
+          <span title="You cannot delete your own account.">
+            <ShieldAlert
+              className="ml-auto h-4 w-4 text-yellow-500"
+              aria-label="You cannot delete your own account."
+            />
+          </span>
+        )}
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDelete}
+        title="Are you sure?"
+        description="This will permanently delete the user. This action cannot be undone."
+        confirmText={isPending ? "Deleting..." : "Confirm"}
+      />
+    </>
+  );
+}