feat: add multi-user support and role-based access control #31

web/src/features/accounts/components/running-state-action.tsx

@@ -22,6 +22,9 @@ import { Button } from '@/components/ui/button'
 import { AccountModel } from '../data/schema';
 import { useAccountContext } from '../context';
 import { useTranslation } from 'react-i18next';
+import { useCurrentUser } from '@/hooks/use-current-user';
+import { toast } from '@/hooks/use-toast';
+import { ToastAction } from '@/components/ui/toast';
 
 interface Props {
   row: Row<AccountModel>
@@ -30,16 +33,31 @@ interface Props {
 export function RunningStateCellAction({ row }: Props) {
   const { t } = useTranslation()
   const { setOpen, setCurrentRow } = useAccountContext()
+  const { require_any_permission } = useCurrentUser()
 
   let account_type = row.original.account_type;
   if (account_type === "NoSync") {
     return <span className="text-xs text-muted-foreground">n/a</span>
   }
+  const hasPermission = require_any_permission(['system:root', 'account:read_details'], row.original.id)
 
   return (
     <Button variant='ghost' className="h-auto p-1" onClick={() => {
-      setCurrentRow(row.original)
-      setOpen('running-state')
+      if (hasPermission) {
+        setCurrentRow(row.original)
+        setOpen('running-state')
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Forbidden',
+          description: 'You do not have permission to view this account.',
+          action: (
+            <ToastAction altText="Close">
+              Close
+            </ToastAction>
+          ),
+        })
+      }
     }}>
       <span className="text-xs text-blue-500 cursor-pointer underline hover:text-blue-700">{t('accounts.viewDetails')}</span>
     </Button>