elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/platform/index.tsx

@@ -0,0 +1,454 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { format } from "date-fns"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  Building2,
+  Users,
+  Stethoscope,
+  UserPlus,
+  Shield,
+  Loader2,
+  Check,
+  X,
+  Settings,
+  Plus,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+import { PageHeader, EmptyState, StatusBadge, DataTablePagination } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { cn } from "@/lib/utils"
+
+// ─── Types ───────────────────────────────────────────────────
+
+interface Tenant {
+  id: string
+  name: string
+  isActive: boolean
+  enabledFeatures: string[]
+  plan: { id: string; name: string } | null
+  limits: { maxClinics: number; maxUsers: number; maxDoctors: number; maxPatients: number }
+  clinicCount: number
+  userCount: number
+  createdAt: string
+}
+
+interface TenantsResponse {
+  data: Tenant[]
+  meta: { total: number; page: number; limit: number; totalPages: number }
+}
+
+// ─── Hooks ───────────────────────────────────────────────────
+
+function useTenants(page: number, search: string) {
+  return useQuery({
+    queryKey: ["platform-tenants", page, search],
+    queryFn: async () => {
+      const params = new URLSearchParams()
+      params.set("page", String(page))
+      params.set("limit", "20")
+      if (search) params.set("q", search)
+      const { data } = await api.get<TenantsResponse>(`/platform/tenants?${params}`)
+      return data
+    },
+  })
+}
+
+function useUpdateTenant() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: any) => {
+      const { data } = await api.put(`/platform/tenants/${id}`, payload)
+      return data
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["platform-tenants"] })
+    },
+  })
+}
+
+function useCreateTenant() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (payload: any) => {
+      const { data } = await api.post("/platform/tenants", payload)
+      return data
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["platform-tenants"] })
+    },
+  })
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function PlatformPage() {
+  const { t } = useTranslation()
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState("")
+  const [editTarget, setEditTarget] = useState<Tenant | null>(null)
+  const [createOpen, setCreateOpen] = useState(false)
+
+  const { data, isLoading } = useTenants(page, search)
+  const tenants = data?.data ?? []
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("platform.title")} description={t("platform.description")}>
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("platform.newTenant")}
+        </Button>
+      </PageHeader>
+
+      {/* Search */}
+      <div className="flex items-center gap-3">
+        <Input
+          className="max-w-sm"
+          placeholder={t("platform.searchTenants")}
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setPage(1) }}
+        />
+      </div>
+
+      {/* Table */}
+      {isLoading ? (
+        <Skeleton className="h-64 rounded-xl" />
+      ) : tenants.length === 0 ? (
+        <EmptyState icon={<Building2 className="w-6 h-6" />} title={t("platform.noTenants")} />
+      ) : (
+        <>
+          <div className="rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("platform.tenant")}</TableHead>
+                  <TableHead className="hidden sm:table-cell">{t("platform.plan")}</TableHead>
+                  <TableHead>{t("platform.usage")}</TableHead>
+                  <TableHead className="hidden md:table-cell">{t("platform.limits")}</TableHead>
+                  <TableHead>{t("common.status")}</TableHead>
+                  <TableHead className="w-[80px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {tenants.map((tenant) => (
+                  <TableRow key={tenant.id}>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium text-sm">{tenant.name}</p>
+                        <p className="text-[10px] text-muted-foreground font-mono">{tenant.id.slice(0, 8)}...</p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden sm:table-cell">
+                      {tenant.plan ? (
+                        <Badge variant="outline" className="text-xs">{tenant.plan.name}</Badge>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-3 text-xs">
+                        <span className="flex items-center gap-1" title="Clinics">
+                          <Building2 className="w-3 h-3 text-muted-foreground" />
+                          <span className={cn(tenant.clinicCount >= tenant.limits.maxClinics && "text-red-500 font-medium")}>
+                            {tenant.clinicCount}/{tenant.limits.maxClinics}
+                          </span>
+                        </span>
+                        <span className="flex items-center gap-1" title="Users">
+                          <Users className="w-3 h-3 text-muted-foreground" />
+                          <span className={cn(tenant.userCount >= tenant.limits.maxUsers && "text-red-500 font-medium")}>
+                            {tenant.userCount}/{tenant.limits.maxUsers}
+                          </span>
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                        <span>{tenant.limits.maxDoctors} dr</span>
+                        <span>{tenant.limits.maxPatients} pt</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        status={tenant.isActive ? "active" : "expired"}
+                        label={tenant.isActive ? t("common.active") : t("common.inactive")}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Button size="sm" variant="ghost" className="h-7" onClick={() => setEditTarget(tenant)}>
+                        <Settings className="w-3.5 h-3.5" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {data && (
+            <DataTablePagination
+              page={page}
+              pageSize={20}
+              totalItems={data.meta.total}
+              onPageChange={setPage}
+            />
+          )}
+        </>
+      )}
+
+      <EditTenantDialog tenant={editTarget} onClose={() => setEditTarget(null)} />
+      <CreateTenantDialog open={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  )
+}
+
+// ─── Edit Tenant Dialog ──────────────────────────────────────
+
+function EditTenantDialog({ tenant, onClose }: { tenant: Tenant | null; onClose: () => void }) {
+  const { t } = useTranslation()
+  const update = useUpdateTenant()
+  const [maxClinics, setMaxClinics] = useState(1)
+  const [maxUsers, setMaxUsers] = useState(5)
+  const [maxDoctors, setMaxDoctors] = useState(2)
+  const [maxPatients, setMaxPatients] = useState(500)
+  const [isActive, setIsActive] = useState(true)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  // Sync state when tenant changes
+  if (tenant && maxClinics === 1 && tenant.limits.maxClinics !== 1) {
+    setMaxClinics(tenant.limits.maxClinics)
+    setMaxUsers(tenant.limits.maxUsers)
+    setMaxDoctors(tenant.limits.maxDoctors)
+    setMaxPatients(tenant.limits.maxPatients)
+    setIsActive(tenant.isActive)
+  }
+
+  const handleSave = async () => {
+    if (!tenant) return
+    setErrorMessage(null)
+    try {
+      await update.mutateAsync({
+        id: tenant.id,
+        maxClinics,
+        maxUsers,
+        maxDoctors,
+        maxPatients,
+        isActive,
+      })
+      toast.success(t("platform.tenantUpdated"))
+      onClose()
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("platform.updateError"))
+      } else {
+        setErrorMessage(t("platform.updateError"))
+      }
+    }
+  }
+
+  const handleClose = () => {
+    setMaxClinics(1)
+    setMaxUsers(5)
+    setMaxDoctors(2)
+    setMaxPatients(500)
+    setErrorMessage(null)
+    onClose()
+  }
+
+  return (
+    <Dialog open={!!tenant} onOpenChange={(v) => { if (!v) handleClose() }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{tenant?.name}</DialogTitle>
+          <DialogDescription>{t("platform.editLimits")}</DialogDescription>
+        </DialogHeader>
+
+        {errorMessage && (
+          <Alert variant="destructive" className="py-2.5">
+            <AlertDescription className="text-sm">{errorMessage}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="space-y-4">
+          {/* Limits */}
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground flex items-center gap-1">
+                <Building2 className="w-3 h-3" /> {t("platform.maxClinics")}
+              </Label>
+              <Input type="number" min={1} value={maxClinics} onChange={(e) => setMaxClinics(Number(e.target.value))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground flex items-center gap-1">
+                <Users className="w-3 h-3" /> {t("platform.maxUsers")}
+              </Label>
+              <Input type="number" min={1} value={maxUsers} onChange={(e) => setMaxUsers(Number(e.target.value))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground flex items-center gap-1">
+                <Stethoscope className="w-3 h-3" /> {t("platform.maxDoctors")}
+              </Label>
+              <Input type="number" min={1} value={maxDoctors} onChange={(e) => setMaxDoctors(Number(e.target.value))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground flex items-center gap-1">
+                <UserPlus className="w-3 h-3" /> {t("platform.maxPatients")}
+              </Label>
+              <Input type="number" min={1} value={maxPatients} onChange={(e) => setMaxPatients(Number(e.target.value))} className="h-9" />
+            </div>
+          </div>
+
+          {/* Status toggle */}
+          <div className="flex items-center justify-between pt-2 border-t">
+            <span className="text-sm font-medium">{t("common.status")}</span>
+            <button
+              onClick={() => setIsActive(!isActive)}
+              className={cn(
+                "relative w-11 h-6 rounded-full transition-colors",
+                isActive ? "bg-green-500" : "bg-muted-foreground/30",
+              )}
+            >
+              <span className={cn(
+                "absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform",
+                isActive && "translate-x-5",
+              )} />
+            </button>
+          </div>
+
+          {/* Current usage */}
+          {tenant && (
+            <div className="text-xs text-muted-foreground pt-2 border-t space-y-1">
+              <p>{t("platform.currentUsage")}:</p>
+              <p>{tenant.clinicCount} {t("clinics.patients").replace("hasta", "klinik")} / {tenant.userCount} {t("nav.users").toLowerCase()}</p>
+              <p>{t("platform.created")}: {format(new Date(tenant.createdAt), "dd MMM yyyy")}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>{t("common.cancel")}</Button>
+          <Button onClick={handleSave} disabled={update.isPending}>
+            {update.isPending
+              ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              : t("common.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Create Tenant Dialog ────────────────────────────────────
+
+function CreateTenantDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+  const { t } = useTranslation()
+  const create = useCreateTenant()
+  const [name, setName] = useState("")
+  const [ownerEmail, setOwnerEmail] = useState("")
+  const [ownerPassword, setOwnerPassword] = useState("")
+  const [ownerFirstName, setOwnerFirstName] = useState("")
+  const [ownerLastName, setOwnerLastName] = useState("")
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const handleCreate = async () => {
+    setErrorMessage(null)
+    try {
+      await create.mutateAsync({
+        name,
+        ownerEmail,
+        ownerPassword,
+        ownerFirstName,
+        ownerLastName,
+      })
+      toast.success(t("platform.tenantCreated"))
+      setName("")
+      setOwnerEmail("")
+      setOwnerPassword("")
+      setOwnerFirstName("")
+      setOwnerLastName("")
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("platform.createError"))
+      } else {
+        setErrorMessage(t("platform.createError"))
+      }
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) setErrorMessage(null); onOpenChange(v) }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("platform.newTenant")}</DialogTitle>
+          <DialogDescription>{t("platform.newTenantDesc")}</DialogDescription>
+        </DialogHeader>
+
+        {errorMessage && (
+          <Alert variant="destructive" className="py-2.5">
+            <AlertDescription className="text-sm">{errorMessage}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("platform.tenantName")} *</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("platform.tenantNamePlaceholder")} />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("platform.ownerFirstName")} *</Label>
+              <Input value={ownerFirstName} onChange={(e) => setOwnerFirstName(e.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("platform.ownerLastName")} *</Label>
+              <Input value={ownerLastName} onChange={(e) => setOwnerLastName(e.target.value)} />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("platform.ownerEmail")} *</Label>
+            <Input type="email" value={ownerEmail} onChange={(e) => setOwnerEmail(e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("platform.ownerPassword")} *</Label>
+            <Input type="password" value={ownerPassword} onChange={(e) => setOwnerPassword(e.target.value)} />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("common.cancel")}</Button>
+          <Button onClick={handleCreate} disabled={!name || !ownerEmail || !ownerPassword || !ownerFirstName || !ownerLastName || create.isPending}>
+            {create.isPending
+              ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              : t("common.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/frontend/src/pages/settings/index.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import { Loader2, Lock, User } from "lucide-react"
+
+import { api } from "@/lib/api"
+import { useAuthStore } from "@/stores/auth.store"
+import { PageHeader } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+export default function SettingsPage() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+
+  return (
+    <div className="max-w-[600px] mx-auto space-y-6">
+      <PageHeader title={t("settings.title")} description={t("settings.description")} />
+
+      {/* Profile info (read-only) */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+            <User className="w-4 h-4" />{t("settings.profile")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("common.name")}</span>
+            <span className="font-medium">{user?.firstName} {user?.lastName}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("common.email")}</span>
+            <span className="font-medium">{user?.email}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("users.role")}</span>
+            <span className="font-medium">{user?.role ? t(`users.roles.${user.role}`) : "—"}</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Change password */}
+      <ChangePasswordCard />
+    </div>
+  )
+}
+
+function ChangePasswordCard() {
+  const { t } = useTranslation()
+  const [currentPassword, setCurrentPassword] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async () => {
+    setError(null)
+    if (newPassword.length < 6) {
+      setError(t("settings.passwordMin"))
+      return
+    }
+    if (newPassword !== confirmPassword) {
+      setError(t("settings.passwordMismatch"))
+      return
+    }
+
+    setLoading(true)
+    try {
+      await api.post("/auth/change-password", {
+        currentPassword,
+        newPassword,
+      })
+      toast.success(t("settings.passwordChanged"))
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmPassword("")
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setError(err.response?.data?.message || t("settings.passwordError"))
+      } else {
+        setError(t("settings.passwordError"))
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+          <Lock className="w-4 h-4" />{t("settings.changePassword")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {error && (
+          <Alert variant="destructive" className="py-2.5">
+            <AlertDescription className="text-sm">{error}</AlertDescription>
+          </Alert>
+        )}
+        <div className="space-y-1.5">
+          <Label className="text-sm">{t("settings.currentPassword")}</Label>
+          <Input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-sm">{t("settings.newPassword")}</Label>
+          <Input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-sm">{t("settings.confirmPassword")}</Label>
+          <Input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+        </div>
+        <Button onClick={handleSubmit} disabled={loading || !currentPassword || !newPassword}>
+          {loading
+            ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+            : t("settings.changePassword")}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}