feat: implement enterprise RBAC, profile identity, system management, and audit stabilization

src/pages/Tenants.jsx

@@ -1,121 +1,430 @@
-import { useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Building2, Plus, Search } from "lucide-react";
+import { motion } from "framer-motion";
 import { appClient } from "@/api/appClient";
-import { Plus, Building2, Search } from "lucide-react";
 import PageHeader from "../components/shared/PageHeader";
 import StatusBadge from "../components/shared/StatusBadge";
 import EmptyState from "../components/shared/EmptyState";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/use-toast";
-import { motion } from "framer-motion";
+
+const defaultForm = {
+  name: "",
+  owner_email: "",
+  plan: "starter",
+  status: "active",
+  currency: "NGN",
+  payment_provider: "paystack",
+  vm_limit: 5,
+  cpu_limit: 16,
+  ram_limit_mb: 16384,
+  disk_limit_gb: 500
+};
+
+function slugify(value) {
+  return String(value || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-");
+}
 
 export default function Tenants() {
-  const [tenants, setTenants] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
-  const [showCreate, setShowCreate] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const [form, setForm] = useState({ name: "", owner_email: "", plan: "starter", currency: "NGN", payment_provider: "paystack", vm_limit: 5, cpu_limit: 16, ram_limit_mb: 16384, disk_limit_gb: 500 });
   const { toast } = useToast();
 
-  useEffect(() => { loadData(); }, []);
-  const loadData = async () => { setTenants(await appClient.entities.Tenant.list("-created_date")); setLoading(false); };
+  const [tenants, setTenants] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [search, setSearch] = useState("");
+  const [showDialog, setShowDialog] = useState(false);
+  const [editingTenant, setEditingTenant] = useState(null);
+  const [form, setForm] = useState(defaultForm);
 
-  const handleCreate = async () => {
-    if (!form.name || !form.owner_email) return;
-    setCreating(true);
-    await appClient.entities.Tenant.create({ ...form, status: "active", slug: form.name.toLowerCase().replace(/\s+/g, "-"), balance: 0, member_emails: [] });
-    await loadData();
-    setShowCreate(false);
-    setForm({ name: "", owner_email: "", plan: "starter", currency: "NGN", payment_provider: "paystack", vm_limit: 5, cpu_limit: 16, ram_limit_mb: 16384, disk_limit_gb: 500 });
-    setCreating(false);
-    toast({ title: "Tenant Created", description: form.name });
-  };
+  async function loadData() {
+    try {
+      setLoading(true);
+      const payload = await appClient.entities.Tenant.list("-created_date", 500);
+      setTenants(payload || []);
+    } catch (error) {
+      toast({
+        title: "Load failed",
+        description: error?.message || "Unable to load tenants.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
 
-  const handleDelete = async (t) => {
-    await appClient.entities.Tenant.delete(t.id);
-    await loadData();
-    toast({ title: "Tenant Deleted", description: t.name, variant: "destructive" });
-  };
+  useEffect(() => {
+    void loadData();
+  }, []);
 
-  const filtered = tenants.filter(t => t.name.toLowerCase().includes(search.toLowerCase()) || (t.owner_email || "").toLowerCase().includes(search.toLowerCase()));
+  function openCreateDialog() {
+    setEditingTenant(null);
+    setForm(defaultForm);
+    setShowDialog(true);
+  }
 
-  if (loading) return <div className="flex items-center justify-center h-64"><div className="w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin" /></div>;
+  function openEditDialog(tenant) {
+    setEditingTenant(tenant);
+    setForm({
+      name: tenant.name || "",
+      owner_email: tenant.owner_email || "",
+      plan: String(tenant.plan || "starter").toLowerCase(),
+      status: String(tenant.status || "active").toLowerCase(),
+      currency: String(tenant.currency || "NGN").toUpperCase(),
+      payment_provider: String(tenant.payment_provider || "paystack").toLowerCase(),
+      vm_limit: Number(tenant.vm_limit || 0),
+      cpu_limit: Number(tenant.cpu_limit || 0),
+      ram_limit_mb: Number(tenant.ram_limit_mb || 0),
+      disk_limit_gb: Number(tenant.disk_limit_gb || 0)
+    });
+    setShowDialog(true);
+  }
+
+  async function handleSave() {
+    if (!form.name || !form.owner_email) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      const payload = {
+        ...form,
+        slug: editingTenant ? undefined : slugify(form.name),
+        balance: editingTenant ? undefined : 0,
+        member_emails: editingTenant ? undefined : []
+      };
+
+      if (editingTenant) {
+        await appClient.entities.Tenant.update(editingTenant.id, payload);
+      } else {
+        await appClient.entities.Tenant.create(payload);
+      }
+      await loadData();
+      setShowDialog(false);
+      toast({
+        title: editingTenant ? "Tenant updated" : "Tenant created",
+        description: form.name
+      });
+    } catch (error) {
+      toast({
+        title: "Save failed",
+        description: error?.message || "Unable to save tenant.",
+        variant: "destructive"
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete(tenant) {
+    try {
+      await appClient.entities.Tenant.delete(tenant.id);
+      await loadData();
+      toast({
+        title: "Tenant deleted",
+        description: tenant.name,
+        variant: "destructive"
+      });
+    } catch (error) {
+      toast({
+        title: "Delete failed",
+        description: error?.message || "Unable to delete tenant.",
+        variant: "destructive"
+      });
+    }
+  }
+
+  const filteredTenants = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return tenants;
+    return tenants.filter((tenant) => {
+      return (
+        String(tenant.name || "").toLowerCase().includes(needle) ||
+        String(tenant.owner_email || "").toLowerCase().includes(needle) ||
+        String(tenant.plan || "").toLowerCase().includes(needle)
+      );
+    });
+  }, [search, tenants]);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary" />
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">
       <PageHeader title="Tenants" description={`${tenants.length} organizations`}>
-        <Button onClick={() => setShowCreate(true)} className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90"><Plus className="w-4 h-4" /> New Tenant</Button>
+        <Button onClick={openCreateDialog} className="gap-2">
+          <Plus className="h-4 w-4" /> New Tenant
+        </Button>
       </PageHeader>
 
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-        <Input placeholder="Search tenants..." value={search} onChange={e => setSearch(e.target.value)} className="pl-9 bg-card border-border max-w-sm" />
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search tenants..."
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          className="pl-9"
+        />
       </div>
 
-      {filtered.length === 0 ? (
-        <EmptyState icon={Building2} title="No Tenants" description="Create your first tenant organization."
-          action={<Button onClick={() => setShowCreate(true)} variant="outline" className="gap-2"><Plus className="w-4 h-4" /> New Tenant</Button>} />
+      {filteredTenants.length === 0 ? (
+        <EmptyState
+          icon={Building2}
+          title="No tenants"
+          description="Create your first tenant organization."
+          action={
+            <Button onClick={openCreateDialog} variant="outline" className="gap-2">
+              <Plus className="h-4 w-4" /> New Tenant
+            </Button>
+          }
+        />
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filtered.map((t, i) => (
-            <motion.div key={t.id} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.04 }}
-              className="surface-card p-5 hover:border-primary/20 transition-all group">
-              <div className="flex items-start justify-between mb-3">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filteredTenants.map((tenant, index) => (
+            <motion.div
+              key={tenant.id}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.04 }}
+              className="surface-card group p-5 transition-all hover:border-primary/20"
+            >
+              <div className="mb-3 flex items-start justify-between">
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-accent/30 flex items-center justify-center">
-                    <Building2 className="w-5 h-5 text-accent" />
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/30">
+                    <Building2 className="h-5 w-5 text-accent" />
                   </div>
                   <div>
-                    <h3 className="text-sm font-semibold text-foreground">{t.name}</h3>
-                    <p className="text-[11px] text-muted-foreground">{t.owner_email}</p>
+                    <h3 className="text-sm font-semibold text-foreground">{tenant.name}</h3>
+                    <p className="text-[11px] text-muted-foreground">{tenant.owner_email}</p>
                   </div>
                 </div>
-                <StatusBadge status={t.status} />
+                <StatusBadge status={tenant.status} />
               </div>
-              <div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground py-3 border-t border-border">
-                <div>Plan: <span className="text-foreground font-medium capitalize">{t.plan}</span></div>
-                <div>VMs: <span className="text-foreground font-medium">{t.vm_limit || 0} max</span></div>
-                <div>Balance: <span className="text-foreground font-medium">{t.currency} {(t.balance || 0).toLocaleString()}</span></div>
-                <div>Payment: <span className="text-foreground font-medium capitalize">{t.payment_provider || "—"}</span></div>
+
+              <div className="grid grid-cols-2 gap-2 border-t border-border py-3 text-xs text-muted-foreground">
+                <div>
+                  Plan:{" "}
+                  <span className="font-medium capitalize text-foreground">{tenant.plan || "-"}</span>
+                </div>
+                <div>
+                  VMs:{" "}
+                  <span className="font-medium text-foreground">{tenant.vm_limit || 0} max</span>
+                </div>
+                <div>
+                  Balance:{" "}
+                  <span className="font-medium text-foreground">
+                    {tenant.currency} {(tenant.balance || 0).toLocaleString()}
+                  </span>
+                </div>
+                <div>
+                  Payment:{" "}
+                  <span className="font-medium capitalize text-foreground">
+                    {tenant.payment_provider || "-"}
+                  </span>
+                </div>
               </div>
-              <div className="flex justify-end pt-2">
-                <Button variant="ghost" size="sm" className="text-rose-600 hover:bg-rose-50 text-xs opacity-0 group-hover:opacity-100 transition-opacity" onClick={() => handleDelete(t)}>Delete</Button>
+
+              <div className="flex justify-end gap-2 pt-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={() => openEditDialog(tenant)}
+                >
+                  Edit
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs text-rose-600 opacity-0 transition-opacity hover:bg-rose-50 group-hover:opacity-100"
+                  onClick={() => handleDelete(tenant)}
+                >
+                  Delete
+                </Button>
               </div>
             </motion.div>
           ))}
         </div>
       )}
 
-      <Dialog open={showCreate} onOpenChange={setShowCreate}>
-        <DialogContent className="bg-card border-border max-w-lg">
-          <DialogHeader><DialogTitle>Create Tenant</DialogTitle></DialogHeader>
+      <Dialog open={showDialog} onOpenChange={setShowDialog}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>{editingTenant ? "Update Tenant" : "Create Tenant"}</DialogTitle>
+          </DialogHeader>
+
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-3">
-              <div><Label>Organization Name</Label><Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} className="bg-muted border-border mt-1" /></div>
-              <div><Label>Owner Email</Label><Input type="email" value={form.owner_email} onChange={e => setForm({ ...form, owner_email: e.target.value })} className="bg-muted border-border mt-1" /></div>
+              <div>
+                <Label>Organization Name</Label>
+                <Input
+                  value={form.name}
+                  onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label>Owner Email</Label>
+                <Input
+                  type="email"
+                  value={form.owner_email}
+                  onChange={(event) =>
+                    setForm((prev) => ({ ...prev, owner_email: event.target.value }))
+                  }
+                  className="mt-1"
+                />
+              </div>
             </div>
-            <div className="grid grid-cols-3 gap-3">
-              <div><Label>Plan</Label><Select value={form.plan} onValueChange={v => setForm({ ...form, plan: v })}><SelectTrigger className="bg-muted border-border mt-1"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="starter">Starter</SelectItem><SelectItem value="professional">Professional</SelectItem><SelectItem value="enterprise">Enterprise</SelectItem><SelectItem value="custom">Custom</SelectItem></SelectContent></Select></div>
-              <div><Label>Currency</Label><Select value={form.currency} onValueChange={v => setForm({ ...form, currency: v })}><SelectTrigger className="bg-muted border-border mt-1"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="NGN">NGN</SelectItem><SelectItem value="USD">USD</SelectItem><SelectItem value="GHS">GHS</SelectItem><SelectItem value="KES">KES</SelectItem><SelectItem value="ZAR">ZAR</SelectItem></SelectContent></Select></div>
-              <div><Label>Payment</Label><Select value={form.payment_provider} onValueChange={v => setForm({ ...form, payment_provider: v })}><SelectTrigger className="bg-muted border-border mt-1"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="paystack">Paystack</SelectItem><SelectItem value="flutterwave">Flutterwave</SelectItem><SelectItem value="manual">Manual</SelectItem></SelectContent></Select></div>
+
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+              <div>
+                <Label>Plan</Label>
+                <Select
+                  value={form.plan}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, plan: value }))}
+                >
+                  <SelectTrigger className="mt-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="starter">Starter</SelectItem>
+                    <SelectItem value="professional">Professional</SelectItem>
+                    <SelectItem value="enterprise">Enterprise</SelectItem>
+                    <SelectItem value="custom">Custom</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label>Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, status: value }))}
+                >
+                  <SelectTrigger className="mt-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="trial">Trial</SelectItem>
+                    <SelectItem value="suspended">Suspended</SelectItem>
+                    <SelectItem value="cancelled">Cancelled</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label>Currency</Label>
+                <Select
+                  value={form.currency}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, currency: value }))}
+                >
+                  <SelectTrigger className="mt-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="NGN">NGN</SelectItem>
+                    <SelectItem value="USD">USD</SelectItem>
+                    <SelectItem value="GHS">GHS</SelectItem>
+                    <SelectItem value="KES">KES</SelectItem>
+                    <SelectItem value="ZAR">ZAR</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label>Payment</Label>
+                <Select
+                  value={form.payment_provider}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, payment_provider: value }))
+                  }
+                >
+                  <SelectTrigger className="mt-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="paystack">Paystack</SelectItem>
+                    <SelectItem value="flutterwave">Flutterwave</SelectItem>
+                    <SelectItem value="manual">Manual</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div><Label>VM Limit</Label><Input type="number" value={form.vm_limit} onChange={e => setForm({ ...form, vm_limit: Number(e.target.value) })} className="bg-muted border-border mt-1" /></div>
-              <div><Label>Disk Limit (GB)</Label><Input type="number" value={form.disk_limit_gb} onChange={e => setForm({ ...form, disk_limit_gb: Number(e.target.value) })} className="bg-muted border-border mt-1" /></div>
+
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+              <div>
+                <Label>VM Limit</Label>
+                <Input
+                  type="number"
+                  value={form.vm_limit}
+                  onChange={(event) =>
+                    setForm((prev) => ({ ...prev, vm_limit: Number(event.target.value || 0) }))
+                  }
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label>CPU Limit</Label>
+                <Input
+                  type="number"
+                  value={form.cpu_limit}
+                  onChange={(event) =>
+                    setForm((prev) => ({ ...prev, cpu_limit: Number(event.target.value || 0) }))
+                  }
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label>RAM Limit (MB)</Label>
+                <Input
+                  type="number"
+                  value={form.ram_limit_mb}
+                  onChange={(event) =>
+                    setForm((prev) => ({
+                      ...prev,
+                      ram_limit_mb: Number(event.target.value || 0)
+                    }))
+                  }
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label>Disk Limit (GB)</Label>
+                <Input
+                  type="number"
+                  value={form.disk_limit_gb}
+                  onChange={(event) =>
+                    setForm((prev) => ({
+                      ...prev,
+                      disk_limit_gb: Number(event.target.value || 0)
+                    }))
+                  }
+                  className="mt-1"
+                />
+              </div>
             </div>
           </div>
+
           <DialogFooter>
-            <Button variant="outline" onClick={() => setShowCreate(false)}>Cancel</Button>
-            <Button onClick={handleCreate} disabled={creating || !form.name || !form.owner_email} className="bg-primary text-primary-foreground">{creating ? "Creating..." : "Create Tenant"}</Button>
+            <Button variant="outline" onClick={() => setShowDialog(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={saving || !form.name || !form.owner_email}>
+              {saving ? "Saving..." : editingTenant ? "Update Tenant" : "Create Tenant"}
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
   );
 }
-
-