RBAC, Permissions, and Export/Import

src/pages/admin/AdminStaff.js

@@ -1,22 +1,31 @@
 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';
 import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
+import CreateStaffDialog from '../../components/CreateStaffDialog';
+import InviteStaffDialog from '../../components/InviteStaffDialog';
+import PendingInvitationsTable from '../../components/PendingInvitationsTable';
 import { toast } from 'sonner';
-import { UserCog, Search, Shield } from 'lucide-react';
+import { UserCog, Search, Shield, UserPlus, Mail } from 'lucide-react';
 
 const AdminStaff = () => {
+  const { hasPermission } = useAuth();
   const [users, setUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [roleFilter, setRoleFilter] = useState('all');
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('staff-list');
 
-  // Staff roles (non-guest, non-member)
-  const STAFF_ROLES = ['admin'];
+  // Staff roles (non-guest, non-member) - includes all admin-type roles
+  const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
 
   useEffect(() => {
     fetchStaff();
@@ -95,12 +104,36 @@ const AdminStaff = () => {
   return (
     <>
       <div className="mb-8">
-        <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-          Staff Management
-        </h1>
-        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-          Manage internal team members and their roles.
-        </p>
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Staff Management
+            </h1>
+            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              Manage internal team members and their roles.
+            </p>
+          </div>
+          <div className="flex gap-3">
+            {hasPermission('users.invite') && (
+              <Button
+                onClick={() => setInviteDialogOpen(true)}
+                className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"
+              >
+                <Mail className="h-5 w-5 mr-2" />
+                Invite Staff
+              </Button>
+            )}
+            {hasPermission('users.create') && (
+              <Button
+                onClick={() => setCreateDialogOpen(true)}
+                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+              >
+                <UserPlus className="h-5 w-5 mr-2" />
+                Create Staff
+              </Button>
+            )}
+          </div>
+        </div>
       </div>
 
       {/* Stats */}
@@ -131,91 +164,127 @@ const AdminStaff = () => {
         </Card>
       </div>
 
-      {/* Filters */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
-        <div className="grid md:grid-cols-2 gap-4">
-          <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
-            <Input
-              placeholder="Search by name or email..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
-              data-testid="search-staff-input"
-            />
-          </div>
-          <Select value={roleFilter} onValueChange={setRoleFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="role-filter-select">
-              <SelectValue placeholder="Filter by role" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Roles</SelectItem>
-              <SelectItem value="superadmin">Superadmin</SelectItem>
-              <SelectItem value="admin">Admin</SelectItem>
-              <SelectItem value="moderator">Moderator</SelectItem>
-              <SelectItem value="staff">Staff</SelectItem>
-              <SelectItem value="media">Media</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </Card>
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
+        <TabsList className="grid w-full grid-cols-2 mb-8">
+          <TabsTrigger value="staff-list" className="text-lg py-3">
+            <UserCog className="h-5 w-5 mr-2" />
+            Staff Members
+          </TabsTrigger>
+          <TabsTrigger value="pending-invitations" className="text-lg py-3">
+            <Mail className="h-5 w-5 mr-2" />
+            Pending Invitations
+          </TabsTrigger>
+        </TabsList>
 
-      {/* Staff List */}
-      {loading ? (
-        <div className="text-center py-20">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
-        </div>
-      ) : filteredUsers.length > 0 ? (
-        <div className="space-y-4">
-          {filteredUsers.map((user) => (
-            <Card
-              key={user.id}
-              className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
-              data-testid={`staff-card-${user.id}`}
-            >
-              <div className="flex justify-between items-start flex-wrap gap-4">
-                <div className="flex items-start gap-4 flex-1">
-                  {/* Avatar */}
-                  <div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-lg flex-shrink-0">
-                    {user.first_name?.[0]}{user.last_name?.[0]}
-                  </div>
-
-                  {/* Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {user.first_name} {user.last_name}
-                      </h3>
-                      {getRoleBadge(user.role)}
-                      {getStatusBadge(user.status)}
-                    </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      <p>Email: {user.email}</p>
-                      <p>Phone: {user.phone}</p>
-                      <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
-                      {user.last_login && (
-                        <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
-                      )}
-                    </div>
-                  </div>
-                </div>
+        <TabsContent value="staff-list">
+          {/* Filters */}
+          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="relative">
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+                <Input
+                  placeholder="Search by name or email..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  data-testid="search-staff-input"
+                />
               </div>
-            </Card>
-          ))}
-        </div>
-      ) : (
-        <div className="text-center py-20">
-          <UserCog className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-            No Staff Found
-          </h3>
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            {searchQuery || roleFilter !== 'all'
-              ? 'Try adjusting your filters'
-              : 'No staff members yet'}
-          </p>
-        </div>
-      )}
+              <Select value={roleFilter} onValueChange={setRoleFilter}>
+                <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="role-filter-select">
+                  <SelectValue placeholder="Filter by role" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Roles</SelectItem>
+                  <SelectItem value="superadmin">Superadmin</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
+                  <SelectItem value="moderator">Moderator</SelectItem>
+                  <SelectItem value="staff">Staff</SelectItem>
+                  <SelectItem value="media">Media</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </Card>
+
+          {/* Staff List */}
+          {loading ? (
+            <div className="text-center py-20">
+              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
+            </div>
+          ) : filteredUsers.length > 0 ? (
+            <div className="space-y-4">
+              {filteredUsers.map((user) => (
+                <Card
+                  key={user.id}
+                  className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
+                  data-testid={`staff-card-${user.id}`}
+                >
+                  <div className="flex justify-between items-start flex-wrap gap-4">
+                    <div className="flex items-start gap-4 flex-1">
+                      {/* Avatar */}
+                      <div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-lg flex-shrink-0">
+                        {user.first_name?.[0]}{user.last_name?.[0]}
+                      </div>
+
+                      {/* Info */}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 mb-2 flex-wrap">
+                          <h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {user.first_name} {user.last_name}
+                          </h3>
+                          {getRoleBadge(user.role)}
+                          {getStatusBadge(user.status)}
+                        </div>
+                        <div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p>Email: {user.email}</p>
+                          <p>Phone: {user.phone}</p>
+                          <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                          {user.last_login && (
+                            <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-20">
+              <UserCog className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
+              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                No Staff Found
+              </h3>
+              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                {searchQuery || roleFilter !== 'all'
+                  ? 'Try adjusting your filters'
+                  : 'No staff members yet'}
+              </p>
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="pending-invitations">
+          <PendingInvitationsTable />
+        </TabsContent>
+      </Tabs>
+
+      {/* Dialogs */}
+      <CreateStaffDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        onSuccess={fetchStaff}
+      />
+
+      <InviteStaffDialog
+        open={inviteDialogOpen}
+        onOpenChange={setInviteDialogOpen}
+        onSuccess={() => {
+          // Optionally refresh invitations table
+          setActiveTab('pending-invitations');
+        }}
+      />
     </>
   );
 };