andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Comprehensive RBAC implementation across admin pages

Browse Source 
**Option 3 Implementation (Latest):**
- InviteStaffDialog: Use /admin/roles/assignable endpoint
- AdminStaff: Enable admin users to see 'Invite Staff' button

**Permission Checks Added (8 admin pages):**
- AdminNewsletters: newsletters.create/edit/delete
- AdminFinancials: financials.create/edit/delete
- AdminBylaws: bylaws.create/edit/delete
- AdminValidations: users.approve, subscriptions.activate
- AdminSubscriptions: subscriptions.export/edit/cancel
- AdminDonations: donations.export
- AdminGallery: gallery.upload/edit/delete
- AdminPlans: subscriptions.plans

**Pattern Established:**
All admin action buttons now wrapped with hasPermission() checks.
UI hides what users can't access, backend enforces rules.

**Files Modified:** 10 files, 100+ permission checks added
This commit is contained in:
Koncept Kit
2026-01-06 14:45:15 +07:00
parent 0249cad261
commit 40a0e3f342
11 changed files with 368 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/admin/AdminBylaws.js
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
@@ -32,6 +33,7 @@ import {
} from 'lucide-react';
const AdminBylaws = () => {
const { hasPermission } = useAuth();
const [bylaws, setBylaws] = useState([]);
const [loading, setLoading] = useState(true);
const [dialogOpen, setDialogOpen] = useState(false);
@@ -184,13 +186,15 @@ const AdminBylaws = () => {
Manage LOAF governing bylaws and version history
</p>
</div>
<Button
onClick={handleCreate}
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Version
</Button>
{hasPermission('bylaws.create') && (
<Button
onClick={handleCreate}
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Version
</Button>
)}
</div>
{/* Current Bylaws */}
@@ -226,22 +230,26 @@ const AdminBylaws = () => {
<ExternalLink className="h-4 w-4 mr-1" />
View
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(currentBylaws)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(currentBylaws)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
{hasPermission('bylaws.edit') && (
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(currentBylaws)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
)}
{hasPermission('bylaws.delete') && (
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(currentBylaws)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
</div>
<div className="flex items-center gap-4 text-sm text-[#664fa3]">
@@ -254,10 +262,12 @@ const AdminBylaws = () => {
<Card className="p-12 text-center">
<Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Plus className="h-4 w-4 mr-2" />
Create Bylaws
</Button>
{hasPermission('bylaws.create') && (
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Plus className="h-4 w-4 mr-2" />
Create Bylaws
</Button>
)}
</Card>
)}
@@ -290,22 +300,26 @@ const AdminBylaws = () => {
>
<ExternalLink className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(bylawsDoc)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(bylawsDoc)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
{hasPermission('bylaws.edit') && (
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(bylawsDoc)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
)}
{hasPermission('bylaws.delete') && (
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(bylawsDoc)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
</div>
</Card>