flowyml 1.2.0__py3-none-any.whl → 1.4.0__py3-none-any.whl

flowyml/ui/frontend/src/app/runs/page.jsx

@@ -1,29 +1,39 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { fetchApi } from '../../utils/api';
-import { Link } from 'react-router-dom';
-import { Play, Clock, Calendar, TrendingUp, Activity, ArrowRight, Search, CheckCircle, XCircle, Loader, FolderPlus } from 'lucide-react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { PlayCircle, Clock, CheckCircle, XCircle, Activity, ArrowRight, Calendar, Filter, RefreshCw, Layout } from 'lucide-react';
 import { Card } from '../../components/ui/Card';
 import { Badge } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
 import { format } from 'date-fns';
-import { motion } from 'framer-motion';
 import { DataView } from '../../components/ui/DataView';
+import { StatusBadge } from '../../components/ui/ExecutionStatus';
 import { useProject } from '../../contexts/ProjectContext';
-import { ExecutionStatus, StatusBadge } from '../../components/ui/ExecutionStatus';
-import { EmptyState } from '../../components/ui/EmptyState';
+import { NavigationTree } from '../../components/NavigationTree';
+import { RunDetailsPanel } from '../../components/RunDetailsPanel';
 
 export function Runs() {
     const [runs, setRuns] = useState([]);
     const [loading, setLoading] = useState(true);
-    const [filter, setFilter] = useState('all'); // all, completed, failed, running
-    const [selectedRunIds, setSelectedRunIds] = useState([]);
+    const [selectedRun, setSelectedRun] = useState(null);
+    const [searchParams] = useSearchParams();
     const { selectedProject } = useProject();
 
+    // Filter states
+    const [statusFilter, setStatusFilter] = useState('all');
+    const pipelineFilter = searchParams.get('pipeline');
+
     const fetchRuns = async () => {
         setLoading(true);
         try {
-            const url = selectedProject
-                ? `/api/runs?project=${encodeURIComponent(selectedProject)}`
-                : '/api/runs';
+            let url = '/api/runs/?limit=100';
+            if (selectedProject) {
+                url += `&project=${encodeURIComponent(selectedProject)}`;
+            }
+            if (pipelineFilter) {
+                url += `&pipeline=${encodeURIComponent(pipelineFilter)}`;
+            }
+
             const res = await fetchApi(url);
             const data = await res.json();
             setRuns(data.runs || []);
@@ -36,435 +46,83 @@ export function Runs() {
 
     useEffect(() => {
         fetchRuns();
-    }, [selectedProject]);
+    }, [selectedProject, pipelineFilter]);
 
-    const filteredRuns = runs.filter(run => {
-        if (filter === 'all') return true;
-        return run.status === filter;
-    });
-
-    const stats = {
-        total: runs.length,
-        completed: runs.filter(r => r.status === 'completed').length,
-        failed: runs.filter(r => r.status === 'failed').length,
-        running: runs.filter(r => r.status === 'running').length,
+    const handleRunSelect = (run) => {
+        setSelectedRun(run);
     };
 
-    const columns = [
-        {
-            header: (
-                <input
-                    type="checkbox"
-                    checked={selectedRunIds.length === filteredRuns.length && filteredRuns.length > 0}
-                    onChange={(e) => {
-                        if (e.target.checked) {
-                            setSelectedRunIds(filteredRuns.map(r => r.run_id));
-                        } else {
-                            setSelectedRunIds([]);
-                        }
-                    }}
-                    className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
-                />
-            ),
-            key: 'select',
-            render: (run) => (
-                <input
-                    type="checkbox"
-                    checked={selectedRunIds.includes(run.run_id)}
-                    onChange={(e) => {
-                        if (e.target.checked) {
-                            setSelectedRunIds([...selectedRunIds, run.run_id]);
-                        } else {
-                            setSelectedRunIds(selectedRunIds.filter(id => id !== run.run_id));
-                        }
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                    className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
-                />
-            )
-        },
-        {
-            header: 'Status',
-            key: 'status',
-            sortable: true,
-            render: (run) => <StatusBadge status={run.status} />
-        },
-        {
-            header: 'Pipeline',
-            key: 'pipeline_name',
-            sortable: true,
-            render: (run) => (
-                <span className="font-medium text-slate-900 dark:text-white">{run.pipeline_name}</span>
-            )
-        },
-        {
-            header: 'Project',
-            key: 'project',
-            sortable: true,
-            render: (run) => (
-                <span className="text-sm text-slate-600 dark:text-slate-400">
-                    {run.project || '-'}
-                </span>
-            )
-        },
-        {
-            header: 'Run ID',
-            key: 'run_id',
-            render: (run) => (
-                <span className="font-mono text-xs bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded text-slate-600 dark:text-slate-300">
-                    {run.run_id.substring(0, 8)}...
-                </span>
-            )
-        },
-        {
-            header: 'Start Time',
-            key: 'start_time',
-            sortable: true,
-            render: (run) => (
-                <div className="flex items-center gap-2 text-slate-500">
-                    <Calendar size={14} />
-                    {run.start_time ? format(new Date(run.start_time), 'MMM d, HH:mm:ss') : '-'}
-                </div>
-            )
-        },
-        {
-            header: 'Duration',
-            key: 'duration',
-            sortable: true,
-            render: (run) => (
-                <div className="flex items-center gap-2 text-slate-500">
-                    <Clock size={14} />
-                    {run.duration ? `${run.duration.toFixed(2)}s` : '-'}
-                </div>
-            )
-        },
-        {
-            header: 'Actions',
-            key: 'actions',
-            render: (run) => (
-                <Link
-                    to={`/runs/${run.run_id}`}
-                    className="text-primary-600 hover:text-primary-700 font-medium text-sm flex items-center gap-1"
-                >
-                    Details <ArrowRight size={14} />
-                </Link>
-            )
-        }
-    ];
-
-    const renderGrid = (run) => {
-        const statusConfig = {
-            completed: {
-                icon: <CheckCircle size={20} />,
-                color: 'text-emerald-500',
-                bg: 'bg-emerald-50',
-                border: 'border-emerald-200',
-                badge: 'success'
-            },
-            failed: {
-                icon: <XCircle size={20} />,
-                color: 'text-rose-500',
-                bg: 'bg-rose-50',
-                border: 'border-rose-200',
-                badge: 'danger'
-            },
-            running: {
-                icon: <Loader size={20} className="animate-spin" />,
-                color: 'text-amber-500',
-                bg: 'bg-amber-50',
-                border: 'border-amber-200',
-                badge: 'warning'
-            }
-        };
-
-        const config = statusConfig[run.status] || statusConfig.completed;
-
-        return (
-            <Link to={`/runs/${run.run_id}`}>
-                <Card className={`group hover:shadow-lg transition-all duration-200 border-l-4 ${config.border} hover:border-l-primary-400 h-full`}>
-                    <div className="flex items-center justify-between mb-4">
-                        <div className="flex items-center gap-3">
-                            <div className={`p-2 rounded-lg ${config.bg} ${config.color}`}>
-                                {config.icon}
-                            </div>
-                            <div>
-                                <h3 className="font-bold text-slate-900 dark:text-white truncate max-w-[150px]" title={run.pipeline_name}>
-                                    {run.pipeline_name}
-                                </h3>
-                                <div className="text-xs text-slate-500 font-mono">
-                                    {run.run_id.substring(0, 8)}
-                                </div>
-                            </div>
-                        </div>
-                        <Badge variant={config.badge} className="text-xs uppercase tracking-wide">
-                            {run.status}
-                        </Badge>
+    return (
+        <div className="h-screen flex flex-col overflow-hidden bg-slate-50 dark:bg-slate-900">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-6 py-4 shrink-0">
+                <div className="flex items-center justify-between max-w-[1800px] mx-auto">
+                    <div>
+                        <h1 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
+                            <PlayCircle className="text-blue-500" />
+                            Pipeline Runs
+                        </h1>
+                        <p className="text-sm text-slate-600 dark:text-slate-400">
+                            Monitor and track all your pipeline executions
+                        </p>
                     </div>
-
-                    <div className="space-y-2 text-sm text-slate-500 dark:text-slate-400">
-                        <div className="flex items-center justify-between">
-                            <span className="flex items-center gap-2"><Calendar size={14} /> Started</span>
-                            <span>{run.start_time ? format(new Date(run.start_time), 'MMM d, HH:mm') : '-'}</span>
-                        </div>
-                        <div className="flex items-center justify-between">
-                            <span className="flex items-center gap-2"><Clock size={14} /> Duration</span>
-                            <span>{run.duration ? `${run.duration.toFixed(2)}s` : '-'}</span>
-                        </div>
+                    <div className="flex items-center gap-3">
+                        <Button variant="outline" size="sm" onClick={fetchRuns} disabled={loading}>
+                            <RefreshCw size={16} className={`mr-2 ${loading ? 'animate-spin' : ''}`} />
+                            Refresh
+                        </Button>
                     </div>
+                </div>
+            </div>
 
-                    {/* Steps Progress */}
-                    {run.steps && (
-                        <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
-                            <div className="flex justify-between text-xs mb-1">
-                                <span className="text-slate-500">Progress</span>
-                                <span className="font-medium text-slate-900 dark:text-white">
-                                    {Object.values(run.steps).filter(s => s.success).length} / {Object.keys(run.steps).length}
-                                </span>
+            {/* Main Content */}
+            <div className="flex-1 overflow-hidden">
+                <div className="h-full max-w-[1800px] mx-auto px-6 py-6">
+                    <div className="h-full flex gap-6">
+                        {/* Left Sidebar - Navigation */}
+                        <div className="w-[320px] shrink-0 flex flex-col bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
+                            <div className="p-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 flex justify-between items-center">
+                                <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Explorer</h3>
+                                {pipelineFilter && (
+                                    <Badge variant="secondary" className="text-[10px]">
+                                        Filtered: {pipelineFilter}
+                                    </Badge>
+                                )}
                             </div>
-                            <div className="w-full h-1.5 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                                <div
-                                    className={`h-full ${config.color.replace('text-', 'bg-')} transition-all duration-300`}
-                                    style={{
-                                        width: `${(Object.values(run.steps).filter(s => s.success).length / Object.keys(run.steps).length) * 100}%`
-                                    }}
+                            <div className="flex-1 min-h-0">
+                                <NavigationTree
+                                    mode="runs"
+                                    projectId={selectedProject}
+                                    onSelect={handleRunSelect}
+                                    selectedId={selectedRun?.run_id}
                                 />
                             </div>
                         </div>
-                    )}
-                </Card>
-            </Link>
-        );
-    };
-
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-96">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="p-6 max-w-7xl mx-auto space-y-8">
-            {/* Stats Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <StatsCard
-                    label="Total Runs"
-                    value={stats.total}
-                    icon={<Activity size={20} />}
-                    color="slate"
-                    active={filter === 'all'}
-                    onClick={() => setFilter('all')}
-                />
-                <StatsCard
-                    label="Completed"
-                    value={stats.completed}
-                    icon={<CheckCircle size={20} />}
-                    color="emerald"
-                    active={filter === 'completed'}
-                    onClick={() => setFilter('completed')}
-                />
-                <StatsCard
-                    label="Failed"
-                    value={stats.failed}
-                    icon={<XCircle size={20} />}
-                    color="rose"
-                    active={filter === 'failed'}
-                    onClick={() => setFilter('failed')}
-                />
-                <StatsCard
-                    label="Running"
-                    value={stats.running}
-                    icon={<Loader size={20} />}
-                    color="amber"
-                    active={filter === 'running'}
-                    onClick={() => setFilter('running')}
-                />
-            </div>
 
-            <DataView
-                title="Pipeline Runs"
-                subtitle="Monitor and track all your pipeline executions"
-                items={filteredRuns}
-                loading={loading}
-                columns={columns}
-                renderGrid={renderGrid}
-                initialView="table" // Default to table for runs as it's usually more useful
-                actions={
-                    <div className="flex items-center gap-2">
-                        {/* Add to Project Action */}
-                        <ProjectSelector
-                            selectedRuns={selectedRunIds}
-                            onComplete={() => {
-                                // Call fetchRuns from parent scope
-                                fetchRuns();
-                                setSelectedRunIds([]);
-                            }}
-                        />
-                    </div>
-                }
-                emptyState={
-                    <EmptyState
-                        icon={Activity}
-                        title="No runs found"
-                        description={filter === 'all'
-                            ? 'Run a pipeline to see it here'
-                            : `No ${filter} runs found. Try a different filter.`
-                        }
-                    />
-                }
-            />
-        </div>
-    );
-}
-
-function ProjectSelector({ selectedRuns, onComplete }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [projects, setProjects] = useState([]);
-    const [updating, setUpdating] = useState(false);
-
-    useEffect(() => {
-        if (isOpen) {
-            fetch('/api/projects/')
-                .then(res => res.json())
-                .then(data => setProjects(data))
-                .catch(err => console.error('Failed to load projects:', err));
-        }
-    }, [isOpen]);
-
-    const handleSelectProject = async (projectName) => {
-        setUpdating(true);
-        try {
-            // Update all selected runs
-            const updates = selectedRuns.map(runId =>
-                fetch(`/api/runs/${runId}/project`, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ project_name: projectName })
-                })
-            );
-
-            await Promise.all(updates);
-
-            // Show success notification
-            showNotification('success', `Added ${selectedRuns.length} run(s) to project ${projectName}`);
-
-            setIsOpen(false);
-            if (onComplete) onComplete();
-        } catch (error) {
-            console.error('Failed to update projects:', error);
-            showNotification('error', 'Failed to update project attribution');
-        } finally {
-            setUpdating(false);
-        }
-    };
-
-    const showNotification = (type, message) => {
-        // Simple toast notification
-        const toast = document.createElement('div');
-        toast.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 ${type === 'success' ? 'bg-green-500' : 'bg-red-500'
-            } text-white animate-in slide-in-from-right`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        setTimeout(() => {
-            toast.classList.add('animate-out', 'fade-out');
-            setTimeout(() => document.body.removeChild(toast), 300);
-        }, 3000);
-    };
-
-    return (
-        <div className="relative">
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                disabled={updating || selectedRuns.length === 0}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-                <FolderPlus size={16} />
-                {updating ? 'Updating...' : `Add to Project (${selectedRuns.length})`}
-            </button>
-
-            {isOpen && (
-                <>
-                    <div
-                        className="fixed inset-0 z-10"
-                        onClick={() => setIsOpen(false)}
-                    />
-                    <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-20 overflow-hidden animate-in fade-in zoom-in-95 duration-100">
-                        <div className="p-2 border-b border-slate-100 dark:border-slate-700">
-                            <span className="text-xs font-semibold text-slate-500 px-2">Select Project</span>
-                        </div>
-                        <div className="max-h-64 overflow-y-auto p-1">
-                            {projects.length > 0 ? (
-                                projects.map(p => (
-                                    <button
-                                        key={p.name}
-                                        onClick={() => handleSelectProject(p.name)}
-                                        disabled={updating}
-                                        className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-lg transition-colors disabled:opacity-50"
-                                    >
-                                        {p.name}
-                                    </button>
-                                ))
+                        {/* Right Content - Details Panel or Empty State */}
+                        <div className="flex-1 min-w-0 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
+                            {selectedRun ? (
+                                <RunDetailsPanel
+                                    run={selectedRun}
+                                    onClose={() => setSelectedRun(null)}
+                                />
                             ) : (
-                                <div className="px-3 py-2 text-sm text-slate-400 italic">No projects found</div>
+                                <div className="h-full flex flex-col items-center justify-center text-center p-8 bg-slate-50/50 dark:bg-slate-900/50">
+                                    <div className="w-20 h-20 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-6 animate-pulse">
+                                        <PlayCircle size={40} className="text-blue-500" />
+                                    </div>
+                                    <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                                        Select a Run
+                                    </h2>
+                                    <p className="text-slate-500 max-w-md">
+                                        Choose a run from the sidebar to view execution details, logs, and artifacts.
+                                    </p>
+                                </div>
                             )}
                         </div>
                     </div>
-                </>
-            )}
-        </div>
-    );
-}
-
-function StatsCard({ label, value, icon, color, active, onClick }) {
-    const colorClasses = {
-        slate: {
-            bg: "bg-slate-50",
-            text: "text-slate-600",
-            border: "border-slate-200",
-            activeBg: "bg-slate-100",
-            activeBorder: "border-slate-300"
-        },
-        emerald: {
-            bg: "bg-emerald-50",
-            text: "text-emerald-600",
-            border: "border-emerald-200",
-            activeBg: "bg-emerald-100",
-            activeBorder: "border-emerald-300"
-        },
-        rose: {
-            bg: "bg-rose-50",
-            text: "text-rose-600",
-            border: "border-rose-200",
-            activeBg: "bg-rose-100",
-            activeBorder: "border-rose-300"
-        },
-        amber: {
-            bg: "bg-amber-50",
-            text: "text-amber-600",
-            border: "border-amber-200",
-            activeBg: "bg-amber-100",
-            activeBorder: "border-amber-300"
-        }
-    };
-
-    const colors = colorClasses[color];
-
-    return (
-        <Card
-            className={`cursor-pointer transition-all duration-200 hover:shadow-md border-2 ${active ? colors.activeBorder : 'border-transparent'
-                }`}
-            onClick={onClick}
-        >
-            <div className="flex items-center justify-between">
-                <div>
-                    <p className="text-sm text-slate-500 font-medium mb-1">{label}</p>
-                    <p className="text-3xl font-bold text-slate-900 dark:text-white">{value}</p>
-                </div>
-                <div className={`p-3 rounded-xl ${active ? colors.activeBg : colors.bg} ${colors.text}`}>
-                    {icon}
                 </div>
             </div>
-        </Card>
+        </div>
     );
 }

flowyml/ui/frontend/src/app/settings/page.jsx

@@ -77,6 +77,7 @@ export function Settings() {
     };
 
     const maskToken = (token) => {
+        if (!token || typeof token !== 'string') return '••••••••••••••••••••••••••••••••••••••••••••••••';
         return `${token.substring(0, 8)}${'•'.repeat(32)}${token.substring(token.length - 8)}`;
     };
 

flowyml/ui/frontend/src/app/tokens/page.jsx

@@ -1,6 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { fetchApi } from '../../utils/api';
-import { Key, Plus, Trash2, Copy, Check, Shield, Calendar, AlertCircle } from 'lucide-react';
+import {
+    Key,
+    Plus,
+    Trash2,
+    Copy,
+    Check,
+    Shield,
+    Calendar,
+    AlertCircle,
+    Eye,
+    PenTool,
+    Zap,
+    ShieldCheck
+} from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '../../components/ui/Card';
 import { Button } from '../../components/ui/Button';
 import { Badge } from '../../components/ui/Badge';
@@ -150,6 +163,47 @@ export function TokenManagement() {
     );
 }
 
+const PERMISSION_STYLES = {
+    read: {
+        label: 'Read',
+        icon: Eye,
+        className: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-200 dark:border-blue-800'
+    },
+    write: {
+        label: 'Write',
+        icon: PenTool,
+        className: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-200 dark:border-emerald-800'
+    },
+    execute: {
+        label: 'Execute',
+        icon: Zap,
+        className: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-200 dark:border-purple-800'
+    },
+    admin: {
+        label: 'Admin',
+        icon: ShieldCheck,
+        className: 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-900/30 dark:text-rose-200 dark:border-rose-800'
+    }
+};
+
+function PermissionChip({ perm }) {
+    const config = PERMISSION_STYLES[perm] || {
+        label: perm,
+        icon: Shield,
+        className: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800/60 dark:text-slate-100 dark:border-slate-700'
+    };
+    const Icon = config.icon;
+
+    return (
+        <span
+            className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border ${config.className}`}
+        >
+            <Icon size={12} />
+            {config.label}
+        </span>
+    );
+}
+
 function TokenItem({ token, onRevoke }) {
     const [showRevoke, setShowRevoke] = useState(false);
 
@@ -165,13 +219,6 @@ function TokenItem({ token, onRevoke }) {
         }
     };
 
-    const permissionColors = {
-        read: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
-        write: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
-        execute: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
-        admin: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300'
-    };
-
     return (
         <div className="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-primary-300 dark:hover:border-primary-700 transition-colors">
             <div className="flex items-start justify-between">
@@ -185,14 +232,13 @@ function TokenItem({ token, onRevoke }) {
                         )}
                     </div>
                     <div className="flex flex-wrap gap-2 mb-3">
-                        {token.permissions?.map(perm => (
-                            <span
-                                key={perm}
-                                className={`px - 2 py - 0.5 rounded text - xs font - medium ${permissionColors[perm] || 'bg-slate-100 text-slate-700'} `}
-                            >
-                                {perm}
-                            </span>
-                        ))}
+                        {token.permissions?.length ? (
+                            token.permissions.map(perm => (
+                                <PermissionChip key={perm} perm={perm} />
+                            ))
+                        ) : (
+                            <span className="text-xs text-slate-400">No permissions assigned</span>
+                        )}
                     </div>
                     <div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400">
                         <span className="flex items-center gap-1">