From 895974878d7c23beae6624af8292f70178823937 Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <tiago.ribeiro@inventcloud.com.br>
Date: Wed, 31 Dec 2025 16:44:29 -0300
Subject: [PATCH] refactor: move credentials to settings page and update
 sidebar

---
 .../src/app/dashboard/credentials/page.tsx    | 245 ------------------
 frontend/src/app/dashboard/settings/page.tsx  | 188 ++++++++++----
 frontend/src/components/sidebar.tsx           |   8 +-
 3 files changed, 148 insertions(+), 293 deletions(-)
 delete mode 100644 frontend/src/app/dashboard/credentials/page.tsx

diff --git a/frontend/src/app/dashboard/credentials/page.tsx b/frontend/src/app/dashboard/credentials/page.tsx
deleted file mode 100644
index 6bfd111..0000000
--- a/frontend/src/app/dashboard/credentials/page.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { toast } from "sonner"
-import { credentialsApi, ConfiguredService } from "@/lib/api"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { Badge } from "@/components/ui/badge"
-import { Check, Loader2, Plus, Shield, Trash2, X } from "lucide-react"
-
-export default function CredentialsPage() {
-    const [loading, setLoading] = useState(true)
-    const [services, setServices] = useState<ConfiguredService[]>([])
-    const [openDialog, setOpenDialog] = useState(false)
-    const [selectedService, setSelectedService] = useState<string>("")
-    const [formData, setFormData] = useState<Record<string, string>>({})
-    const [saving, setSaving] = useState(false)
-
-    // Predefined schemas for known services
-    const schemas: Record<string, { label: string, fields: { key: string, label: string, type?: string }[] }> = {
-        stripe: {
-            label: "Stripe",
-            fields: [
-                { key: "secretKey", label: "Secret Key (sk_...)", type: "password" },
-                { key: "webhookSecret", label: "Webhook Secret (whsec_...)", type: "password" },
-                { key: "publishableKey", label: "Publishable Key (pk_...)", type: "text" },
-            ]
-        },
-        storage: {
-            label: "AWS S3 / Compatible",
-            fields: [
-                { key: "endpoint", label: "Endpoint URL", type: "text" },
-                { key: "region", label: "Region", type: "text" },
-                { key: "bucket", label: "Bucket Name", type: "text" },
-                { key: "accessKey", label: "Access Key ID", type: "text" },
-                { key: "secretKey", label: "Secret Access Key", type: "password" },
-            ]
-        },
-        cpanel: {
-            label: "cPanel Integration",
-            fields: [
-                { key: "host", label: "cPanel URL (https://domain:2083)", type: "text" },
-                { key: "username", label: "Username", type: "text" },
-                { key: "apiToken", label: "API Token", type: "password" },
-            ]
-        },
-        cloudflare_config: {
-            label: "Cloudflare",
-            fields: [
-                { key: "apiToken", label: "API Token", type: "password" },
-                { key: "zoneId", label: "Zone ID", type: "text" },
-            ]
-        },
-        smtp: {
-            label: "SMTP Email",
-            fields: [
-                { key: "host", label: "Host", type: "text" },
-                { key: "port", label: "Port", type: "number" },
-                { key: "username", label: "Username", type: "text" },
-                { key: "password", label: "Password", type: "password" },
-                { key: "from_email", label: "From Email", type: "email" },
-                { key: "from_name", label: "From Name", type: "text" },
-                { key: "secure", label: "Use TLS", type: "checkbox" } // TODO handle checkbox
-            ]
-        },
-        appwrite: {
-            label: "Appwrite",
-            fields: [
-                { key: "endpoint", label: "Endpoint", type: "text" },
-                { key: "projectId", label: "Project ID", type: "text" },
-                { key: "apiKey", label: "API Key", type: "password" },
-            ]
-        },
-        firebase: {
-            label: "Firebase (JSON)",
-            fields: [
-                { key: "serviceAccountJson", label: "Service Account JSON Content", type: "textarea" }
-            ]
-        }
-    }
-
-    const availableServices = Object.keys(schemas)
-
-    useEffect(() => {
-        loadServices()
-    }, [])
-
-    const loadServices = async () => {
-        try {
-            setLoading(true)
-            const res = await credentialsApi.list()
-            // Backend returns { services: [...] }
-            if (res && res.services) {
-                setServices(res.services)
-            }
-        } catch (error) {
-            toast.error("Failed to load credentials")
-            console.error(error)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const handleEdit = (serviceName: string) => {
-        setSelectedService(serviceName)
-        setFormData({}) // Reset form, we don't load existing secrets for security
-        setOpenDialog(true)
-    }
-
-    const handleSave = async () => {
-        if (!selectedService) return
-
-        try {
-            setSaving(true)
-            await credentialsApi.save(selectedService, formData)
-            toast.success(`${schemas[selectedService]?.label || selectedService} credentials saved!`)
-            setOpenDialog(false)
-            loadServices()
-        } catch (error: any) {
-            toast.error(error.message || "Failed to save")
-        } finally {
-            setSaving(false)
-        }
-    }
-
-    const handleDelete = async (serviceName: string) => {
-        if (!confirm(`Are you sure you want to delete credentials for ${serviceName}? This will break functionality relying on it.`)) return
-
-        try {
-            await credentialsApi.delete(serviceName)
-            toast.success("Credentials deleted")
-            loadServices()
-        } catch (error: any) {
-            toast.error("Failed to delete")
-        }
-    }
-
-    return (
-        <div className="space-y-6">
-            <div className="flex justify-between items-center">
-                <div>
-                    <h1 className="text-3xl font-bold tracking-tight">System Credentials</h1>
-                    <p className="text-muted-foreground mt-2">
-                        Manage external service connections securely. Keys are encrypted in the database.
-                    </p>
-                </div>
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {services.map((svc) => (
-                    <Card key={svc.service_name} className={svc.is_configured ? "border-green-500/50" : "opacity-70"}>
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">
-                                {schemas[svc.service_name]?.label || svc.service_name}
-                            </CardTitle>
-                            {svc.is_configured ? (
-                                <Badge variant="default" className="bg-green-500/15 text-green-700 hover:bg-green-500/25 border-green-500/50">
-                                    <Check className="h-3 w-3 mr-1" /> Active
-                                </Badge>
-                            ) : (
-                                <Badge variant="outline" className="text-muted-foreground">
-                                    Pending
-                                </Badge>
-                            )}
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold pt-2">
-                                <Shield className={svc.is_configured ? "text-green-500" : "text-gray-400"} size={32} />
-                            </div>
-                            <p className="text-xs text-muted-foreground mt-4">
-                                {svc.is_configured
-                                    ? `Last updated ${new Date(svc.updated_at).toLocaleDateString()}`
-                                    : "Not configured yet"}
-                            </p>
-                            <div className="mt-4 flex gap-2">
-                                <Button variant="outline" size="sm" className="w-full" onClick={() => handleEdit(svc.service_name)}>
-                                    {svc.is_configured ? "Update" : "Configure"}
-                                </Button>
-                                {svc.is_configured && (
-                                    <Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10" onClick={() => handleDelete(svc.service_name)}>
-                                        <Trash2 className="h-4 w-4" />
-                                    </Button>
-                                )}
-                            </div>
-                        </CardContent>
-                    </Card>
-                ))}
-            </div>
-
-            <Dialog open={openDialog} onOpenChange={setOpenDialog}>
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>Configure {schemas[selectedService]?.label || selectedService}</DialogTitle>
-                        <DialogDescription>
-                            Enter the credentials for this service. They will be encrypted before storage.
-                        </DialogDescription>
-                    </DialogHeader>
-
-                    <div className="space-y-4 py-4">
-                        {schemas[selectedService]?.fields.map((field) => (
-                            <div key={field.key} className="space-y-2">
-                                <Label htmlFor={field.key}>{field.label}</Label>
-                                {field.type === 'textarea' ? (
-                                    <textarea
-                                        id={field.key}
-                                        className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                                        value={formData[field.key] || ""}
-                                        onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
-                                    />
-                                ) : (
-                                    <Input
-                                        id={field.key}
-                                        type={field.type}
-                                        value={formData[field.key] || ""}
-                                        onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
-                                        placeholder={`Enter ${field.label}`}
-                                    />
-                                )}
-                            </div>
-                        ))}
-                    </div>
-
-                    <DialogFooter>
-                        <Button variant="outline" onClick={() => setOpenDialog(false)}>Cancel</Button>
-                        <Button onClick={handleSave} disabled={saving}>
-                            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                            Save Credentials
-                        </Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
-        </div>
-    )
-}
diff --git a/frontend/src/app/dashboard/settings/page.tsx b/frontend/src/app/dashboard/settings/page.tsx
index b2a73a7..671b7d1 100644
--- a/frontend/src/app/dashboard/settings/page.tsx
+++ b/frontend/src/app/dashboard/settings/page.tsx
@@ -43,7 +43,7 @@ export default function SettingsPage() {
     const [credentials, setCredentials] = useState<ConfiguredService[]>([])
     const [loadingCredentials, setLoadingCredentials] = useState(false)
     const [selectedService, setSelectedService] = useState<string | null>(null)
-    const [credentialPayload, setCredentialPayload] = useState("")
+    const [credentialPayload, setCredentialPayload] = useState<any>({})
     const [isDialogOpen, setIsDialogOpen] = useState(false)
     const [showPassword, setShowPassword] = useState(false)
 
@@ -133,20 +133,112 @@ export default function SettingsPage() {
         return <div className="flex justify-center p-8"><Loader2 className="animate-spin" /></div>
     }
 
+    // Predefined schemas for known services (Copied from CredentialsPage)
+    const schemas: Record<string, { label: string, fields: { key: string, label: string, type?: string }[] }> = {
+        stripe: {
+            label: "Stripe",
+            fields: [
+                { key: "secretKey", label: "Secret Key (sk_...)", type: "password" },
+                { key: "webhookSecret", label: "Webhook Secret (whsec_...)", type: "password" },
+                { key: "publishableKey", label: "Publishable Key (pk_...)", type: "text" },
+            ]
+        },
+        storage: {
+            label: "AWS S3 / Compatible",
+            fields: [
+                { key: "endpoint", label: "Endpoint URL", type: "text" },
+                { key: "region", label: "Region", type: "text" },
+                { key: "bucket", label: "Bucket Name", type: "text" },
+                { key: "accessKey", label: "Access Key ID", type: "text" },
+                { key: "secretKey", label: "Secret Access Key", type: "password" },
+            ]
+        },
+        cpanel: {
+            label: "cPanel Integration",
+            fields: [
+                { key: "host", label: "cPanel URL (https://domain:2083)", type: "text" },
+                { key: "username", label: "Username", type: "text" },
+                { key: "apiToken", label: "API Token", type: "password" },
+            ]
+        },
+        cloudflare_config: {
+            label: "Cloudflare",
+            fields: [
+                { key: "apiToken", label: "API Token", type: "password" },
+                { key: "zoneId", label: "Zone ID", type: "text" },
+            ]
+        },
+        smtp: {
+            label: "SMTP Email",
+            fields: [
+                { key: "host", label: "Host", type: "text" },
+                { key: "port", label: "Port", type: "number" },
+                { key: "username", label: "Username", type: "text" },
+                { key: "password", label: "Password", type: "password" },
+                { key: "from_email", label: "From Email", type: "email" },
+                { key: "from_name", label: "From Name", type: "text" },
+                { key: "secure", label: "Use TLS", type: "checkbox" }
+            ]
+        },
+        appwrite: {
+            label: "Appwrite",
+            fields: [
+                { key: "endpoint", label: "Endpoint", type: "text" },
+                { key: "projectId", label: "Project ID", type: "text" },
+                { key: "apiKey", label: "API Key", type: "password" },
+            ]
+        },
+        firebase: {
+            label: "Firebase (JSON)",
+            fields: [
+                { key: "serviceAccountJson", label: "Service Account JSON Content", type: "textarea" }
+            ]
+        }
+    }
+
+    const handleOpenCredentialDialog = (serviceName: string) => {
+        setSelectedService(serviceName)
+        setCredentialPayload({})
+        setIsDialogOpen(true)
+    }
+
+    const handleSaveCredential = async () => {
+        if (!selectedService) return
+
+        setSaving(true)
+        try {
+            await credentialsApi.save(selectedService, credentialPayload)
+            toast.success(`Credentials for ${schemas[selectedService]?.label || selectedService} saved`)
+            setIsDialogOpen(false)
+            fetchCredentials()
+        } catch (error) {
+            console.error("Failed to save credential", error)
+            toast.error("Failed to save credential")
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    // ... existing imports ...
+    // Note: State definition needs update to object payload
+    // const [credentialPayload, setCredentialPayload] = useState<any>({})
+
     return (
         <div className="space-y-6">
+            {/* Header ... */}
             <div>
                 <h1 className="text-3xl font-bold tracking-tight">System Settings</h1>
                 <p className="text-muted-foreground">Manage application appearance and integrations.</p>
             </div>
             <Separator />
 
-            <Tabs defaultValue="theme" className="space-y-4">
+            <Tabs defaultValue="integrations" className="space-y-4"> {/* Default to integrations for visibility */}
                 <TabsList>
                     <TabsTrigger value="theme">Branding & Theme</TabsTrigger>
                     <TabsTrigger value="integrations">Integrations & Credentials</TabsTrigger>
                 </TabsList>
 
+                {/* Theme Tab Content (unchanged) */}
                 <TabsContent value="theme" className="space-y-4">
                     <Card>
                         <CardHeader>
@@ -209,36 +301,36 @@ export default function SettingsPage() {
                     <Card>
                         <CardHeader>
                             <CardTitle>External Services</CardTitle>
-                            <CardDescription>Manage credentials for third-party integrations securely.</CardDescription>
+                            <CardDescription>Manage credentials for third-party integrations securely. Keys are encrypted.</CardDescription>
                         </CardHeader>
                         <CardContent>
-                            <div className="space-y-6">
-                                {credentials.map((service) => (
-                                    <div key={service.service_name} className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0">
-                                        <div className="space-y-1">
-                                            <div className="flex items-center gap-2">
-                                                <p className="font-medium capitalize">{service.service_name}</p>
-                                                {service.is_configured ? (
-                                                    <Badge variant="default" className="bg-green-600 hover:bg-green-700">
-                                                        <Check className="w-3 h-3 mr-1" /> Configured
+                            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                                {credentials.map((svc) => (
+                                    <div key={svc.service_name} className="flex flex-col justify-between border rounded-lg p-4 hover:bg-muted/50 transition-colors">
+                                        <div className="space-y-2 mb-4">
+                                            <div className="flex items-center justify-between">
+                                                <p className="font-semibold capitalize">{schemas[svc.service_name]?.label || svc.service_name}</p>
+                                                {svc.is_configured ? (
+                                                    <Badge variant="default" className="bg-green-600/20 text-green-700 hover:bg-green-600/30">
+                                                        <Check className="w-3 h-3 mr-1" /> Active
                                                     </Badge>
                                                 ) : (
-                                                    <Badge variant="secondary">Not Configured</Badge>
+                                                    <Badge variant="outline">Pending</Badge>
                                                 )}
                                             </div>
-                                            <p className="text-sm text-muted-foreground">
-                                                {service.is_configured
-                                                    ? `Updated on ${new Date(service.updated_at).toLocaleDateString()} by ${service.updated_by || 'Unknown'}`
-                                                    : 'No credentials saved for this service.'}
+                                            <p className="text-xs text-muted-foreground">
+                                                {svc.is_configured
+                                                    ? `Updated ${new Date(svc.updated_at).toLocaleDateString()}`
+                                                    : 'Not configured'}
                                             </p>
                                         </div>
-                                        <div className="flex items-center gap-2">
-                                            <Button variant="outline" size="sm" onClick={() => handleOpenCredentialDialog(service.service_name)}>
-                                                <Key className="w-4 h-4 mr-2" />
-                                                {service.is_configured ? "Update" : "Setup"}
+                                        <div className="flex items-center gap-2 mt-auto">
+                                            <Button variant="outline" size="sm" className="w-full" onClick={() => handleOpenCredentialDialog(svc.service_name)}>
+                                                <Key className="w-3 h-3 mr-2" />
+                                                {svc.is_configured ? "Edit" : "Setup"}
                                             </Button>
-                                            {service.is_configured && (
-                                                <Button variant="destructive" size="sm" onClick={() => handleDeleteCredential(service.service_name)}>
+                                            {svc.is_configured && (
+                                                <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:bg-destructive/10" onClick={() => handleDeleteCredential(svc.service_name)}>
                                                     <Trash2 className="w-4 h-4" />
                                                 </Button>
                                             )}
@@ -254,32 +346,40 @@ export default function SettingsPage() {
             <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                 <DialogContent>
                     <DialogHeader>
-                        <DialogTitle>Configure {selectedService}</DialogTitle>
+                        <DialogTitle>Configure {selectedService && (schemas[selectedService]?.label || selectedService)}</DialogTitle>
                         <DialogDescription>
-                            Enter the secret credentials for {selectedService}. These will be encrypted and stored securely.
+                            Enter credentials. Keys are encrypted before storage.
                         </DialogDescription>
                     </DialogHeader>
                     <div className="grid gap-4 py-4">
-                        <div className="grid gap-2">
-                            <Label htmlFor="payload">Secret Payload (JSON or Token)</Label>
-                            <div className="relative">
-                                <Textarea
-                                    id="payload"
-                                    value={credentialPayload}
-                                    onChange={(e) => setCredentialPayload(e.target.value)}
-                                    placeholder={selectedService === 'firebase' ? 'Paste service-account.json content here...' : 'Paste API Key or Connection String...'}
-                                    className="min-h-[100px] font-mono text-xs pr-10" // Monospace for keys
-                                // Hack to masking if needed? No real way to mask textarea easily.
-                                // But typically service account JSONs are visible when pasting.
-                                />
+                        {selectedService && schemas[selectedService]?.fields.map((field) => (
+                            <div key={field.key} className="space-y-2">
+                                <Label htmlFor={field.key}>{field.label}</Label>
+                                {field.type === 'textarea' ? (
+                                    <Textarea
+                                        id={field.key}
+                                        className="font-mono text-xs min-h-[80px]"
+                                        value={(credentialPayload as any)[field.key] || ""}
+                                        onChange={(e) => setCredentialPayload({ ...credentialPayload, [field.key]: e.target.value })}
+                                    />
+                                ) : (
+                                    <Input
+                                        id={field.key}
+                                        type={field.type === 'checkbox' ? 'checkbox' : field.type}
+                                        // TODO: Checkbox handling if needed
+                                        value={(credentialPayload as any)[field.key] || ""}
+                                        onChange={(e) => setCredentialPayload({ ...credentialPayload, [field.key]: e.target.value })}
+                                        placeholder={`Enter ${field.label}`}
+                                    />
+                                )}
                             </div>
-                            <p className="text-xs text-muted-foreground">
-                                {selectedService === 'firebase' && "Paste the entire content of your service-account.json"}
-                                {selectedService === 'stripe' && "Paste your Stripe Secret Key (sk_...)"}
-                                {selectedService === 'appwrite' && "Paste your Appwrite API Key"}
-                                {selectedService === 'lavinmq' && "Paste your AMQP URL"}
-                            </p>
-                        </div>
+                        ))}
+                        {/* Fallback for unknown services if any */}
+                        {selectedService && !schemas[selectedService] && (
+                            <div className="p-4 text-sm text-yellow-600 bg-yellow-50 rounded">
+                                Usage schema not defined for this service.
+                            </div>
+                        )}
                     </div>
                     <DialogFooter>
                         <Button variant="outline" onClick={() => setIsDialogOpen(false)}>Cancel</Button>
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index 520ff1e..d332bf2 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@@ -4,7 +4,7 @@ import Link from "next/link"
 import Image from "next/image"
 import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
-import { LayoutDashboard, Briefcase, Users, MessageSquare, Building2, FileText, HelpCircle, Ticket, Shield } from "lucide-react"
+import { LayoutDashboard, Briefcase, Users, MessageSquare, Building2, FileText, HelpCircle, Ticket, Settings } from "lucide-react"
 import { getCurrentUser, isAdminUser } from "@/lib/auth"
 import { useTranslation } from "@/lib/i18n"
 
@@ -56,9 +56,9 @@ const Sidebar = () => {
             icon: Ticket,
         },
         {
-            title: "Credentials",
-            href: "/dashboard/credentials",
-            icon: Shield,
+            title: t('sidebar.settings') || "Settings", // Fallback if translation missing
+            href: "/dashboard/settings",
+            icon: Settings,
         },
     ]