create-nextblock 0.10.9 → 0.11.2

package/templates/nextblock-template/app/cms/interactions/InteractionsModerationClient.tsx

@@ -0,0 +1,408 @@
+"use client";
+
+import React, { useState, useTransition } from "react";
+import { Button } from "@nextblock-cms/ui";
+import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
+import { Badge } from "@nextblock-cms/ui";
+import { updateInteractionStatus, saveNotificationEmails } from "../../actions/interactions";
+import { cn } from "@nextblock-cms/utils";
+import {
+  MessageSquare,
+  Check,
+  X,
+  Star,
+  Inbox,
+  Filter,
+  ExternalLink,
+  ThumbsUp,
+  AlertCircle,
+  Mail
+} from "lucide-react";
+import Link from "next/link";
+
+interface InteractionsModerationClientProps {
+  initialInteractions: any[];
+  isAdmin: boolean;
+}
+
+export default function InteractionsModerationClient({
+  initialInteractions,
+  isAdmin,
+}: InteractionsModerationClientProps) {
+  const [interactions, setInteractions] = useState<any[]>(initialInteractions);
+
+  // Notification settings states
+  const [emailsInput, setEmailsInput] = useState("");
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [savingEmails, setSavingEmails] = useState(false);
+  const [settingsError, setSettingsError] = useState<string | null>(null);
+  const [settingsSuccess, setSettingsSuccess] = useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (isAdmin) {
+      import("../../actions/interactions").then(({ getNotificationEmails }) => {
+        getNotificationEmails().then((res) => {
+          if (res.success && res.emails) {
+            setEmailsInput(res.emails);
+          }
+        });
+      });
+    }
+  }, [isAdmin]);
+
+  const handleSaveEmails = async () => {
+    setSavingEmails(true);
+    setSettingsError(null);
+    setSettingsSuccess(null);
+
+    const res = await saveNotificationEmails(emailsInput);
+    setSavingEmails(false);
+
+    if (res.error) {
+      setSettingsError(res.error);
+    } else {
+      setSettingsSuccess("Notification settings saved successfully.");
+      if (res.emails) {
+        setEmailsInput(res.emails);
+      }
+      setTimeout(() => {
+        setSettingsSuccess(null);
+        setIsSettingsOpen(false);
+      }, 1500);
+    }
+  };
+  const [filterType, setFilterType] = useState<"all" | "review" | "comment">("all");
+  const [filterStatus, setFilterStatus] = useState<"pending" | "approved" | "denied">("pending");
+  const [, startTransition] = useTransition();
+  const [moderatingId, setModeratingId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // Counter helper
+  const getCount = (status: "pending" | "approved" | "denied") => {
+    return interactions.filter((i) => i.status === status).length;
+  };
+
+  // Filtered interactions
+  const filteredInteractions = interactions.filter((item) => {
+    const matchesStatus = item.status === filterStatus;
+    const matchesType = filterType === "all" ? true : item.type === filterType;
+    return matchesStatus && matchesType;
+  });
+
+  const handleModerate = async (interactionId: string, status: "approved" | "denied") => {
+    if (!isAdmin) {
+      setActionError("Only administrators can moderate reviews and comments.");
+      return;
+    }
+
+    setModeratingId(interactionId);
+    setActionError(null);
+
+    startTransition(async () => {
+      const res = await updateInteractionStatus(interactionId, status);
+      setModeratingId(null);
+
+      if (res.error) {
+        setActionError(res.error);
+      } else {
+        // Update local state
+        setInteractions((prev) =>
+          prev.map((item) => (item.id === interactionId ? { ...item, status } : item))
+        );
+      }
+    });
+  };
+
+  const getInitials = (profile: any) => {
+    if (profile?.full_name) {
+      return profile.full_name
+        .split(" ")
+        .map((n: string) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return "U";
+  };
+
+  return (
+    <div className="space-y-6 max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between border-b pb-6 gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-2.5">
+            <MessageSquare className="h-8 w-8 text-primary" />
+            Interactions Moderation
+          </h1>
+          <p className="text-sm text-muted-foreground mt-1.5">
+            Review and moderate customer reviews and blog comments.
+          </p>
+        </div>
+        {isAdmin && (
+          <div className="flex items-center gap-2 self-start md:self-auto">
+            <Button
+              onClick={() => setIsSettingsOpen(true)}
+              className="flex items-center gap-2 text-xs"
+              variant="outline"
+            >
+              <Mail className="h-4 w-4" />
+              Notifications
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Tabs / Filters Bar */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-card border border-border/60 rounded-2xl p-4 shadow-sm">
+        {/* Status Tabs */}
+        <div className="flex flex-wrap items-center gap-2">
+          {(["pending", "approved", "denied"] as const).map((status) => {
+            const count = getCount(status);
+            const isActive = filterStatus === status;
+            return (
+              <button
+                key={status}
+                onClick={() => setFilterStatus(status)}
+                className={cn(
+                  "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-xl transition-all border",
+                  isActive
+                    ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                    : "bg-background border-border text-muted-foreground hover:text-foreground hover:border-border/100"
+                )}
+              >
+                <span className="capitalize">{status}</span>
+                <Badge
+                  variant={isActive ? "secondary" : "outline"}
+                  className={cn(
+                    "text-xs font-semibold px-2 py-0.5",
+                    isActive ? "bg-white/20 text-white" : "text-muted-foreground border-border/80"
+                  )}
+                >
+                  {count}
+                </Badge>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Type Filter */}
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-muted-foreground hidden sm:block" />
+          <select
+            value={filterType}
+            onChange={(e: any) => setFilterType(e.target.value)}
+            className="bg-background border border-border rounded-xl px-3 py-2 text-sm font-medium text-foreground focus:ring-1 focus:ring-primary focus:outline-none"
+          >
+            <option value="all">All Types</option>
+            <option value="review">Reviews Only</option>
+            <option value="comment">Comments Only</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Error Banner */}
+      {actionError && (
+        <div className="bg-destructive/10 border border-destructive/20 text-destructive text-sm rounded-xl p-4 flex items-center gap-2.5">
+          <AlertCircle className="h-5 w-5 shrink-0" />
+          <span className="font-medium">{actionError}</span>
+        </div>
+      )}
+
+      {/* Interactions List */}
+      <div className="space-y-4">
+        {filteredInteractions.length > 0 ? (
+          filteredInteractions.map((item) => {
+            const authorName = item.profiles?.full_name || item.profiles?.github_username || "Anonymous";
+            const dateStr = new Date(item.created_at).toLocaleString();
+            const targetName = item.products?.title || item.posts?.title || "Unknown Target";
+            const targetUrl = item.product_id
+              ? `/product/${item.products?.slug}`
+              : `/article/${item.posts?.slug}`;
+            const targetLabel = item.product_id ? "Product" : "Article";
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "bg-card border rounded-2xl p-5 shadow-sm space-y-4 hover:border-border/100 transition-all duration-300 relative",
+                  item.status === "pending" && "border-amber-200/60 dark:border-amber-900/30"
+                )}
+              >
+                {/* Header */}
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-border/40 pb-4">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-10 w-10 border">
+                      <AvatarImage src={item.profiles?.avatar_url || undefined} alt={authorName} />
+                      <AvatarFallback className="bg-primary/5 text-primary text-xs font-semibold">
+                        {getInitials(item.profiles)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-sm font-semibold text-foreground leading-none">
+                          {authorName}
+                        </h3>
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            "text-[10px] font-bold uppercase py-0 px-2",
+                            item.type === "review"
+                              ? "border-amber-500/20 bg-amber-500/5 text-amber-600"
+                              : "border-sky-500/20 bg-sky-500/5 text-sky-600"
+                          )}
+                        >
+                          {item.type}
+                        </Badge>
+                      </div>
+                      <span className="text-[10px] text-muted-foreground mt-1.5 block" suppressHydrationWarning>
+                        {dateStr}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Target Link */}
+                  <div className="flex items-center text-xs">
+                    <span className="text-muted-foreground mr-1.5 font-medium">{targetLabel}:</span>
+                    <Link
+                      href={targetUrl}
+                      target="_blank"
+                      className="text-primary hover:underline font-semibold flex items-center gap-1 group"
+                    >
+                      {targetName}
+                      <ExternalLink className="h-3 w-3 opacity-60 group-hover:opacity-100 transition-opacity" />
+                    </Link>
+                  </div>
+                </div>
+
+                {/* Rating if Review */}
+                {item.type === "review" && item.rating && (
+                  <div className="flex items-center gap-0.5 text-amber-500">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <Star
+                        key={i}
+                        className={cn(
+                          "h-4.5 w-4.5",
+                          i < item.rating ? "fill-amber-500 text-amber-500" : "text-slate-200 dark:text-slate-800"
+                        )}
+                      />
+                    ))}
+                  </div>
+                )}
+
+                {/* Body Content */}
+                <p className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-line text-left">
+                  {item.content}
+                </p>
+
+                {/* Reactions Count */}
+                {Object.keys(item.reactions || {}).length > 0 && (
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground bg-slate-50 dark:bg-slate-900/20 px-3 py-1.5 rounded-xl w-fit">
+                    <ThumbsUp className="h-3.5 w-3.5" />
+                    <span>Likes:</span>
+                    <span className="font-semibold text-foreground">
+                      {item.reactions.likes || 0}
+                    </span>
+                  </div>
+                )}
+
+                {/* Moderation Actions */}
+                {isAdmin && (
+                  <div className="flex items-center justify-end gap-2.5 pt-2">
+                    {item.status !== "approved" && (
+                      <Button
+                        size="sm"
+                        onClick={() => handleModerate(item.id, "approved")}
+                        disabled={moderatingId === item.id}
+                        className="bg-emerald-600 hover:bg-emerald-700 text-white flex items-center gap-1.5 rounded-xl shadow-sm transition-all"
+                      >
+                        <Check className="h-3.5 w-3.5" />
+                        Approve
+                      </Button>
+                    )}
+                    {item.status !== "denied" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleModerate(item.id, "denied")}
+                        disabled={moderatingId === item.id}
+                        className="border-destructive/30 hover:border-destructive hover:bg-destructive/5 text-destructive flex items-center gap-1.5 rounded-xl transition-all"
+                      >
+                        <X className="h-3.5 w-3.5" />
+                        Deny
+                      </Button>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        ) : (
+          <div className="text-center py-20 border border-dashed rounded-2xl bg-slate-50/50 dark:bg-slate-900/10">
+            <Inbox className="mx-auto h-10 w-10 text-slate-300 dark:text-slate-700" />
+            <h3 className="mt-4 text-sm font-semibold text-foreground">All caught up!</h3>
+            <p className="mt-1.5 text-xs text-muted-foreground">
+              No interactions matching status <span className="font-semibold">&quot;{filterStatus}&quot;</span> and type <span className="font-semibold">&quot;{filterType}&quot;</span>.
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Settings Modal */}
+      {isSettingsOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/45 backdrop-blur-sm animate-in fade-in duration-200">
+          <div className="bg-background border border-border rounded-2xl max-w-md w-full p-6 shadow-xl space-y-4 animate-in zoom-in-95 duration-200">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
+                <Mail className="h-5 w-5 text-primary" />
+                Notification Settings
+              </h3>
+              <button
+                onClick={() => setIsSettingsOpen(false)}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            <p className="text-sm text-muted-foreground text-left">
+              Configure which email addresses receive notification alerts when new pending reviews or comments are submitted.
+            </p>
+            <div className="space-y-1.5 text-left">
+              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block">
+                Email Recipients
+              </label>
+              <textarea
+                value={emailsInput}
+                onChange={(e) => setEmailsInput(e.target.value)}
+                placeholder="admin@example.com, moderator@example.com"
+                className="w-full min-h-[80px] bg-background border border-border rounded-xl px-3 py-2 text-sm text-foreground focus:ring-1 focus:ring-primary focus:outline-none"
+              />
+              <span className="text-[10px] text-muted-foreground">
+                Enter a comma-separated list of email addresses.
+              </span>
+            </div>
+
+            {settingsError && <div className="text-xs font-medium text-destructive text-left">{settingsError}</div>}
+            {settingsSuccess && <div className="text-xs font-medium text-emerald-600 text-left">{settingsSuccess}</div>}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onClick={() => setIsSettingsOpen(false)}
+                disabled={savingEmails}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleSaveEmails}
+                disabled={savingEmails}
+                className="min-w-[100px]"
+              >
+                {savingEmails ? "Saving..." : "Save Settings"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/interactions/page.tsx

@@ -0,0 +1,51 @@
+import { redirect } from "next/navigation";
+import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
+import InteractionsModerationClient from "./InteractionsModerationClient";
+
+export const dynamic = "force-dynamic";
+
+export default async function InteractionsPage() {
+  const supabase = createClient();
+  
+  // 1. Authenticate user
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) {
+    redirect("/login?redirect_to=/cms/interactions");
+  }
+
+  // 2. Authorize user (requires ADMIN or WRITER roles to access CMS)
+  const profile = await getProfileWithRoleServerSide(user.id);
+  if (!profile || (profile.role !== "ADMIN" && profile.role !== "WRITER")) {
+    redirect("/cms/dashboard");
+  }
+
+  // 3. Fetch initial interactions (reviews and comments)
+  const { data: interactions, error } = await supabase
+    .from("cms_interactions" as any)
+    .select(`
+      id,
+      type,
+      status,
+      content,
+      rating,
+      reactions,
+      created_at,
+      product_id,
+      post_id,
+      profiles(full_name, avatar_url, github_username),
+      products(title, slug),
+      posts(title, slug)
+    `)
+    .order("created_at", { ascending: false });
+
+  if (error) {
+    console.error("Error fetching initial interactions:", error);
+  }
+
+  return (
+    <InteractionsModerationClient
+      initialInteractions={interactions || []}
+      isAdmin={profile.role === "ADMIN"}
+    />
+  );
+}

package/templates/nextblock-template/app/cms/settings/cortex-ai/SandboxCortexAiSettingsClient.tsx

@@ -27,14 +27,15 @@ import {
   Trash2,
   Info,
 } from 'lucide-react';
+import {
+  createCortexAiStoredModelSelection,
+  type CortexAiStoredModelSelection,
+} from '@nextblock/cortex/client';
 
 const CORTEX_AI_SANDBOX_KEY_LOCAL_STORAGE = 'cortex_ai_sandbox_openrouter_api_key';
 const CORTEX_AI_SANDBOX_MODEL_LOCAL_STORAGE = 'cortex_ai_sandbox_openrouter_model_selection';
 const CORTEX_AI_SETTINGS_CHANGED_EVENT = 'nextblock:cortex-ai-settings-changed';
 
-import type { CortexAiStoredModelSelection } from '../../../../lib/ai-model-registry';
-import { createCortexAiStoredModelSelection } from '../../../../lib/ai-model-registry';
-
 type SandboxCortexAiSettingsClientProps = {
   compatibleModels: Array<{
     id: string;

package/templates/nextblock-template/app/cms/settings/cortex-ai/StoredCortexAiSettingsClient.tsx

@@ -27,7 +27,7 @@ import {
   Trash2,
 } from 'lucide-react';
 
-import type { CortexAiStoredModelSelection } from '../../../../lib/ai-model-registry';
+import type { CortexAiStoredModelSelection } from '@nextblock/cortex/client';
 import {
   clearCortexAiModelSelectionAction,
   clearOpenRouterApiKeyAction,

package/templates/nextblock-template/app/cms/settings/cortex-ai/actions.ts

@@ -9,17 +9,15 @@ import {
   CORTEX_AI_OPENROUTER_MODEL_SELECTION_SETTING_KEY,
   CORTEX_AI_OPENROUTER_SETTING_KEY,
   CORTEX_AI_PACKAGE_ID,
+  createCortexAiStoredModelSelection,
   encryptStoredOpenRouterApiKey,
   getCortexAiEnvConfig,
   getEnvOpenRouterKeyStatus,
   getStoredOpenRouterKeyStatus,
-} from '../../../../lib/ai-config';
-import { listCortexAiCompatibleOpenRouterModels } from '../../../../lib/ai-model-catalog';
-import {
-  createCortexAiStoredModelSelection,
+  listCortexAiCompatibleOpenRouterModels,
   safeParseCortexAiModelSelection,
   type CortexAiStoredModelSelection,
-} from '../../../../lib/ai-model-registry';
+} from '@nextblock/cortex';
 
 const CORTEX_AI_SETTINGS_PATH = '/cms/settings/cortex-ai';
 

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

@@ -1,4 +1,4 @@
-import { listCortexAiCompatibleOpenRouterModels } from '../../../../lib/ai-model-catalog';
+import { listCortexAiCompatibleOpenRouterModels } from '@nextblock/cortex';
 import { getCortexAiSettingsStatus } from './actions';
 import { SandboxCortexAiSettingsClient } from './SandboxCortexAiSettingsClient';
 import { StoredCortexAiSettingsClient } from './StoredCortexAiSettingsClient';

package/templates/nextblock-template/app/page.tsx

@@ -113,14 +113,14 @@ export async function generateMetadata(): Promise<Metadata> {
     ...buildSocialMetadata({
       title,
       description,
-      url: `${siteUrl}/`,
+      url: `${siteUrl}`,
       siteTitle,
       imageUrl: pageData.feature_image_url,
       type: 'website',
       locale: toOpenGraphLocale(pageData.language_code),
     }),
     alternates: {
-      canonical: `${siteUrl}/`,
+      canonical: `${siteUrl}`,
       languages: Object.keys(alternates).length > 0 ? alternates : undefined,
     },
   };

package/templates/nextblock-template/app/product/[slug]/page.tsx

@@ -326,6 +326,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
     title: productRecord.title,
     slug: productRecord.slug,
     sku: productRecord.sku,
+    average_rating: productRecord.average_rating,
+    total_reviews: productRecord.total_reviews,
     upc: productRecord.upc || undefined,
     price: productRecord.price,
     prices: normalizePriceMap(productRecord.prices),

package/templates/nextblock-template/components/AppShell.tsx

@@ -128,7 +128,7 @@ export function AppShell({
                   (corporateFooter.legalName ||
                     corporateFooter.address ||
                     corporateFooter.supportEmail) && (
-                    <p className="max-w-2xl text-[11px] leading-relaxed text-muted-foreground/80">
+                    <p className="max-w-2xl text-[11px] leading-relaxed text-slate-600">
                       {[corporateFooter.legalName, corporateFooter.address]
                         .filter(Boolean)
                         .join(' · ')}