Update frontend settings pages

frontend/src/app/(dashboard)/agency/settings/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { apiClient } from "@/lib/api";
-import { Settings, Loader2, Save, Palette, SlidersHorizontal } from "lucide-react";
+import { Settings, Loader2, Save, Palette, SlidersHorizontal, Bell } from "lucide-react";
 
 type SettingsData = Record<string, any>;
 
@@ -49,45 +49,51 @@ export default function AgencySettingsPage() {
             setSettings(res.data.settings);
             setVersion(res.data.version);
             setDirty({});
-            showToast("success", "Agency settings saved");
+            showToast("success", "Agency settings saved successfully");
         } else {
-            showToast("error", res.error || "Failed to save");
+            showToast("error", res.error || "Failed to save settings");
         }
     };
 
     if (loading) {
         return (
             <div className="flex items-center justify-center h-64">
-                <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#0F766E]" />
             </div>
         );
     }
 
     if (!settings) {
-        return <p className="text-slate-400 p-8">No agency found or failed to load settings.</p>;
+        return <p className="text-slate-500 p-8">No agency found or failed to load settings.</p>;
     }
 
     return (
-        <div>
-            <div className="flex items-center justify-between mb-6">
+        <div className="space-y-8 pb-10">
+            {/* Header */}
+            <div className="flex items-center justify-between">
                 <div>
-                    <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
-                        <Settings className="w-6 h-6" /> Agency Settings
+                    <h1 className="text-2xl font-bold tracking-tight text-slate-900 flex items-center gap-2">
+                        <Settings className="w-6 h-6 text-teal-700" /> Agency Settings
                     </h1>
-                    <p className="text-slate-500 text-sm mt-1">Version {version}</p>
+                    <p className="text-slate-500 text-sm mt-1">Configure your agency defaults and branding &middot; Version {version}</p>
                 </div>
                 <button
                     onClick={handleSave}
                     disabled={saving || Object.keys(dirty).length === 0}
-                    className="flex items-center gap-2 px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
+                    className="flex items-center gap-2 px-5 py-2.5 bg-teal-700 text-white rounded-lg hover:bg-teal-800 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-bold transition-all"
                 >
                     {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                     Save
                 </button>
             </div>
 
+            {/* Toast */}
             {toast && (
-                <div className={`mb-4 px-4 py-2 rounded-lg text-sm font-medium ${toast.type === "success" ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20" : "bg-red-500/10 text-red-400 border border-red-500/20"}`}>
+                <div className={`px-4 py-3 rounded-xl text-sm font-medium ${
+                    toast.type === "success"
+                        ? "bg-emerald-50 text-emerald-700 border border-emerald-100"
+                        : "bg-red-50 text-red-700 border border-red-100"
+                }`}>
                     {toast.msg}
                 </div>
             )}
@@ -95,7 +101,7 @@ export default function AgencySettingsPage() {
             <div className="space-y-6">
                 {/* Branding */}
                 <Section title="Branding" icon={Palette}>
-                    <Field label="Logo URL" type="text" value={settings.branding?.logo_url ?? ""} onChange={(v) => updateField("branding", "logo_url", v || null)} />
+                    <Field label="Logo URL" type="text" value={settings.branding?.logo_url ?? ""} onChange={(v) => updateField("branding", "logo_url", v || null)} placeholder="https://example.com/logo.png" />
                     <Field label="Primary Color" type="text" value={settings.branding?.primary_color ?? ""} onChange={(v) => updateField("branding", "primary_color", v || null)} placeholder="#6D28D9" />
                 </Section>
 
@@ -107,12 +113,12 @@ export default function AgencySettingsPage() {
 
                 {/* Limits Override */}
                 <Section title="Limits Override" icon={SlidersHorizontal}>
-                    <Field label="Max Workspaces Override (leave empty for plan default)" type="number" value={settings.limits_override?.max_workspaces_override ?? ""} onChange={(v) => updateField("limits_override", "max_workspaces_override", v ? Number(v) : null)} />
+                    <Field label="Max Workspaces Override" type="number" value={settings.limits_override?.max_workspaces_override ?? ""} onChange={(v) => updateField("limits_override", "max_workspaces_override", v ? Number(v) : null)} placeholder="Leave empty to use plan default" />
                 </Section>
 
                 {/* Notifications */}
-                <Section title="Notifications" icon={Settings}>
-                    <Field label="Agency Alert Email" type="email" value={settings.notifications?.agency_alert_email ?? ""} onChange={(v) => updateField("notifications", "agency_alert_email", v || null)} />
+                <Section title="Notifications" icon={Bell}>
+                    <Field label="Agency Alert Email" type="email" value={settings.notifications?.agency_alert_email ?? ""} onChange={(v) => updateField("notifications", "agency_alert_email", v || null)} placeholder="alerts@agency.com" />
                 </Section>
             </div>
         </div>
@@ -121,11 +127,11 @@ export default function AgencySettingsPage() {
 
 function Section({ title, icon: Icon, children }: { title: string; icon: any; children: React.ReactNode }) {
     return (
-        <div className="bg-white/5 rounded-xl border border-white/10 p-6">
-            <h2 className="text-lg font-semibold text-white flex items-center gap-2 mb-4">
-                <Icon className="w-5 h-5 text-violet-400" /> {title}
+        <div className="bg-white p-6 md:p-8 rounded-xl border border-slate-100 shadow-sm">
+            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-500 flex items-center gap-2 mb-5">
+                <Icon className="w-4 h-4 text-teal-600" /> {title}
             </h2>
-            <div className="space-y-4">{children}</div>
+            <div className="space-y-5">{children}</div>
         </div>
     );
 }
@@ -133,8 +139,14 @@ function Section({ title, icon: Icon, children }: { title: string; icon: any; ch
 function Field({ label, type, value, onChange, ...props }: { label: string; type: string; value: any; onChange: (v: string) => void; [k: string]: any }) {
     return (
         <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">{label}</label>
-            <input type={type} value={value ?? ""} onChange={(e) => onChange(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50" {...props} />
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
+            <input
+                type={type}
+                value={value ?? ""}
+                onChange={(e) => onChange(e.target.value)}
+                className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 outline-none transition-all"
+                {...props}
+            />
         </div>
     );
 }
@@ -142,9 +154,15 @@ function Field({ label, type, value, onChange, ...props }: { label: string; type
 function SelectField({ label, value, options, onChange }: { label: string; value: string; options: string[]; onChange: (v: string) => void }) {
     return (
         <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">{label}</label>
-            <select value={value} onChange={(e) => onChange(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50">
-                {options.map((o) => (<option key={o} value={o}>{o}</option>))}
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
+            <select
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 outline-none transition-all"
+            >
+                {options.map((o) => (
+                    <option key={o} value={o}>{o.charAt(0).toUpperCase() + o.slice(1)}</option>
+                ))}
             </select>
         </div>
     );

frontend/src/app/(dashboard)/settings/page.tsx

@@ -67,58 +67,68 @@ export default function WorkspaceSettingsPage() {
             setSettings(res.data.settings);
             setVersion(res.data.version);
             setDirty({});
-            showToast("success", "Settings saved");
+            showToast("success", "Settings saved successfully");
         } else {
-            showToast("error", res.error || "Failed to save");
+            showToast("error", res.error || "Failed to save settings");
         }
     };
 
     if (loading) {
         return (
             <div className="flex items-center justify-center h-64">
-                <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#0F766E]" />
             </div>
         );
     }
 
     if (!settings) {
-        return <p className="text-slate-400 p-8">Failed to load settings.</p>;
+        return <p className="text-slate-500 p-8">Failed to load settings.</p>;
     }
 
     const s = settings[activeTab] || {};
 
     return (
-        <div>
-            <div className="flex items-center justify-between mb-6">
+        <div className="space-y-8 pb-10">
+            {/* Header */}
+            <div className="flex items-center justify-between">
                 <div>
-                    <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
-                        <Settings className="w-6 h-6" /> Workspace Settings
+                    <h1 className="text-2xl font-bold tracking-tight text-slate-900 flex items-center gap-2">
+                        <Settings className="w-6 h-6 text-teal-700" /> Workspace Settings
                     </h1>
-                    <p className="text-slate-500 text-sm mt-1">Version {version}</p>
+                    <p className="text-slate-500 text-sm mt-1">Manage your workspace configuration &middot; Version {version}</p>
                 </div>
                 <button
                     onClick={handleSave}
                     disabled={saving || Object.keys(dirty).length === 0}
-                    className="flex items-center gap-2 px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
+                    className="flex items-center gap-2 px-5 py-2.5 bg-teal-700 text-white rounded-lg hover:bg-teal-800 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-bold transition-all"
                 >
                     {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                     Save Changes
                 </button>
             </div>
 
+            {/* Toast */}
             {toast && (
-                <div className={`mb-4 px-4 py-2 rounded-lg text-sm font-medium ${toast.type === "success" ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20" : "bg-red-500/10 text-red-400 border border-red-500/20"}`}>
+                <div className={`px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2 ${
+                    toast.type === "success"
+                        ? "bg-emerald-50 text-emerald-700 border border-emerald-100"
+                        : "bg-red-50 text-red-700 border border-red-100"
+                }`}>
                     {toast.msg}
                 </div>
             )}
 
             {/* Tabs */}
-            <div className="flex gap-1 border-b border-white/10 mb-6">
+            <div className="flex border-b border-slate-100 bg-slate-50/50 rounded-t-xl">
                 {TABS.map((tab) => (
                     <button
                         key={tab.key}
                         onClick={() => setActiveTab(tab.key)}
-                        className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${activeTab === tab.key ? "border-violet-500 text-violet-300" : "border-transparent text-slate-400 hover:text-white"}`}
+                        className={`flex items-center gap-2 px-6 py-3.5 text-sm font-bold border-b-2 transition-all ${
+                            activeTab === tab.key
+                                ? "border-teal-600 text-teal-700 bg-white"
+                                : "border-transparent text-slate-400 hover:text-slate-600"
+                        }`}
                     >
                         <tab.icon className="w-4 h-4" />
                         {tab.label}
@@ -127,11 +137,11 @@ export default function WorkspaceSettingsPage() {
             </div>
 
             {/* Fields */}
-            <div className="bg-white/5 rounded-xl border border-white/10 p-6 space-y-5">
+            <div className="bg-white p-6 md:p-8 rounded-xl border border-slate-100 shadow-sm space-y-6">
                 {activeTab === "general" && (
                     <>
-                        <Field label="Name Override" type="text" value={s.name_override ?? ""} onChange={(v) => updateField("general", "name_override", v || null)} />
-                        <Field label="Logo URL" type="text" value={s.logo_url ?? ""} onChange={(v) => updateField("general", "logo_url", v || null)} />
+                        <Field label="Name Override" type="text" value={s.name_override ?? ""} onChange={(v) => updateField("general", "name_override", v || null)} placeholder="Leave empty to use workspace name" />
+                        <Field label="Logo URL" type="text" value={s.logo_url ?? ""} onChange={(v) => updateField("general", "logo_url", v || null)} placeholder="https://example.com/logo.png" />
                         <SelectField label="Timezone" value={s.timezone} options={["UTC", "US/Eastern", "US/Pacific", "Europe/London", "Asia/Dubai", "Asia/Tokyo"]} onChange={(v) => updateField("general", "timezone", v)} />
                         <SelectField label="Default Language" value={s.default_language} options={["en", "ar", "es", "fr", "de", "zh"]} onChange={(v) => updateField("general", "default_language", v)} />
                     </>
@@ -139,8 +149,8 @@ export default function WorkspaceSettingsPage() {
                 {activeTab === "messaging" && (
                     <>
                         <Field label="Default Reply Delay (seconds)" type="number" value={s.default_reply_delay_seconds} onChange={(v) => updateField("messaging", "default_reply_delay_seconds", Number(v))} />
-                        <Toggle label="Fallback Message Enabled" value={s.fallback_message_enabled} onChange={(v) => updateField("messaging", "fallback_message_enabled", v)} />
-                        <Toggle label="Auto-Retry Failed Dispatch" value={s.auto_retry_failed_dispatch} onChange={(v) => updateField("messaging", "auto_retry_failed_dispatch", v)} />
+                        <Toggle label="Fallback Message Enabled" description="Send a fallback message when AI cannot generate a response" value={s.fallback_message_enabled} onChange={(v) => updateField("messaging", "fallback_message_enabled", v)} />
+                        <Toggle label="Auto-Retry Failed Dispatch" description="Automatically retry failed message deliveries with exponential backoff" value={s.auto_retry_failed_dispatch} onChange={(v) => updateField("messaging", "auto_retry_failed_dispatch", v)} />
                     </>
                 )}
                 {activeTab === "ai" && (
@@ -148,19 +158,19 @@ export default function WorkspaceSettingsPage() {
                         <SelectField label="Default Model" value={s.default_model} options={["gemini-1.5-pro", "gemini-1.5-flash", "gemini-2.0-flash"]} onChange={(v) => updateField("ai", "default_model", v)} />
                         <Field label="Temperature" type="number" value={s.temperature} step="0.1" min="0" max="2" onChange={(v) => updateField("ai", "temperature", Number(v))} />
                         <Field label="Max Tokens" type="number" value={s.max_tokens} onChange={(v) => updateField("ai", "max_tokens", Number(v))} />
-                        <Toggle label="Guardrails Enabled" value={s.guardrails_enabled} onChange={(v) => updateField("ai", "guardrails_enabled", v)} />
+                        <Toggle label="Guardrails Enabled" description="Enforce safety guardrails on AI-generated responses" value={s.guardrails_enabled} onChange={(v) => updateField("ai", "guardrails_enabled", v)} />
                     </>
                 )}
                 {activeTab === "automation" && (
                     <>
-                        <Toggle label="Auto-Publish" value={s.auto_publish} onChange={(v) => updateField("automation", "auto_publish", v)} />
+                        <Toggle label="Auto-Publish" description="Automatically publish new automation flows" value={s.auto_publish} onChange={(v) => updateField("automation", "auto_publish", v)} />
                         <Field label="Draft Expiry (days)" type="number" value={s.draft_expiry_days} onChange={(v) => updateField("automation", "draft_expiry_days", Number(v))} />
                     </>
                 )}
                 {activeTab === "notifications" && (
                     <>
-                        <Toggle label="Email Notifications Enabled" value={s.email_notifications_enabled} onChange={(v) => updateField("notifications", "email_notifications_enabled", v)} />
-                        <Field label="Webhook URL" type="text" value={s.webhook_url ?? ""} onChange={(v) => updateField("notifications", "webhook_url", v || null)} />
+                        <Toggle label="Email Notifications Enabled" description="Receive email notifications for important workspace events" value={s.email_notifications_enabled} onChange={(v) => updateField("notifications", "email_notifications_enabled", v)} />
+                        <Field label="Webhook URL" type="text" value={s.webhook_url ?? ""} onChange={(v) => updateField("notifications", "webhook_url", v || null)} placeholder="https://example.com/webhook" />
                     </>
                 )}
             </div>
@@ -173,12 +183,12 @@ export default function WorkspaceSettingsPage() {
 function Field({ label, type, value, onChange, ...props }: { label: string; type: string; value: any; onChange: (v: string) => void; [k: string]: any }) {
     return (
         <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">{label}</label>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
             <input
                 type={type}
                 value={value ?? ""}
                 onChange={(e) => onChange(e.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50"
+                className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 outline-none transition-all"
                 {...props}
             />
         </div>
@@ -188,11 +198,11 @@ function Field({ label, type, value, onChange, ...props }: { label: string; type
 function SelectField({ label, value, options, onChange }: { label: string; value: string; options: string[]; onChange: (v: string) => void }) {
     return (
         <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">{label}</label>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
             <select
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50"
+                className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 outline-none transition-all"
             >
                 {options.map((o) => (
                     <option key={o} value={o}>{o}</option>
@@ -202,16 +212,19 @@ function SelectField({ label, value, options, onChange }: { label: string; value
     );
 }
 
-function Toggle({ label, value, onChange }: { label: string; value: boolean; onChange: (v: boolean) => void }) {
+function Toggle({ label, description, value, onChange }: { label: string; description?: string; value: boolean; onChange: (v: boolean) => void }) {
     return (
-        <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-slate-300">{label}</span>
+        <div className="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
+            <div>
+                <span className="text-sm font-medium text-slate-700">{label}</span>
+                {description && <p className="text-xs text-slate-400 mt-0.5">{description}</p>}
+            </div>
             <button
                 type="button"
                 onClick={() => onChange(!value)}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${value ? "bg-violet-600" : "bg-white/10"}`}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${value ? "bg-teal-600" : "bg-slate-200"}`}
             >
-                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${value ? "translate-x-6" : "translate-x-1"}`} />
+                <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${value ? "translate-x-6" : "translate-x-1"}`} />
             </button>
         </div>
     );