elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/users/edit.tsx

@@ -0,0 +1,329 @@
+import { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  ArrowLeft,
+  Loader2,
+  Shield,
+  ShieldCheck,
+  Stethoscope,
+  UserCog,
+  Mail,
+  Phone,
+  Calendar,
+} from "lucide-react"
+
+import {
+  useUsers,
+  useUpdateUser,
+  useUpdateClinicAssignments,
+} from "@/lib/hooks/use-users"
+import { useClinics } from "@/lib/hooks/use-clinics"
+
+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 { Checkbox } from "@/components/ui/checkbox"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { cn } from "@/lib/utils"
+import { formatDistanceToNow } from "date-fns"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const INVITE_ROLES = ["admin", "doctor", "receptionist", "sales"] as const
+
+const PERMISSION_GROUPS: { key: string; permissions: string[] }[] = [
+  { key: "patients", permissions: ["patients:read", "patients:create", "patients:update", "patients:delete", "patients:export"] },
+  { key: "appointments", permissions: ["appointments:read", "appointments:manage"] },
+  { key: "treatments", permissions: ["treatments:read", "treatments:manage", "treatment_plans:manage"] },
+  { key: "chats", permissions: ["chats:read", "chats:read_own", "chats:takeover", "chats:send", "chats:resolve", "chats:assign", "chats:config"] },
+  { key: "leads", permissions: ["leads:read", "leads:update", "leads:export"] },
+  { key: "calls", permissions: ["calls:read"] },
+  { key: "campaigns", permissions: ["campaigns:read", "campaigns:manage", "campaigns:export"] },
+  { key: "users", permissions: ["users:read", "users:invite", "users:update", "users:delete"] },
+  { key: "clinics", permissions: ["clinics:read", "clinics:create", "clinics:update", "clinics:delete"] },
+  { key: "billing", permissions: ["billing:read", "billing:manage"] },
+  { key: "analytics", permissions: ["analytics:read"] },
+]
+
+function roleIcon(role: string) {
+  switch (role) {
+    case "owner": return <ShieldCheck className="w-4 h-4" />
+    case "admin": return <Shield className="w-4 h-4" />
+    case "doctor": return <Stethoscope className="w-4 h-4" />
+    default: return <UserCog className="w-4 h-4" />
+  }
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function UserEditPage() {
+  const { id } = useParams<{ id: string }>()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: users, isLoading } = useUsers()
+  const { data: allClinics } = useClinics()
+  const updateUser = useUpdateUser()
+  const updateClinicAssignments = useUpdateClinicAssignments()
+
+  const user = users?.find((u) => u.id === id)
+
+  const [firstName, setFirstName] = useState("")
+  const [lastName, setLastName] = useState("")
+  const [role, setRole] = useState("doctor")
+  const [phone, setPhone] = useState("")
+  const [customPerms, setCustomPerms] = useState<string[]>([])
+  const [clinicIds, setClinicIds] = useState<string[]>([])
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [initialized, setInitialized] = useState(false)
+
+  useEffect(() => {
+    if (user && !initialized) {
+      setFirstName(user.firstName)
+      setLastName(user.lastName)
+      setRole(user.role)
+      setPhone(user.phone ?? "")
+      setCustomPerms(user.customPermissions ?? [])
+      setClinicIds(user.clinics.map((c) => c.id))
+      setInitialized(true)
+    }
+  }, [user, initialized])
+
+  const togglePerm = (perm: string) => {
+    setCustomPerms((prev) => prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm])
+  }
+
+  const handleSave = async () => {
+    if (!user) return
+    setErrorMessage(null)
+    try {
+      await updateUser.mutateAsync({
+        id: user.id,
+        firstName,
+        lastName,
+        role: role !== user.role ? role : undefined,
+        phone: phone || undefined,
+        customPermissions: customPerms,
+      })
+      // Update clinic assignments if changed
+      const currentClinicIds = user.clinics.map((c) => c.id).sort().join(",")
+      const newClinicIds = [...clinicIds].sort().join(",")
+      if (currentClinicIds !== newClinicIds) {
+        await updateClinicAssignments.mutateAsync({ id: user.id, clinicIds })
+      }
+      toast.success(t("users.updateSuccess"))
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("users.updateError"))
+      } else {
+        setErrorMessage(t("users.updateError"))
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-6 py-2">
+        <Skeleton className="h-28 w-full rounded-2xl" />
+        <Skeleton className="h-64 w-full rounded-2xl" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-4 py-2">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/users")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />{t("common.back")}
+        </Button>
+        <p className="text-sm text-muted-foreground">{t("users.noUsers")}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-[900px] mx-auto space-y-6 py-2">
+      {/* Header */}
+      <div className="rounded-2xl border bg-card overflow-hidden">
+        <div className="px-6 py-5 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <button onClick={() => navigate("/users")} className="text-muted-foreground hover:text-foreground transition-colors -ml-1">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <Avatar className="w-14 h-14 text-lg">
+              <AvatarFallback className="text-lg font-semibold">
+                {user.firstName.charAt(0)}{user.lastName.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <h1 className="text-xl font-bold tracking-tight">
+                {user.firstName} {user.lastName}
+              </h1>
+              <div className="flex items-center gap-2 mt-0.5">
+                <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <Mail className="w-3 h-3" /> {user.email}
+                </span>
+                <Badge variant="outline" className="text-xs gap-1">
+                  {roleIcon(user.role)}
+                  {t(`users.roles.${user.role}`)}
+                </Badge>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {user.role === "doctor" && (
+              <Button variant="outline" onClick={() => navigate(`/users/${user.id}/profile`)}>
+                <Stethoscope className="w-4 h-4 mr-1.5" />
+                {t("users.doctorProfile")}
+              </Button>
+            )}
+            <Button onClick={handleSave} disabled={updateUser.isPending}>
+              {updateUser.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("common.save")}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {errorMessage && (
+        <Alert variant="destructive"><AlertDescription>{errorMessage}</AlertDescription></Alert>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        {/* Left — User info */}
+        <div className="lg:col-span-2 space-y-5">
+          <Card className="rounded-2xl">
+            <CardHeader>
+              <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground">{t("users.userInfo")}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">{t("patients.firstName")}</Label>
+                  <Input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="h-9" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">{t("patients.lastName")}</Label>
+                  <Input value={lastName} onChange={(e) => setLastName(e.target.value)} className="h-9" />
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("users.role")}</Label>
+                <Select value={role} onValueChange={setRole}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue>{t(`users.roles.${role}`)}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {INVITE_ROLES.map((r) => (
+                      <SelectItem key={r} value={r}>{t(`users.roles.${r}`)}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("common.phone")}</Label>
+                <Input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} className="h-9" />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Meta info */}
+          <Card className="rounded-2xl">
+            <CardContent className="pt-5 space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">{t("common.email")}</span>
+                <span className="font-medium">{user.email}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">{t("common.status")}</span>
+                <span className={cn("font-medium", user.isActive ? "text-green-600" : "text-red-500")}>
+                  {user.isActive ? t("common.active") : t("common.inactive")}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">{t("users.lastLogin")}</span>
+                <span className="font-medium">
+                  {user.lastLoginAt ? formatDistanceToNow(new Date(user.lastLoginAt), { addSuffix: true }) : "—"}
+                </span>
+              </div>
+              <div className="space-y-1.5">
+                <span className="text-muted-foreground">{t("users.clinicAssignments")}</span>
+                {allClinics && allClinics.length > 0 ? (
+                  <div className="space-y-1">
+                    {allClinics.map((c) => (
+                      <label key={c.id} className="flex items-center gap-2 text-sm cursor-pointer">
+                        <Checkbox
+                          checked={clinicIds.includes(c.id)}
+                          onCheckedChange={(checked) =>
+                            setClinicIds((prev) =>
+                              checked ? [...prev, c.id] : prev.filter((id) => id !== c.id)
+                            )
+                          }
+                        />
+                        {c.name}
+                      </label>
+                    ))}
+                  </div>
+                ) : (
+                  <span>—</span>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Right — Permissions */}
+        <Card className="lg:col-span-3 rounded-2xl">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground">{t("users.customPermissions")}</CardTitle>
+              {customPerms.length > 0 && (
+                <button className="text-xs text-muted-foreground hover:text-foreground" onClick={() => setCustomPerms([])}>
+                  {t("users.resetToDefaults")}
+                </button>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">{t("users.permissionsHint")}</p>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 gap-x-6 gap-y-4">
+              {PERMISSION_GROUPS.map((group) => (
+                <div key={group.key} className="space-y-1.5">
+                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t(`nav.${group.key}`, group.key)}
+                  </p>
+                  {group.permissions.map((perm) => {
+                    const action = perm.split(":")[1]
+                    return (
+                      <label key={perm} className="flex items-center gap-2 text-sm cursor-pointer py-0.5">
+                        <Checkbox
+                          checked={customPerms.includes(perm)}
+                          onCheckedChange={() => togglePerm(perm)}
+                        />
+                        <span className="capitalize">{action.replace(/_/g, " ")}</span>
+                      </label>
+                    )
+                  })}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}