@svadmin/ui 0.18.0 → 0.19.0

package/src/components/RolesSettings.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider, getResources } from '@svadmin/core';
+  import type { Role } from '@svadmin/core';
+  import PermissionMatrix, { type RoleInfo, type ResourceInfo, type ActionInfo } from './PermissionMatrix.svelte';
+  import { toast } from '@svadmin/core/toast';
+
+  const authProvider = getAuthProvider();
+  const rawResources = getResources();
+
+  let roles = $state<RoleInfo[]>([]);
+  let selectedRoleCode = $state<string>('');
+  
+  // Matrix format: { "roleId": { "resourceName": ["action1", "action2"] } }
+  let permissionsCache = $state<Record<string, Record<string, string[]>>>({});
+  
+  let loadingRoles = $state(true);
+  let loadingPermissions = $state(false);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+
+  // Convert system resources to MatrixResource format
+  let matrixResources = $derived<ResourceInfo[]>(
+    rawResources.map(r => ({
+      code: r.name,
+      name: r.label || r.name,
+    }))
+  );
+
+  let matrixActions = $state<ActionInfo[]>([
+    { code: 'create', name: t('common.create') ?? 'Create' },
+    { code: 'read', name: t('common.detail') ?? 'Read' },
+    { code: 'update', name: t('common.edit') ?? 'Update' },
+    { code: 'delete', name: t('common.delete') ?? 'Delete' },
+  ]);
+
+  async function loadRoles() {
+    if (!authProvider?.getRoles) {
+      error = t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
+      loadingRoles = false;
+      return;
+    }
+    try {
+      const fetchedRoles = await authProvider.getRoles();
+      roles = fetchedRoles.map(r => ({ code: r.id, name: r.name, ...r }));
+      if (roles.length > 0 && !selectedRoleCode) {
+        selectedRoleCode = roles[0].code;
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loadingRoles = false;
+    }
+  }
+
+  async function loadPermissionsForRole(roleId: string) {
+    if (!authProvider?.getRolePermissions || permissionsCache[roleId]) return;
+    
+    loadingPermissions = true;
+    try {
+      const perms = await authProvider.getRolePermissions(roleId);
+      permissionsCache[roleId] = perms;
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      loadingPermissions = false;
+    }
+  }
+
+  // Load permissions whenever the selected role changes
+  $effect(() => {
+    if (selectedRoleCode && !permissionsCache[selectedRoleCode] && !loadingPermissions) {
+      loadPermissionsForRole(selectedRoleCode);
+    }
+  });
+
+  $effect(() => {
+    loadRoles();
+  });
+
+  // isGranted logic
+  function checkGrant(roleCode: string, resourceCode: string, actionCode: string) {
+    const rolePerms = permissionsCache[roleCode];
+    if (!rolePerms) return false;
+    return rolePerms[resourceCode]?.includes(actionCode) ?? false;
+  }
+
+  async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
+    if (!authProvider?.updateRolePermissions) return;
+    
+    // Copy state
+    const currentRolePerms = { ...(permissionsCache[roleCode] || {}) };
+    const currentResPerms = [...(currentRolePerms[resourceCode] || [])];
+
+    // Optimistic update
+    if (grant) {
+      if (!currentResPerms.includes(actionCode)) currentResPerms.push(actionCode);
+    } else {
+      const idx = currentResPerms.indexOf(actionCode);
+      if (idx > -1) currentResPerms.splice(idx, 1);
+    }
+    
+    currentRolePerms[resourceCode] = currentResPerms;
+    permissionsCache[roleCode] = currentRolePerms;
+
+    saving = true;
+    try {
+      // Send the entire role's permissions back (as defined by our AuthProvider interface)
+      const result = await authProvider.updateRolePermissions(roleCode, currentRolePerms);
+      if (result.success) {
+        // Success silently
+      } else {
+         throw new Error(result.error?.message ?? t('common.operationFailed'));
+      }
+    } catch (e) {
+      toast.error((e as Error).message);
+      // Rollback on fail
+      delete permissionsCache[roleCode];
+      loadPermissionsForRole(roleCode);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+{#if error}
+  <div class="h-full flex items-center justify-center">
+    <div class="max-w-md p-6 border border-destructive/20 bg-destructive/10 text-destructive rounded-lg flex flex-col items-center gap-3 text-center">
+      <AlertCircle class="h-8 w-8" />
+      <h3 class="font-bold text-lg">{t('common.error') ?? 'Error'}</h3>
+      <p>{error}</p>
+    </div>
+  </div>
+{:else}
+  <PermissionMatrix 
+    {roles}
+    resources={matrixResources}
+    actions={matrixActions}
+    isGranted={checkGrant}
+    bind:selectedRole={selectedRoleCode}
+    loading={loadingRoles || loadingPermissions || saving}
+    onToggle={handleToggle}
+  />
+{/if}

package/src/components/SettingsPage.svelte

@@ -2,10 +2,12 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
-  import { User, Palette, Info } from 'lucide-svelte';
+  import { User, Palette, Info, Shield, FileSearch } from 'lucide-svelte';
   import ProfilePage from './ProfilePage.svelte';
   import AppearanceSettings from './AppearanceSettings.svelte';
   import AboutSettings from './AboutSettings.svelte';
+  import RolesSettings from './RolesSettings.svelte';
+  import AuditLogViewer from './AuditLogViewer.svelte';
 
   const sections = [
     {
@@ -18,6 +20,8 @@
     {
       group: 'settings.system',
       items: [
+        { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
+        { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
         { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
       ],
     },
@@ -26,6 +30,8 @@
   let activeKey = $derived.by(() => {
     const path = currentPath();
     if (path.includes('/settings/appearance')) return 'appearance';
+    if (path.includes('/settings/roles')) return 'roles';
+    if (path.includes('/settings/audit')) return 'audit';
     if (path.includes('/settings/about')) return 'about';
     return 'profile';
   });
@@ -91,11 +97,15 @@
   </nav>
 
   <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 max-w-3xl">
+  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' ? 'max-w-6xl' : 'max-w-3xl'}">
     {#if activeKey === 'profile'}
       <ProfilePage />
     {:else if activeKey === 'appearance'}
       <AppearanceSettings />
+    {:else if activeKey === 'roles'}
+      <RolesSettings />
+    {:else if activeKey === 'audit'}
+      <AuditLogViewer />
     {:else if activeKey === 'about'}
       <AboutSettings />
     {/if}

package/src/components/TaskQueueDrawer.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+
+  export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+  export interface BackgroundTask {
+    id: string;
+    title: string;
+    status: TaskStatus;
+    progress?: number; // 0-100
+    message?: string;
+    createdAt: string | Date;
+    downloadUrl?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = $bindable(false),
+    tasks = $bindable<BackgroundTask[]>([]),
+    onDismiss,
+    onRetry,
+    onDownload,
+  }: {
+    open?: boolean;
+    tasks?: BackgroundTask[];
+    onDismiss?: (taskId: string) => void;
+    onRetry?: (taskId: string) => void;
+    onDownload?: (taskId: string, url: string) => void;
+  } = $props();
+
+  let runningCount = $derived(tasks.filter(t => t.status === 'running' || t.status === 'pending').length);
+
+  const statusIcon: Record<TaskStatus, typeof Loader2> = {
+    pending: Clock,
+    running: Loader2,
+    completed: CheckCircle2,
+    failed: XCircle,
+  };
+
+  const statusColor: Record<TaskStatus, string> = {
+    pending: 'text-muted-foreground',
+    running: 'text-primary',
+    completed: 'text-green-500',
+    failed: 'text-destructive',
+  };
+
+  function formatTime(d: string | Date) {
+    return new Date(d).toLocaleTimeString();
+  }
+
+  function dismissTask(id: string) {
+    tasks = tasks.filter(t => t.id !== id);
+    onDismiss?.(id);
+  }
+</script>
+
+<!-- Trigger Button (to be placed in Header) -->
+<Button
+  variant="ghost"
+  size="icon"
+  class="relative"
+  onclick={() => open = !open}
+>
+  <ListTodo class="h-4 w-4" />
+  {#if runningCount > 0}
+    <span class="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+      {runningCount}
+    </span>
+  {/if}
+</Button>
+
+<!-- Task Queue Drawer -->
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="fixed inset-0 z-[90] flex justify-end" onclick={() => open = false}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+      class="bg-card shadow-2xl w-full max-w-sm h-full flex flex-col border-l border-border animate-in slide-in-from-right duration-200"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <!-- Header -->
+      <div class="p-4 border-b border-border flex items-center justify-between bg-muted/30">
+        <div class="flex items-center gap-2">
+          <ListTodo class="h-5 w-5 text-muted-foreground" />
+          <h2 class="text-sm font-semibold">Background Tasks</h2>
+          {#if runningCount > 0}
+            <Badge variant="secondary" class="text-xs">{runningCount} active</Badge>
+          {/if}
+        </div>
+        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => open = false}>
+          <X class="h-4 w-4" />
+        </Button>
+      </div>
+
+      <!-- Task List -->
+      <div class="flex-1 overflow-y-auto">
+        {#each tasks as task}
+          {@const Icon = statusIcon[task.status]}
+          <div class="p-4 border-b border-border hover:bg-muted/30 transition-colors">
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex items-start gap-3 flex-1 min-w-0">
+                <div class="{statusColor[task.status]} mt-0.5 shrink-0">
+                  <Icon class="h-4 w-4 {task.status === 'running' ? 'animate-spin' : ''}" />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium truncate text-foreground">{task.title}</p>
+                  {#if task.message}
+                    <p class="text-xs text-muted-foreground mt-0.5">{task.message}</p>
+                  {/if}
+                  <p class="text-[10px] text-muted-foreground/60 mt-1 font-mono">{formatTime(task.createdAt)}</p>
+                </div>
+              </div>
+              <button
+                class="text-muted-foreground/40 hover:text-muted-foreground transition shrink-0"
+                onclick={() => dismissTask(task.id)}
+              >
+                <X class="h-3.5 w-3.5" />
+              </button>
+            </div>
+
+            <!-- Progress bar -->
+            {#if task.status === 'running' && task.progress != null}
+              <div class="mt-3 ml-7">
+                <div class="h-1.5 w-full bg-muted rounded-full overflow-hidden">
+                  <div
+                    class="h-full bg-primary rounded-full transition-all duration-500 ease-out"
+                    style="width: {task.progress}%"
+                  ></div>
+                </div>
+                <p class="text-[10px] text-muted-foreground mt-1">{task.progress}%</p>
+              </div>
+            {/if}
+
+            <!-- Actions -->
+            {#if task.status === 'completed' && task.downloadUrl}
+              <div class="mt-2 ml-7">
+                <Button
+                  variant="outline" size="sm" class="h-7 text-xs"
+                  onclick={() => onDownload?.(task.id, task.downloadUrl!)}
+                >
+                  <Download class="h-3 w-3 mr-1" />
+                  Download
+                </Button>
+              </div>
+            {:else if task.status === 'failed' && onRetry}
+              <div class="mt-2 ml-7">
+                <Button
+                  variant="outline" size="sm" class="h-7 text-xs text-destructive"
+                  onclick={() => onRetry?.(task.id)}
+                >
+                  Retry
+                </Button>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
+            <ListTodo class="h-8 w-8 mb-2 opacity-30" />
+            <p class="text-sm">No background tasks</p>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}

package/src/components/TenantSwitcher.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronsUpDown, Building2, Check } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
+
+  export interface Tenant {
+    id: string;
+    name: string;
+    logo?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    tenants = [],
+    currentTenantId = $bindable(''),
+    collapsed = false,
+    onSwitch,
+    headerSnippet,
+  }: {
+    tenants: Tenant[];
+    currentTenantId?: string;
+    collapsed?: boolean;
+    onSwitch?: (tenantId: string) => void;
+    headerSnippet?: Snippet;
+  } = $props();
+
+  let currentTenant = $derived(tenants.find(t => t.id === currentTenantId) ?? tenants[0]);
+
+  function selectTenant(id: string) {
+    currentTenantId = id;
+    onSwitch?.(id);
+  }
+</script>
+
+{#if tenants.length > 0}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <button
+          {...props}
+          class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
+            {collapsed ? 'justify-center' : ''}"
+        >
+          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">
+            {#if currentTenant?.logo}
+              <img src={currentTenant.logo} alt={currentTenant.name} class="h-full w-full rounded-lg object-cover" />
+            {:else}
+              <Building2 class="h-4 w-4" />
+            {/if}
+          </div>
+          {#if !collapsed}
+            <div class="flex-1 min-w-0">
+              <p class="truncate text-sm font-semibold text-sidebar-foreground">{currentTenant?.name ?? 'Select'}</p>
+              <p class="truncate text-[10px] text-sidebar-foreground/50">Workspace</p>
+            </div>
+            <ChevronsUpDown class="h-4 w-4 shrink-0 text-sidebar-foreground/40" />
+          {/if}
+        </button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-56" align="start" side="right" sideOffset={8}>
+      {#if headerSnippet}
+        <div class="px-2 py-1.5">
+          {@render headerSnippet()}
+        </div>
+        <DropdownMenu.Separator />
+      {/if}
+      <DropdownMenu.Label class="text-xs text-muted-foreground">Workspaces</DropdownMenu.Label>
+      {#each tenants as tenant}
+        <DropdownMenu.Item
+          class="flex items-center gap-3 cursor-pointer"
+          onclick={() => selectTenant(tenant.id)}
+        >
+          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary text-xs font-bold">
+            {#if tenant.logo}
+              <img src={tenant.logo} alt={tenant.name} class="h-full w-full rounded object-cover" />
+            {:else}
+              {tenant.name.charAt(0).toUpperCase()}
+            {/if}
+          </div>
+          <span class="flex-1 truncate">{tenant.name}</span>
+          {#if tenant.id === currentTenantId}
+            <Check class="h-4 w-4 text-primary" />
+          {/if}
+        </DropdownMenu.Item>
+      {/each}
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+{/if}

package/src/components/buttons/CloneButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.clone(resource, recordItemId)}
   >
     <Copy class="h-4 w-4" />

package/src/components/buttons/CreateButton.svelte

@@ -11,8 +11,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -20,7 +20,7 @@
     variant="default"
     size={hideText ? 'icon' : 'default'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.create(resource)}
   >
     <Plus class="h-4 w-4" />

package/src/components/buttons/DeleteButton.svelte

@@ -17,8 +17,8 @@
   }>();
 
   const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'delete') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'delete', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   let confirming = $state(false);
 
   async function handleDelete() {
@@ -49,7 +49,7 @@
       variant="ghost"
       size={hideText ? 'icon' : 'sm'}
       class="text-destructive hover:text-destructive {className}"
-      disabled={can ? !can.allowed : false}
+      disabled={!can.allowed}
       onclick={handleDelete}
     >
       <Trash2 class="h-4 w-4" />

package/src/components/buttons/EditButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'edit') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'edit', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.edit(resource, recordItemId)}
   >
     <Pencil class="h-4 w-4" />

package/src/components/buttons/ExportButton.svelte

@@ -11,8 +11,8 @@
   }>();
 
   const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'export') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'export', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={isLoading || (can ? !can.allowed : false)}
+    disabled={isLoading || !can.allowed}
     onclick={triggerExport}
   >
     <Download class="h-4 w-4" />

package/src/components/buttons/ImportButton.svelte

@@ -31,8 +31,8 @@
     }
   }
 
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'import') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'import', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -47,7 +47,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={importHook.isLoading || (can ? !can.allowed : false)}
+    disabled={importHook.isLoading || !can.allowed}
     onclick={triggerImport}
   >
     <Upload class="h-4 w-4" />

package/src/components/buttons/ShowButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'show') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'show', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -22,7 +22,7 @@
     variant="ghost"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.show(resource, recordItemId)}
   >
     <Eye class="h-4 w-4" />