@allbluecn/admin-app 0.3.2 → 0.3.3

package/src/components/knowledge-public/bookmark-form-dialog.tsx

@@ -17,18 +17,18 @@
 
 import { useState, useEffect } from 'react'
 import { Loader2 } from 'lucide-react'
-import { toast } from '@/components/ui/toast'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@allbluecn/ui/toast'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Textarea } from '@allbluecn/ui/textarea'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import { adminCreateBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/create'
 import { adminUpdateBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/update'
 import { adminGetBookmarkDetailFn } from '@/server/serverFns/knowledge-public/bookmarks/detail'

package/src/components/knowledge-public/compliance-form-dialog.tsx

@@ -17,18 +17,18 @@
 
 import { useState, useEffect } from 'react'
 import { Loader2, PlusIcon, Trash2Icon } from 'lucide-react'
-import { toast } from '@/components/ui/toast'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@allbluecn/ui/toast'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Textarea } from '@allbluecn/ui/textarea'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import { adminCreateComplianceFn } from '@/server/serverFns/knowledge-public/compliance/create'
 import { adminUpdateComplianceFn } from '@/server/serverFns/knowledge-public/compliance/update'
 import { adminGetComplianceDetailFn } from '@/server/serverFns/knowledge-public/compliance/detail'

package/src/components/knowledge-public/legal-form-dialog.tsx

@@ -18,25 +18,25 @@
 import { useState, useEffect } from 'react'
 import { m } from '@/paraglide/messages.js'
 import { Loader2 } from 'lucide-react'
-import { toast } from '@/components/ui/toast'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@allbluecn/ui/toast'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Textarea } from '@allbluecn/ui/textarea'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@allbluecn/ui/select'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import { adminCreateLegalFn } from '@/server/serverFns/knowledge-public/legal/create'
 import { adminUpdateLegalFn } from '@/server/serverFns/knowledge-public/legal/update'
 import { adminGetLegalDetailFn } from '@/server/serverFns/knowledge-public/legal/detail'

package/src/components/layout/sidebar-02/app-sidebar.tsx

@@ -22,7 +22,7 @@ import {
   SidebarHeader,
   SidebarTrigger,
   useSidebar,
-} from "@/components/ui/sidebar";
+} from "@allbluecn/ui/sidebar";
 import { cn } from "@/lib/utils";
 import { m } from '@/paraglide/messages.js'
 import { motion } from "motion/react";
@@ -40,7 +40,6 @@ import {
   Scale,
   ShieldCheck,
   Bookmark,
-  BugPlay,
   Activity,
   CreditCard,
   Shield,

package/src/components/layout/sidebar-02/index.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { ReactNode } from "react"
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarInset, SidebarProvider } from "@allbluecn/ui/sidebar";
 import { DashboardSidebar } from "@/components/layout/sidebar-02/app-sidebar";
 
 export default function Sidebar02({ children }: { children?: ReactNode }) {

package/src/components/layout/sidebar-02/nav-main.tsx

@@ -19,8 +19,7 @@
 import {
   Collapsible,
   CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@allbluecn/ui/collapsible";
 import {
   SidebarMenu,
   SidebarMenuButton,
@@ -29,7 +28,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuItem as SidebarMenuSubItem,
   useSidebar,
-} from "@/components/ui/sidebar";
+} from "@allbluecn/ui/sidebar";
 import { cn } from "@/lib/utils";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Link } from "@tanstack/react-router";

package/src/components/layout/sidebar-02/nav-notifications.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@allbluecn/ui/avatar";
+import { Button } from "@allbluecn/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,7 +25,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@allbluecn/ui/dropdown-menu";
 import { BellIcon } from "lucide-react";
 
 type Notification = {

package/src/components/market/columns.tsx

@@ -15,17 +15,17 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import type { AdminColumnDef } from "@/components/data-table/data-table";
+import type { AdminColumnDef } from "@allbluecn/ui/data-table";
 import { m } from '@/paraglide/messages.js'
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@allbluecn/ui/dropdown-menu"
 import { MoreHorizontalIcon, PencilIcon, TrashIcon, EyeIcon, EyeOffIcon } from "lucide-react"
 
 export type MarketAppRow = {

package/src/components/market/market-app-form.tsx

@@ -17,7 +17,6 @@
 
 import { useEffect, useState } from "react"
 import { m } from '@/paraglide/messages.js'
-import { useTheme } from "next-themes"
 import { MarketAppFormData } from "@/lib/anyhub/types"
 import { CAPABILITY_GROUPS } from "@/lib/anyhub/capabilities"
 import {
@@ -26,18 +25,18 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@allbluecn/ui/dialog"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
+import { Label } from "@allbluecn/ui/label"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { toast } from '@/components/ui/toast'
+} from "@allbluecn/ui/select"
+import { toast } from '@allbluecn/ui/toast'
 
 interface MarketAppFormProps {
   open: boolean

package/src/components/market/market-app-list.tsx

@@ -17,24 +17,15 @@
 
 import { useCallback, useEffect, useState } from "react"
 import { m } from '@/paraglide/messages.js'
-import { DataTable } from "@/components/data-table/data-table"
+import { DataTable } from "@allbluecn/ui/data-table"
 import { getMarketColumns, MarketAppRow } from "./columns"
 import { MarketAppForm } from "./market-app-form"
 import { MarketAppFormData } from "@/lib/anyhub/types"
-import { Button } from "@/components/ui/button"
+import { Button } from "@allbluecn/ui/button"
 import { PlusIcon } from "lucide-react"
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { listMarketAppsFn, updateMarketAppFn, deleteMarketAppFn } from "@/server/serverFns/anyhub/market"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
 
 export function MarketAppList() {
   const [apps, setApps] = useState<MarketAppRow[]>([])
@@ -134,22 +125,16 @@ export function MarketAppList() {
         onSuccess={fetchApps}
       />
 
-      <AlertDialog open={!!deleteTarget} onOpenChange={(open: boolean) => !open && setDeleteTarget(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{m.common_market_deleteConfirmTitle()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {m.common_market_deleteConfirmDesc({ name: deleteTarget?.displayName ?? '' })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-white hover:bg-destructive/90">
-              {m.common_common_delete()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(open: boolean) => !open && setDeleteTarget(null)}
+        title={m.common_market_deleteConfirmTitle()}
+        description={m.common_market_deleteConfirmDesc({ name: deleteTarget?.displayName ?? '' })}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={m.common_common_delete()}
+        confirmClassName="bg-destructive text-white hover:bg-destructive/90"
+        onConfirm={handleDelete}
+      />
     </div>
   )
 }

package/src/components/monitoring/error-list.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
 
 function formatRelativeTime(dateStr: string): string {
   const now = new Date()
@@ -33,7 +33,7 @@ function formatRelativeTime(dateStr: string): string {
   return m.common_common_timeAgo_days({ count: days })
 }
 
-interface ErrorItem {
+export interface ErrorItem {
   id: string
   errorName: string
   errorMessage: string

package/src/components/monitoring/metrics-stats.tsx

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
 import { m } from '@/paraglide/messages.js'
 import { describeMetric } from '@/lib/monitoring-descriptions'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'

package/src/components/monitoring/request-log-table.tsx

@@ -17,12 +17,12 @@
 
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
 import { describePath } from '@/lib/monitoring-descriptions'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
 import { ArrowDown, ArrowUp, Info } from 'lucide-react'
 
-interface RequestLogEntry {
+export interface RequestLogEntry {
   id: string
   timestamp: string
   method: string

package/src/components/oauth-providers/provider-page.tsx

@@ -19,26 +19,17 @@ import { useEffect, useState } from 'react'
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { Eye, EyeOff, KeyRound, PlugZap, Save, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Card, CardContent } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
+import { Button } from '@allbluecn/ui/button'
+import { Badge } from '@allbluecn/ui/badge'
+import { Card, CardContent } from '@allbluecn/ui/card'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Switch } from '@allbluecn/ui/switch'
+import { Skeleton } from '@allbluecn/ui/skeleton'
+import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
 import {
   deleteOAuthProviderFn,
   listOAuthProvidersFn,
@@ -299,26 +290,17 @@ export function OAuthProviderPage(): React.ReactElement {
         </Card>
       </div>
 
-      <AlertDialog open={pendingDelete} onOpenChange={(o: boolean) => !o && setPendingDelete(false)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{m["admin-loginProviders_delete_confirm_title"]()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {m["admin-loginProviders_delete_confirm_desc"]()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={deleteMutation.isPending}
-              onClick={() => deleteMutation.mutate()}
-            >
-              {m["admin-loginProviders_action_delete"]()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={pendingDelete}
+        onOpenChange={(o: boolean) => !o && setPendingDelete(false)}
+        title={m["admin-loginProviders_delete_confirm_title"]()}
+        description={m["admin-loginProviders_delete_confirm_desc"]()}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={m["admin-loginProviders_action_delete"]()}
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        confirmDisabled={deleteMutation.isPending}
+        onConfirm={() => deleteMutation.mutate()}
+      />
     </div>
   )
 }

package/src/components/permissions/assign-dialog.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react'
+import type React from 'react'
+import { m } from '@/paraglide/messages.js'
+import { useServerFn } from '@tanstack/react-start'
+import { toast } from '@allbluecn/ui/toast'
+import {
+  assignRoleFn,
+  unassignRoleFn,
+  listRoleAssignmentsFn,
+} from '@/server/serverFns/permissions'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@allbluecn/ui/dialog'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@allbluecn/ui/table'
+import type { AssignmentItem, RoleItem } from './types'
+
+export function AssignDialog({
+  open,
+  onOpenChange,
+  role,
+  i18nLang,
+  onAssigned,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  role: RoleItem | null
+  i18nLang: string
+  onAssigned: () => void
+}): React.ReactElement {
+  const assignRole = useServerFn(assignRoleFn)
+  const unassignRole = useServerFn(unassignRoleFn)
+  const listAssignments = useServerFn(listRoleAssignmentsFn)
+  const [assignments, setAssignments] = useState<AssignmentItem[]>([])
+  const [searchUser, setSearchUser] = useState('')
+  const isZh = i18nLang === 'zh'
+
+  useEffect(() => {
+    if (open && role) {
+      listAssignments({ data: { roleId: role.id } })
+        .then((result: any) => setAssignments(result))
+        .catch(() => setAssignments([]))
+    }
+  }, [open, role, listAssignments])
+
+  const handleAssign = async () => {
+    if (!searchUser.trim() || !role) return
+    await assignRole({ data: { userId: searchUser.trim(), roleId: role.id } })
+    toast.success(m.enterprise_permissions_toast_assigned())
+    setSearchUser('')
+    onAssigned()
+  }
+
+  const handleUnassign = async (assignmentId: string) => {
+    await unassignRole({ data: { assignmentId } })
+    toast.success(m.enterprise_permissions_toast_unassigned())
+    setAssignments(assignments.filter((a) => a.id !== assignmentId))
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {m.enterprise_permissions_assign({ name: role?.name ?? '' })}
+          </DialogTitle>
+          <DialogDescription>{m.enterprise_permissions_assignDesc()}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex gap-2">
+            <Input
+              value={searchUser}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchUser(e.target.value)}
+              placeholder={m.enterprise_permissions_searchUserPlaceholder()}
+            />
+            <Button onClick={handleAssign} disabled={!searchUser.trim()}>
+              {m.enterprise_permissions_assignUser()}
+            </Button>
+          </div>
+
+          {assignments.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{m.enterprise_permissions_noAssignments()}</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{isZh ? '用户' : 'User'}</TableHead>
+                  <TableHead>{isZh ? '邮箱' : 'Email'}</TableHead>
+                  <TableHead>{isZh ? '操作' : 'Actions'}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {assignments.map((a) => (
+                  <TableRow key={a.id}>
+                    <TableCell className="font-medium">{a.user?.username || a.userId}</TableCell>
+                    <TableCell>{a.user?.email || '-'}</TableCell>
+                    <TableCell>
+                      <button
+                        type="button"
+                        className="text-destructive hover:underline"
+                        onClick={() => handleUnassign(a.id)}
+                      >
+                        {m.enterprise_permissions_unassign()}
+                      </button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {m.enterprise_permissions_dialog_close()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/permissions/create-role-dialog.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useState } from 'react'
+import type React from 'react'
+import { m } from '@/paraglide/messages.js'
+import { useServerFn } from '@tanstack/react-start'
+import { toast } from '@allbluecn/ui/toast'
+import { createRoleFn } from '@/server/serverFns/permissions'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@allbluecn/ui/dialog'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@allbluecn/ui/select'
+import { ALL_ACTIONS, ALL_RESOURCES, LEVELS, type ResourcePermission } from './types'
+
+export function CreateRoleDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+  i18nLang,
+  onCreated,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  workspaceId: string
+  i18nLang: string
+  onCreated: () => void
+}): React.ReactElement {
+  const createRole = useServerFn(createRoleFn)
+  const [name, setName] = useState('')
+  const [permissions, setPermissions] = useState<ResourcePermission>({})
+  const isZh = i18nLang === 'zh'
+
+  useEffect(() => {
+    if (open) {
+      setName('')
+      setPermissions({})
+    }
+  }, [open])
+
+  const handleLevelChange = useCallback((resource: string, action: string, value: string) => {
+    const level = (value as 'none' | 'read' | 'write' | 'admin') || 'none'
+    setPermissions((prev) => ({ ...prev, [`${resource}:${action}`]: level }))
+  }, [])
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      toast.warning(m.enterprise_permissions_toast_nameRequired())
+      return
+    }
+    await createRole({
+      data: {
+        workspaceId,
+        name: name.trim(),
+        permissions,
+      },
+    })
+    toast.success(m.enterprise_permissions_toast_created({ name: name.trim() }))
+    onOpenChange(false)
+    onCreated()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{m.enterprise_permissions_createRole()}</DialogTitle>
+          <DialogDescription>{m.enterprise_permissions_createRoleDesc()}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="role-name">{m.enterprise_permissions_roleName()}</Label>
+            <Input
+              id="role-name"
+              value={name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+              placeholder={m.enterprise_permissions_roleNamePlaceholder()}
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Label>{m.enterprise_permissions_permissionsMatrix()}</Label>
+            {ALL_RESOURCES.map((resource) => (
+              <div key={resource.key} className="space-y-2">
+                <span className="text-sm font-medium">{isZh ? resource.labelZh : resource.labelEn}</span>
+                <div className="grid grid-cols-4 gap-2">
+                  {ALL_ACTIONS.map((action) => (
+                    <Select
+                      key={action.key}
+                      value={permissions[`${resource.key}:${action.key}`] || 'none'}
+                      onValueChange={(value) => handleLevelChange(resource.key, action.key, value ?? "")}
+                    >
+                      <SelectTrigger className="h-8">
+                        <SelectValue>
+                          {isZh ? resource.labelEn : resource.labelZh} / {isZh ? action.labelZh : action.labelEn}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {LEVELS.map((level) => (
+                          <SelectItem key={level.value} value={level.value}>
+                            {isZh ? level.labelZh : level.labelEn}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {m.enterprise_permissions_dialog_cancel()}
+          </Button>
+          <Button onClick={handleSubmit}>{m.enterprise_permissions_dialog_create()}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}