Implement permissions on participants page

src/app/dashboard/participants/page.tsx

@@ -20,6 +20,7 @@ import {
   SelectTrigger,
   SelectValue
 } from "~/components/ui/select";
+import { usePermissions } from "~/hooks/usePermissions";
 
 interface Study {
   id: number;
@@ -38,6 +39,7 @@ export default function Participants() {
   const [selectedStudyId, setSelectedStudyId] = useState<number | null>(null);
   const [participantName, setParticipantName] = useState("");
   const [loading, setLoading] = useState(true);
+  const { hasPermission } = usePermissions();
 
   useEffect(() => {
     fetchStudies();
@@ -195,6 +197,7 @@ export default function Participants() {
                     Participant ID: {participant.id}
                   </CardDescription>
                 </div>
+                {hasPermission('DELETE_PARTICIPANT') && (
                   <Button 
                     variant="ghost" 
                     size="icon"
@@ -203,6 +206,7 @@ export default function Participants() {
                   >
                     <Trash2Icon className="w-4 h-4" />
                   </Button>
+                )}
               </div>
             </CardHeader>
             <CardFooter className="text-sm text-muted-foreground">