andika/membership-fe
3
1
Fork 1
Code Issues 18 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

70
src/pages/admin/AdminNewsletters.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 AdminNewsletters = () => {
const { hasPermission } = useAuth();
const [newsletters, setNewsletters] = useState([]);
const [loading, setLoading] = useState(true);
const [dialogOpen, setDialogOpen] = useState(false);
@@ -190,13 +192,15 @@ const AdminNewsletters = () => {
Create and manage newsletter archive
</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 Newsletter
</Button>
{hasPermission('newsletters.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 Newsletter
</Button>
)}
</div>
{/* Newsletters List */}
@@ -204,10 +208,12 @@ const AdminNewsletters = () => {
<Card className="p-12 text-center">
<FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg mb-4">No newsletters yet</p>
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Plus className="h-4 w-4 mr-2" />
Create First Newsletter
</Button>
{hasPermission('newsletters.create') && (
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Plus className="h-4 w-4 mr-2" />
Create First Newsletter
</Button>
)}
</Card>
) : (
<div className="space-y-6">
@@ -246,24 +252,30 @@ const AdminNewsletters = () => {
</Button>
</div>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(newsletter)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(newsletter)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
{(hasPermission('newsletters.edit') || hasPermission('newsletters.delete')) && (
<div className="flex gap-2">
{hasPermission('newsletters.edit') && (
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(newsletter)}
className="border-[#664fa3] text-[#664fa3]"
>
<Edit className="h-4 w-4" />
</Button>
)}
{hasPermission('newsletters.delete') && (
<Button
variant="outline"
size="sm"
onClick={() => handleDelete(newsletter)}
className="border-red-500 text-red-500 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
)}
</div>
</Card>
))}