Admin AI Tools page: unified design system styling, provider selector with OpenAI turd emoji, free-text model input with exact ID warning
This commit is contained in:
@@ -2,9 +2,9 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ADDON_CATALOG, type BrandFeatureKey } from "@/lib/feature-flags";
|
||||
import { toggleBrandFeature } from "@/actions/settings/features";
|
||||
import GlassModal from "./GlassModal";
|
||||
|
||||
type Props = {
|
||||
brandId: string;
|
||||
@@ -15,24 +15,25 @@ export default function BrandFeatureCards({ brandId, initialEnabledFeatures }: P
|
||||
const router = useRouter();
|
||||
const [enabledFeatures, setEnabledFeatures] = useState<Record<string, boolean>>(initialEnabledFeatures);
|
||||
const [toggling, setToggling] = useState<string | null>(null);
|
||||
const [toast, setToast] = useState<string | null>(null);
|
||||
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
||||
const [showEnableModal, setShowEnableModal] = useState<BrandFeatureKey | null>(null);
|
||||
|
||||
const showToast = (msg: string) => {
|
||||
setToast(msg);
|
||||
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
|
||||
setToast({ message, type });
|
||||
setTimeout(() => setToast(null), 3000);
|
||||
};
|
||||
|
||||
const handleToggle = async (key: string) => {
|
||||
const newEnabled = !enabledFeatures[key];
|
||||
const handleToggle = async (key: BrandFeatureKey, enable: boolean) => {
|
||||
setToggling(key);
|
||||
setEnabledFeatures((prev) => ({ ...prev, [key]: newEnabled }));
|
||||
const result = await toggleBrandFeature(brandId, key as BrandFeatureKey, newEnabled);
|
||||
setShowEnableModal(null);
|
||||
setEnabledFeatures((prev) => ({ ...prev, [key]: enable }));
|
||||
const result = await toggleBrandFeature(brandId, key, enable);
|
||||
if (result.success) {
|
||||
showToast(newEnabled ? `${ADDON_CATALOG[key as BrandFeatureKey].name} enabled` : `${ADDON_CATALOG[key as BrandFeatureKey].name} disabled`);
|
||||
showToast(enable ? `${ADDON_CATALOG[key].name} enabled` : `${ADDON_CATALOG[key].name} disabled`);
|
||||
router.refresh();
|
||||
} else {
|
||||
setEnabledFeatures((prev) => ({ ...prev, [key]: !newEnabled }));
|
||||
showToast(`Error: ${result.error}`);
|
||||
setEnabledFeatures((prev) => ({ ...prev, [key]: !enable }));
|
||||
showToast(`Error: ${result.error}`, 'error');
|
||||
}
|
||||
setToggling(null);
|
||||
};
|
||||
@@ -42,10 +43,17 @@ export default function BrandFeatureCards({ brandId, initialEnabledFeatures }: P
|
||||
return (
|
||||
<>
|
||||
{toast && (
|
||||
<div className="fixed bottom-6 right-6 z-50 rounded-xl bg-stone-900 px-4 py-3 text-sm font-medium text-white shadow-lg">
|
||||
{toast}
|
||||
<div
|
||||
className="fixed bottom-6 right-6 z-50 rounded-xl px-5 py-3 text-sm font-medium shadow-lg backdrop-blur-sm"
|
||||
style={{
|
||||
background: toast.type === 'error' ? 'rgba(239, 68, 68, 0.9)' : 'rgba(15, 118, 110, 0.95)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{toast.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
{keys.map((key) => {
|
||||
const addon = ADDON_CATALOG[key];
|
||||
@@ -55,63 +63,127 @@ export default function BrandFeatureCards({ brandId, initialEnabledFeatures }: P
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`rounded-2xl p-6 shadow-black/20 ring-1 ${
|
||||
enabled
|
||||
? "bg-gradient-to-br from-white to-green-50 ring-green-200"
|
||||
: "bg-zinc-900 ring-stone-200"
|
||||
}`}
|
||||
className="rounded-2xl p-6 transition-all"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: enabled ? '1px solid rgba(16, 185, 129, 0.3)' : '1px solid rgba(0, 0, 0, 0.06)',
|
||||
boxShadow: enabled
|
||||
? '0 8px 24px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255,255,255,0.8)'
|
||||
: '0 4px 12px rgba(0, 0, 0, 0.04)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="text-3xl mt-0.5">{addon.icon}</span>
|
||||
<div
|
||||
className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl"
|
||||
style={{
|
||||
background: enabled
|
||||
? 'linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%)'
|
||||
: 'rgba(0, 0, 0, 0.04)',
|
||||
border: enabled ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(0, 0, 0, 0.06)',
|
||||
}}
|
||||
>
|
||||
<span className="text-2xl">{addon.icon}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-1">
|
||||
<h3 className="text-base font-semibold text-zinc-100">{addon.name}</h3>
|
||||
<h3 className="text-base font-semibold text-stone-950">{addon.name}</h3>
|
||||
<span
|
||||
className={`text-xs font-medium rounded-full px-2 py-0.5 ${
|
||||
enabled
|
||||
? "bg-green-900/40 text-green-400"
|
||||
: "bg-stone-100 text-stone-500"
|
||||
}`}
|
||||
className="text-xs font-medium rounded-full px-2.5 py-0.5"
|
||||
style={{
|
||||
background: enabled ? 'rgba(16, 185, 129, 0.15)' : 'rgba(0, 0, 0, 0.04)',
|
||||
color: enabled ? '#047857' : 'rgba(0, 0, 0, 0.4)',
|
||||
border: enabled ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(0, 0, 0, 0.06)',
|
||||
}}
|
||||
>
|
||||
{enabled ? "Enabled" : "Disabled"}
|
||||
{enabled ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-stone-700 leading-relaxed">
|
||||
<p className="text-sm text-stone-500 leading-relaxed">
|
||||
{addon.description}
|
||||
</p>
|
||||
{addon.addOnPrice && !enabled && (
|
||||
<p className="mt-2 text-xs font-medium text-amber-400">
|
||||
Requires: {addon.addOnPrice}
|
||||
{addon.addOnPrice && (
|
||||
<p className="mt-2 text-xs font-medium" style={{ color: '#b45309' }}>
|
||||
{addon.addOnPrice}/month
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center gap-3 justify-end">
|
||||
{enabled && (
|
||||
<Link
|
||||
href={addon.adminRoute}
|
||||
className="rounded-xl border border-zinc-800 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-zinc-950 transition-colors"
|
||||
>
|
||||
Open Module →
|
||||
</Link>
|
||||
)}
|
||||
<div className="mt-5 flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => handleToggle(key)}
|
||||
onClick={() => handleToggle(key, !enabled)}
|
||||
disabled={busy}
|
||||
className={`rounded-xl px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 ${
|
||||
enabled
|
||||
? "border border-red-200 text-red-400 hover:bg-red-900/30"
|
||||
: "bg-green-600 text-white hover:bg-green-700"
|
||||
}`}
|
||||
className="rounded-xl px-5 py-2.5 text-sm font-semibold transition-all"
|
||||
style={{
|
||||
background: enabled
|
||||
? 'rgba(239, 68, 68, 0.1)'
|
||||
: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
|
||||
color: enabled ? '#dc2626' : 'white',
|
||||
border: enabled ? '1px solid rgba(239, 68, 68, 0.2)' : 'none',
|
||||
boxShadow: enabled ? 'none' : '0 2px 8px rgba(16, 185, 129, 0.25)',
|
||||
opacity: busy ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
{busy ? "..." : enabled ? "Disable" : "Enable"}
|
||||
</button>
|
||||
|
||||
{enabled && addon.adminRoute && (
|
||||
<a
|
||||
href={addon.adminRoute}
|
||||
className="rounded-xl px-4 py-2 text-sm font-medium transition-all"
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
color: 'rgba(0, 0, 0, 0.6)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
Open →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Enable confirmation modal */}
|
||||
{showEnableModal && (
|
||||
<GlassModal
|
||||
title={`Enable ${ADDON_CATALOG[showEnableModal].name}?`}
|
||||
subtitle={`This will activate the add-on feature.`}
|
||||
onClose={() => setShowEnableModal(null)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-stone-500">
|
||||
{ADDON_CATALOG[showEnableModal].description}
|
||||
</p>
|
||||
{ADDON_CATALOG[showEnableModal].addOnPrice && (
|
||||
<p className="text-sm font-medium" style={{ color: '#b45309' }}>
|
||||
Price: {ADDON_CATALOG[showEnableModal].addOnPrice}/month
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end gap-3 pt-4" style={{ borderTop: '1px solid rgba(0, 0, 0, 0.04)' }}>
|
||||
<button
|
||||
onClick={() => setShowEnableModal(null)}
|
||||
className="rounded-xl px-5 py-2.5 text-sm font-medium text-stone-500 hover:text-stone-700 hover:bg-stone-100 transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleToggle(showEnableModal, true)}
|
||||
className="rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
|
||||
boxShadow: '0 2px 8px rgba(16, 185, 129, 0.25)',
|
||||
}}
|
||||
>
|
||||
Enable
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</GlassModal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user