+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 28% | +21/75 | +6.89% | +4/58 | +36.36% | +4/11 | +27.39% | +20/73 | +
| src/components | +
+
+ |
+ 7.21% | +38/527 | +4.84% | +19/392 | +4.51% | +6/133 | +8% | +38/475 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 | + + + + + + + + +3x +3x +3x +3x +3x +3x +3x + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + +2x +1x +1x + + +1x + + + + + +2x + + + + + + + + + + + + +2x + + +3x + + + + + +3x +2x + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect, useCallback } from 'react';
+import { supabase } from './supabaseClient';
+import Auth from './components/Auth';
+import UserDashboard from './components/UserDashboard';
+import StaffDashboard from './components/StaffDashboard';
+import AdminDashboard from './components/AdminDashboard';
+import SuperAdminDashboard from './components/SuperAdminDashboard';
+
+export default function App() {
+ const [session, setSession] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [roleLoading, setRoleLoading] = useState(false);
+ const [userRole, setUserRole] = useState('user'); // Default fallback role
+ const [isActive, setIsActive] = useState(true); // Account activation status
+ const [activeViewRole, setActiveViewRole] = useState(null); // Quick role preview switcher
+ const [activationError, setActivationError] = useState(null);
+
+ // Fetch role and activation status from `profiles` table upon authentication
+ const fetchUserRoleAndStatus = useCallback(async (userId, userEmail) => {
+ if (!userId) return;
+ setRoleLoading(true);
+ setActivationError(null);
+
+ const cleanEmail = userEmail?.toLowerCase();
+
+ try {
+ // 1. Fetch user profile from `profiles` table
+ const { data: profile, error } = await supabase
+ .from('profiles')
+ .select('role, is_active')
+ .eq('id', userId)
+ .maybeSingle();
+
+ if (error && error.code !== 'PGRST116') {
+ console.warn('Error fetching profile role & status:', error.message);
+ }
+
+ if (profile) {
+ setUserRole(profile.role || 'user');
+ setActiveViewRole(profile.role || 'user');
+
+ // Check account activation (Seed super admin is auto-active)
+ const activeStatus = profile.is_active ?? (cleanEmail === 'superadmin@admin.com');
+ setIsActive(activeStatus);
+
+ if (!activeStatus) {
+ setActivationError(
+ 'Your account is currently PENDING ACTIVATION by an Administrator. Access to the portal is restricted until an Admin activates your profile.'
+ );
+ }
+ } else {
+ // If profile doesn't exist yet (auto-upsert)
+ const defaultRole = cleanEmail === 'superadmin@admin.com' ? 'super_admin' : 'user';
+ const defaultActive = cleanEmail === 'superadmin@admin.com';
+
+ setUserRole(defaultRole);
+ setActiveViewRole(defaultRole);
+ setIsActive(defaultActive);
+
+ await supabase.from('profiles').upsert({
+ id: userId,
+ email: userEmail,
+ role: defaultRole,
+ is_active: defaultActive,
+ });
+
+ if (!defaultActive) {
+ setActivationError(
+ 'Your account is currently PENDING ACTIVATION by an Administrator. Access to the portal is restricted until an Admin activates your profile.'
+ );
+ }
+ }
+ } catch (err) {
+ console.error('Role & status fetch exception:', err);
+ setUserRole('user');
+ setActiveViewRole('user');
+ } finally {
+ setRoleLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ // Get initial session
+ supabase.auth.getSession().then(({ data: { session } }) => {
+ setSession(session);
+ Iif (session?.user) {
+ fetchUserRoleAndStatus(session.user.id, session.user.email);
+ }
+ setLoading(false);
+ });
+
+ // Listen for auth state changes
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange((_event, session) => {
+ setSession(session);
+ if (session?.user) {
+ fetchUserRoleAndStatus(session.user.id, session.user.email);
+ } else {
+ setUserRole('user');
+ setActiveViewRole(null);
+ setIsActive(true);
+ setActivationError(null);
+ }
+ setLoading(false);
+ });
+
+ return () => subscription.unsubscribe();
+ }, [fetchUserRoleAndStatus]);
+
+ const handleSignOut = async () => {
+ await supabase.auth.signOut();
+ setSession(null);
+ setActivationError(null);
+ };
+
+ if (loading) {
+ return (
+ <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+ <div className="text-center">
+ <div className="inline-flex items-center justify-center p-4 bg-slate-900 border border-slate-800 rounded-2xl mb-4">
+ <svg className="animate-spin h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24">
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+ </svg>
+ </div>
+ <p className="text-sm font-semibold text-slate-200">Initializing IT Support Portal...</p>
+ <p className="text-xs text-slate-500 mt-1">Verifying activation status & RBAC permissions</p>
+ </div>
+ </div>
+ );
+ }
+
+ Eif (!session) {
+ return <Auth />;
+ }
+
+ const user = session.user;
+
+ // Inactive User Activation Guard Screen
+ if (!isActive) {
+ return (
+ <div className="min-h-screen bg-slate-950 flex items-center justify-center px-4 py-12">
+ <div className="w-full max-w-lg bg-slate-900/90 border border-amber-800/60 rounded-2xl shadow-2xl p-8 text-center space-y-6">
+ <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-950/80 border border-amber-700/80 text-amber-400">
+ <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+ </svg>
+ </div>
+
+ <div>
+ <h2 className="text-xl font-bold text-slate-100 tracking-tight">Account Pending Activation</h2>
+ <p className="text-xs text-slate-400 mt-2 leading-relaxed">
+ {activationError ||
+ 'Your account has been created, but it requires activation by an IT Admin or Super Admin before you can access help desk features.'}
+ </p>
+ </div>
+
+ <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl text-left text-xs space-y-1.5 text-slate-300">
+ <p><strong>Registered Email:</strong> {user.email}</p>
+ <p><strong>Account Status:</strong> <span className="text-amber-400 font-semibold">Inactive (Pending Admin Action)</span></p>
+ <p className="text-[11px] text-slate-500 pt-1">
+ Contact your system administrator or Super Admin to request account activation.
+ </p>
+ </div>
+
+ <div className="flex justify-center gap-3">
+ <button
+ onClick={() => fetchUserRoleAndStatus(user.id, user.email)}
+ className="px-4 py-2.5 bg-amber-600 hover:bg-amber-500 text-slate-950 font-semibold text-xs rounded-xl transition-all active:scale-95"
+ >
+ Check Activation Status
+ </button>
+ <button
+ onClick={handleSignOut}
+ className="px-4 py-2.5 bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 text-xs font-semibold rounded-xl transition-all"
+ >
+ Sign Out
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ const currentDisplayRole = activeViewRole || userRole;
+
+ // Helper badge styling per role
+ const getRoleBadgeStyle = (role) => {
+ switch (role) {
+ case 'super_admin':
+ return 'bg-rose-950/80 text-rose-300 border-rose-700/80';
+ case 'admin':
+ return 'bg-purple-950/80 text-purple-300 border-purple-700/80';
+ case 'staff':
+ return 'bg-sky-950/80 text-sky-300 border-sky-700/80';
+ default:
+ return 'bg-blue-950/80 text-blue-300 border-blue-700/80';
+ }
+ };
+
+ return (
+ <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans">
+ {/* Header Bar */}
+ <header className="sticky top-0 z-50 bg-slate-900/90 backdrop-blur-xl border-b border-slate-800 shadow-xl">
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
+ {/* Logo & Portal Title */}
+ <div className="flex items-center gap-3">
+ <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-900 via-slate-900 to-purple-900 border border-slate-700/60 shadow-md flex items-center justify-center">
+ <svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+ </svg>
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+ <h1 className="text-base font-bold text-slate-100 tracking-tight">IT Help Desk</h1>
+ <span className="px-2 py-0.5 text-[10px] font-semibold bg-emerald-950 text-emerald-400 border border-emerald-800/80 rounded-md uppercase tracking-wider">
+ Iteration 3
+ </span>
+ </div>
+ <p className="text-[11px] text-slate-400">Enterprise IT Service & Support Portal</p>
+ </div>
+ </div>
+
+ {/* User Info, Active Role & Quick Switcher */}
+ <div className="flex items-center gap-3 sm:gap-4">
+ {/* Active DB Role Badge */}
+ <div className="hidden lg:flex items-center gap-2 px-3 py-1.5 bg-slate-950/80 border border-slate-800 rounded-xl text-xs">
+ <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
+ <span className="text-slate-400">Signed in:</span>
+ <span className="font-medium text-slate-200 truncate max-w-[140px]">{user.email}</span>
+ <span className={`ml-1 px-2 py-0.5 text-[10px] font-bold rounded-md border uppercase tracking-wider ${getRoleBadgeStyle(userRole)}`}>
+ {roleLoading ? '...' : userRole}
+ </span>
+ </div>
+
+ {/* Quick Role View Preview Switcher */}
+ <div className="flex items-center bg-slate-950 p-1 rounded-xl border border-slate-800">
+ <span className="text-[10px] text-slate-500 font-semibold uppercase px-2 hidden sm:inline">
+ View Mode:
+ </span>
+ {['user', 'staff', 'admin', 'super_admin'].map((r) => (
+ <button
+ key={r}
+ onClick={() => setActiveViewRole(r)}
+ className={`px-2 py-1 text-[11px] font-semibold rounded-lg transition-all capitalize ${
+ currentDisplayRole === r
+ ? r === 'super_admin'
+ ? 'bg-rose-600 text-white shadow-sm'
+ : r === 'admin'
+ ? 'bg-purple-600 text-white shadow-sm'
+ : r === 'staff'
+ ? 'bg-sky-600 text-white shadow-sm'
+ : 'bg-blue-600 text-white shadow-sm'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ title={`Switch view mode to ${r}`}
+ >
+ {r === 'super_admin' ? 'Super Admin' : r}
+ </button>
+ ))}
+ </div>
+
+ <button
+ onClick={handleSignOut}
+ className="px-3 py-1.5 bg-slate-900 hover:bg-rose-950/40 text-slate-300 hover:text-rose-300 border border-slate-700 hover:border-rose-800/60 rounded-xl text-xs font-semibold transition-all flex items-center gap-1.5 active:scale-95 shrink-0"
+ >
+ <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+ </svg>
+ <span className="hidden sm:inline">Sign Out</span>
+ </button>
+ </div>
+ </div>
+ </header>
+
+ {/* Main Role-Based Dashboard View */}
+ <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+ {currentDisplayRole === 'user' && <UserDashboard user={user} />}
+ {currentDisplayRole === 'staff' && <StaffDashboard user={user} />}
+ {currentDisplayRole === 'admin' && <AdminDashboard user={user} />}
+ {currentDisplayRole === 'super_admin' && <SuperAdminDashboard user={user} />}
+ </main>
+
+ {/* Footer */}
+ <footer className="border-t border-slate-800 bg-slate-950 py-6 mt-12">
+ <div className="max-w-7xl mx-auto px-4 text-center text-xs text-slate-500">
+ <p>
+ IT Service Help Desk • Role Hierarchy & User Activation • Powered by React & Supabase
+ </p>
+ </div>
+ </footer>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState, useCallback } from 'react';
+import { supabase } from '../supabaseClient';
+import UserManagement from './UserManagement';
+import TicketComments from './TicketComments';
+
+/**
+ * AdminDashboard Component
+ * Adheres to SOLID principles:
+ * - Single Responsibility: Manages IT ticket dispatching, staff workload assignments, user activation, and ticket comment oversight.
+ */
+export default function AdminDashboard({ user }) {
+ const [tickets, setTickets] = useState([]);
+ const [staffList, setStaffList] = useState([]);
+ const [allProfiles, setAllProfiles] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [updatingTicketId, setUpdatingTicketId] = useState(null);
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [successMsg, setSuccessMsg] = useState(null);
+ const [statusFilter, setStatusFilter] = useState('All');
+ const [assignmentFilter, setAssignmentFilter] = useState('All');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showUserManager, setShowUserManager] = useState(false);
+ const [expandedTicketId, setExpandedTicketId] = useState(null);
+
+ // Fetch tickets and profiles
+ const fetchData = useCallback(async () => {
+ setLoading(true);
+ setErrorMsg(null);
+
+ try {
+ // 1. Fetch tickets
+ const { data: ticketsData, error: ticketsErr } = await supabase
+ .from('tickets')
+ .select('*')
+ .order('created_at', { ascending: false });
+
+ if (ticketsErr) throw ticketsErr;
+
+ // 2. Fetch profiles
+ const { data: profilesData, error: profilesErr } = await supabase
+ .from('profiles')
+ .select('*')
+ .order('email', { ascending: true });
+
+ if (profilesErr) {
+ console.warn('Profiles table query error:', profilesErr.message);
+ }
+
+ const profiles = profilesData || [];
+ setAllProfiles(profiles);
+
+ // Filter staff members for assignment
+ const staff = profiles.filter((p) => p.role === 'staff' && p.is_active);
+ setStaffList(staff);
+ setTickets(ticketsData || []);
+ } catch (err) {
+ setErrorMsg(err.message || 'Failed to load dispatch data.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ // Handle staff assignment change
+ const handleAssignChange = async (ticketId, staffId) => {
+ setUpdatingTicketId(ticketId);
+ setErrorMsg(null);
+ setSuccessMsg(null);
+
+ const assignedValue = staffId === '' ? null : staffId;
+
+ try {
+ const { error } = await supabase
+ .from('tickets')
+ .update({ assigned_to: assignedValue })
+ .eq('id', ticketId);
+
+ if (error) throw error;
+
+ setTickets((prev) =>
+ prev.map((t) => (t.id === ticketId ? { ...t, assigned_to: assignedValue } : t))
+ );
+
+ const assignedStaff = staffList.find((s) => s.id === staffId);
+ const staffEmail = assignedStaff ? assignedStaff.email : 'Unassigned';
+ setSuccessMsg(`Ticket updated! Assigned to: ${staffEmail}`);
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to assign staff: ${err.message}`);
+ } finally {
+ setUpdatingTicketId(null);
+ }
+ };
+
+ // Handle user account activation toggle
+ const handleToggleActivation = async (profileId, newActiveStatus) => {
+ try {
+ const { error } = await supabase
+ .from('profiles')
+ .update({ is_active: newActiveStatus })
+ .eq('id', profileId);
+
+ if (error) throw error;
+
+ setSuccessMsg(
+ `User account ${newActiveStatus ? 'activated successfully' : 'deactivated'}.`
+ );
+ fetchData();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to update activation status: ${err.message}`);
+ }
+ };
+
+ // Handle role modification
+ const handleRoleChange = async (profileId, newRole) => {
+ try {
+ const { error } = await supabase
+ .from('profiles')
+ .update({ role: newRole })
+ .eq('id', profileId);
+
+ if (error) throw error;
+
+ setSuccessMsg(`User role updated to '${newRole}'.`);
+ fetchData();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to update role: ${err.message}`);
+ }
+ };
+
+ // Handle user removal
+ const handleDeleteProfile = async (profileId) => {
+ try {
+ const { error } = await supabase.from('profiles').delete().eq('id', profileId);
+ if (error) throw error;
+
+ setSuccessMsg('User profile removed.');
+ fetchData();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to remove user: ${err.message}`);
+ }
+ };
+
+ // Handle ticket deletion (Admin privilege)
+ const handleDeleteTicket = async (ticketId) => {
+ if (!window.confirm('Are you sure you want to delete this ticket permanently?')) return;
+
+ try {
+ const { error } = await supabase.from('tickets').delete().eq('id', ticketId);
+ if (error) throw error;
+ setTickets((prev) => prev.filter((t) => t.id !== ticketId));
+ setSuccessMsg('Ticket deleted successfully.');
+ setTimeout(() => setSuccessMsg(null), 3000);
+ } catch (err) {
+ setErrorMsg(`Failed to delete ticket: ${err.message}`);
+ }
+ };
+
+ // Helper map for profile email by ID
+ const getProfileEmail = (id) => {
+ if (!id) return 'Unassigned';
+ const prof = allProfiles.find((p) => p.id === id);
+ return prof ? prof.email : id.slice(0, 8) + '...';
+ };
+
+ // Filtering tickets
+ const filteredTickets = tickets.filter((t) => {
+ const matchesStatus = statusFilter === 'All' || t.status === statusFilter;
+ const matchesAssignment =
+ assignmentFilter === 'All'
+ ? true
+ : assignmentFilter === 'Unassigned'
+ ? !t.assigned_to
+ : t.assigned_to === assignmentFilter;
+
+ const query = searchQuery.toLowerCase();
+ const matchesSearch =
+ t.title.toLowerCase().includes(query) ||
+ t.category.toLowerCase().includes(query) ||
+ (t.description && t.description.toLowerCase().includes(query)) ||
+ getProfileEmail(t.assigned_to).toLowerCase().includes(query);
+
+ return matchesStatus && matchesAssignment && matchesSearch;
+ });
+
+ // Statistics
+ const totalCount = tickets.length;
+ const unassignedCount = tickets.filter((t) => !t.assigned_to).length;
+ const pendingCount = tickets.filter((t) => t.status === 'Pending').length;
+ const inProgressCount = tickets.filter((t) => t.status === 'In Progress').length;
+ const resolvedCount = tickets.filter((t) => t.status === 'Resolved').length;
+ const pendingUsersCount = allProfiles.filter((p) => !p.is_active).length;
+
+ const getStatusBadge = (status) => {
+ switch (status) {
+ case 'Pending':
+ return 'bg-amber-950/60 text-amber-300 border-amber-800/80';
+ case 'In Progress':
+ return 'bg-sky-950/60 text-sky-300 border-sky-800/80';
+ case 'Resolved':
+ return 'bg-emerald-950/60 text-emerald-300 border-emerald-800/80';
+ case 'Closed':
+ return 'bg-slate-800 text-slate-400 border-slate-700';
+ default:
+ return 'bg-slate-800 text-slate-300 border-slate-700';
+ }
+ };
+
+ return (
+ <div className="space-y-6">
+ {/* Header Banner */}
+ <div className="bg-gradient-to-r from-purple-950/60 via-slate-900 to-slate-900 border border-purple-800/40 rounded-2xl p-6 shadow-xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+ <div className="flex items-center gap-4">
+ <div className="w-12 h-12 rounded-2xl bg-purple-600/20 border border-purple-500/40 flex items-center justify-center text-purple-400 shrink-0">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+ </svg>
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-xl font-bold text-slate-100 tracking-tight">Admin Dispatch Dashboard</h2>
+ <span className="px-2.5 py-0.5 text-[10px] font-semibold bg-purple-950 text-purple-300 border border-purple-700/80 rounded-full uppercase tracking-wider">
+ Administrator
+ </span>
+ </div>
+ <p className="text-xs text-slate-400 mt-1">
+ Oversee tickets, assign tasks to IT staff members, respond to comments, and activate new user accounts
+ </p>
+ </div>
+ </div>
+
+ <div className="flex items-center gap-3">
+ <button
+ onClick={() => setShowUserManager(!showUserManager)}
+ className="px-3.5 py-2 bg-purple-950/80 hover:bg-purple-900/60 text-purple-200 border border-purple-700/60 rounded-xl text-xs font-semibold transition-all flex items-center gap-2 relative"
+ >
+ <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 100 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+ </svg>
+ <span>{showUserManager ? 'Hide User Manager' : 'User Accounts & Activation'}</span>
+ {pendingUsersCount > 0 && (
+ <span className="w-2.5 h-2.5 rounded-full bg-amber-400 animate-ping absolute -top-1 -right-1"></span>
+ )}
+ </button>
+
+ <button
+ onClick={fetchData}
+ disabled={loading}
+ className="px-3.5 py-2 bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 rounded-xl text-xs font-medium transition-all flex items-center gap-1.5 active:scale-95"
+ >
+ <svg className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+ </svg>
+ <span>Refresh</span>
+ </button>
+ </div>
+ </div>
+
+ {/* Metrics Summary Cards */}
+ <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
+ <div className="bg-slate-900/90 border border-slate-800 p-4 rounded-xl shadow-lg">
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Total Tickets</p>
+ <p className="text-2xl font-bold text-slate-100 mt-1">{totalCount}</p>
+ </div>
+ <div className="bg-slate-900/90 border border-amber-900/40 p-4 rounded-xl shadow-lg">
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-amber-400">Unassigned</p>
+ <p className="text-2xl font-bold text-amber-300 mt-1">{unassignedCount}</p>
+ </div>
+ <div className="bg-slate-900/90 border border-slate-800 p-4 rounded-xl shadow-lg">
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Pending Tickets</p>
+ <p className="text-2xl font-bold text-amber-200 mt-1">{pendingCount}</p>
+ </div>
+ <div className="bg-slate-900/90 border border-sky-900/40 p-4 rounded-xl shadow-lg">
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-sky-400">In Progress</p>
+ <p className="text-2xl font-bold text-sky-300 mt-1">{inProgressCount}</p>
+ </div>
+ <div className="bg-slate-900/90 border border-emerald-900/40 p-4 rounded-xl shadow-lg col-span-2 sm:col-span-1">
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-emerald-400">Resolved</p>
+ <p className="text-2xl font-bold text-emerald-300 mt-1">{resolvedCount}</p>
+ </div>
+ </div>
+
+ {/* Embedded Modular User Management Panel */}
+ {showUserManager && (
+ <UserManagement
+ currentUserRole="admin"
+ allProfiles={allProfiles}
+ onToggleActivation={handleToggleActivation}
+ onRoleChange={handleRoleChange}
+ onDeleteProfile={handleDeleteProfile}
+ loading={loading}
+ />
+ )}
+
+ {/* Notifications */}
+ {errorMsg && (
+ <div className="p-4 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ )}
+
+ {successMsg && (
+ <div className="p-4 rounded-xl bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+ </svg>
+ <span>{successMsg}</span>
+ </div>
+ )}
+
+ {/* Main Tickets Table Container */}
+ <div className="bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-xl p-4 sm:p-6 space-y-6">
+ {/* Controls and Search */}
+ <div className="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
+ <div className="relative flex-1">
+ <input
+ type="text"
+ placeholder="Search by ticket title, description, category, staff email..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-4 py-2 bg-slate-950/80 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-xs focus:outline-none focus:ring-2 focus:ring-purple-500"
+ />
+ <svg className="w-4 h-4 text-slate-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+ </svg>
+ </div>
+
+ <div className="flex flex-wrap gap-3">
+ <select
+ value={statusFilter}
+ onChange={(e) => setStatusFilter(e.target.value)}
+ className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-xs text-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
+ >
+ <option value="All">All Statuses</option>
+ <option value="Pending">Pending</option>
+ <option value="In Progress">In Progress</option>
+ <option value="Resolved">Resolved</option>
+ </select>
+
+ <select
+ value={assignmentFilter}
+ onChange={(e) => setAssignmentFilter(e.target.value)}
+ className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-xs text-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
+ >
+ <option value="All">All Assignments</option>
+ <option value="Unassigned">⚠️ Unassigned Only</option>
+ {staffList.map((s) => (
+ <option key={s.id} value={s.id}>
+ 👤 {s.email}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+
+ {/* Loading Skeleton */}
+ {loading ? (
+ <div className="space-y-3">
+ {[1, 2, 3].map((i) => (
+ <div key={i} className="p-4 bg-slate-950/60 border border-slate-800/80 rounded-xl animate-pulse space-y-2">
+ <div className="h-4 bg-slate-800 rounded w-1/3"></div>
+ <div className="h-3 bg-slate-800/60 rounded w-2/3"></div>
+ </div>
+ ))}
+ </div>
+ ) : filteredTickets.length === 0 ? (
+ <div className="py-12 text-center border-2 border-dashed border-slate-800 rounded-2xl bg-slate-950/40 p-8">
+ <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-900 border border-slate-800 text-slate-500 mb-3">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+ </svg>
+ </div>
+ <h3 className="text-sm font-semibold text-slate-300">No Tickets Found</h3>
+ <p className="text-xs text-slate-500 mt-1">Try clearing your active filters or search query.</p>
+ </div>
+ ) : (
+ <div className="overflow-x-auto rounded-xl border border-slate-800 bg-slate-950/60">
+ <table className="w-full text-left border-collapse">
+ <thead>
+ <tr className="border-b border-slate-800 bg-slate-950/90 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+ <th className="px-4 py-3.5">Ticket Info</th>
+ <th className="px-4 py-3.5">Category</th>
+ <th className="px-4 py-3.5">Status</th>
+ <th className="px-4 py-3.5">Assigned Staff</th>
+ <th className="px-4 py-3.5 text-right">Actions</th>
+ </tr>
+ </thead>
+ <tbody className="divide-y divide-slate-800/60 text-xs">
+ {filteredTickets.map((t) => {
+ const isExpanded = expandedTicketId === t.id;
+
+ return (
+ <tr key={t.id} className="hover:bg-slate-800/40 transition-colors">
+ <td className="px-4 py-4 max-w-xs sm:max-w-md">
+ <div className="flex items-center gap-2">
+ <p className="font-semibold text-slate-100">{t.title}</p>
+ <button
+ onClick={() => setExpandedTicketId(isExpanded ? null : t.id)}
+ className="text-[10px] text-purple-400 hover:underline"
+ >
+ {isExpanded ? 'Hide Discussion' : '💬 Discussion'}
+ </button>
+ </div>
+ {t.description && (
+ <p className="text-slate-400 text-[11px] line-clamp-2 mt-1">{t.description}</p>
+ )}
+ <p className="text-[10px] text-slate-500 mt-1">
+ Submitted: {new Date(t.created_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+ </p>
+
+ {/* Expandable Comment Section */}
+ {isExpanded && (
+ <div className="mt-3 pt-2">
+ <TicketComments ticketId={t.id} currentUser={user} currentUserRole="admin" />
+ </div>
+ )}
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-slate-300 text-[11px]">
+ {t.category}
+ </span>
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md border text-[11px] font-medium ${getStatusBadge(t.status)}`}>
+ {t.status}
+ </span>
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <div className="flex items-center gap-2">
+ <select
+ value={t.assigned_to || ''}
+ disabled={updatingTicketId === t.id}
+ onChange={(e) => handleAssignChange(t.id, e.target.value)}
+ className={`px-3 py-1.5 rounded-xl text-xs border font-medium transition-all ${
+ !t.assigned_to
+ ? 'bg-amber-950/40 border-amber-800/70 text-amber-300 focus:ring-amber-500'
+ : 'bg-slate-900 border-slate-700 text-slate-200 focus:ring-purple-500'
+ }`}
+ >
+ <option value="">-- Unassigned --</option>
+ {staffList.map((staff) => (
+ <option key={staff.id} value={staff.id}>
+ 🧑💻 {staff.email}
+ </option>
+ ))}
+ </select>
+
+ {updatingTicketId === t.id && (
+ <svg className="animate-spin h-4 w-4 text-purple-400" fill="none" viewBox="0 0 24 24">
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+ </svg>
+ )}
+ </div>
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap text-right">
+ <button
+ onClick={() => handleDeleteTicket(t.id)}
+ className="px-2.5 py-1 bg-slate-950 hover:bg-rose-950/50 text-slate-400 hover:text-rose-300 border border-slate-800 hover:border-rose-800/60 rounded-lg text-xs transition-all"
+ title="Delete Ticket"
+ >
+ Delete
+ </button>
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 | + + + +1x +1x +1x +1x +1x +1x + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react';
+import { supabase } from '../supabaseClient';
+
+export default function Auth() {
+ const [isSignUp, setIsSignUp] = useState(false);
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [successMessage, setSuccessMessage] = useState(null);
+
+ const handleAuth = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ setErrorMessage(null);
+ setSuccessMessage(null);
+
+ const cleanEmail = email.trim().toLowerCase();
+
+ try {
+ if (isSignUp) {
+ // Register account
+ const { error } = await supabase.auth.signUp({
+ email: cleanEmail,
+ password,
+ options: {
+ data: {
+ role: cleanEmail === 'superadmin@admin.com' ? 'super_admin' : 'user',
+ },
+ },
+ });
+
+ if (error) throw error;
+
+ if (cleanEmail === 'superadmin@admin.com') {
+ setSuccessMessage('Super Admin account created successfully! Click "Sign In" to log in.');
+ setIsSignUp(false);
+ } else {
+ setSuccessMessage(
+ 'Account created successfully! Your account is pending activation by an Administrator.'
+ );
+ }
+ } else {
+ // Sign In
+ const { error } = await supabase.auth.signInWithPassword({
+ email: cleanEmail,
+ password,
+ });
+
+ if (error) throw error;
+ }
+ } catch (err) {
+ console.error('Auth error:', err);
+ let msg = err?.message || err?.error_description || 'Authentication failed.';
+
+ // Handle Supabase Rate Limits (429) & common errors gracefully
+ if (err?.status === 429 || msg.includes('429') || msg.toLowerCase().includes('too many requests')) {
+ msg = 'Rate limit exceeded by Supabase auth. Please wait 60 seconds before trying again.';
+ } else if (msg.includes('Invalid login credentials')) {
+ msg = 'Invalid login credentials. If your account does not exist yet, click "Request Account" tab to create it.';
+ }
+
+ setErrorMessage(msg);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <div className="min-h-screen flex items-center justify-center bg-slate-950 px-4 py-12">
+ <div className="w-full max-w-md">
+ {/* Help Desk Branding Header */}
+ <div className="text-center mb-8">
+ <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-blue-900 via-slate-900 to-indigo-900 border border-slate-700/60 shadow-xl shadow-blue-950/40 mb-4">
+ <svg
+ className="w-8 h-8 text-blue-400"
+ width="32"
+ height="32"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={1.8}
+ d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+ />
+ </svg>
+ </div>
+ <h1 className="text-2xl font-bold text-slate-100 tracking-tight">
+ IT Service Help Desk
+ </h1>
+ <p className="text-sm text-slate-400 mt-1">
+ Enterprise Support & Management Portal
+ </p>
+ </div>
+
+ {/* Auth Container Card */}
+ <div className="bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl p-8">
+ {/* Sign In / Register Mode Toggle */}
+ <div className="flex bg-slate-950/80 p-1 rounded-xl border border-slate-800/80 mb-6">
+ <button
+ type="button"
+ onClick={() => {
+ setIsSignUp(false);
+ setErrorMessage(null);
+ setSuccessMessage(null);
+ }}
+ className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all ${
+ !isSignUp
+ ? 'bg-blue-600 text-white shadow-md shadow-blue-900/30'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ >
+ Sign In
+ </button>
+ <button
+ type="button"
+ onClick={() => {
+ setIsSignUp(true);
+ setErrorMessage(null);
+ setSuccessMessage(null);
+ }}
+ className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all ${
+ isSignUp
+ ? 'bg-blue-600 text-white shadow-md shadow-blue-900/30'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ >
+ Request Account
+ </button>
+ </div>
+
+ {/* Alert Messages */}
+ {errorMessage && (
+ <div className="mb-4 p-3 rounded-lg bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 shrink-0 text-rose-400" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMessage}</span>
+ </div>
+ )}
+
+ {successMessage && (
+ <div className="mb-4 p-3.5 rounded-lg bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-xs flex items-start gap-2.5">
+ <svg className="w-4 h-4 shrink-0 text-emerald-400 mt-0.5" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+ </svg>
+ <span className="leading-relaxed">{successMessage}</span>
+ </div>
+ )}
+
+ {/* Form */}
+ <form onSubmit={handleAuth} className="space-y-4">
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
+ Email Address
+ </label>
+ <input
+ type="email"
+ required
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ placeholder="name@company.com"
+ className="w-full px-3.5 py-2.5 bg-slate-950/90 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+ />
+ </div>
+
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
+ Password
+ </label>
+ <input
+ type="password"
+ required
+ minLength={6}
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ placeholder="••••••••"
+ className="w-full px-3.5 py-2.5 bg-slate-950/90 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+ />
+ </div>
+
+ {isSignUp && (
+ <div className="p-3 bg-amber-950/30 border border-amber-800/40 rounded-xl text-amber-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 shrink-0 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+ </svg>
+ <span>New user accounts default to Standard User status and require Admin approval.</span>
+ </div>
+ )}
+
+ <button
+ type="submit"
+ disabled={loading}
+ className="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium text-sm rounded-xl shadow-lg shadow-blue-950/50 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+ >
+ {loading ? (
+ <>
+ <svg className="animate-spin h-4 w-4 text-white" width="16" height="16" fill="none" viewBox="0 0 24 24">
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+ </svg>
+ <span>Processing...</span>
+ </>
+ ) : (
+ <span>{isSignUp ? 'Submit Account Request' : 'Sign In to Portal'}</span>
+ )}
+ </button>
+ </form>
+
+ {/* Footer */}
+ <div className="mt-6 pt-4 border-t border-slate-800/80 text-center">
+ <p className="text-xs text-slate-400">
+ 🔒 Authorized Personnel Only • Secure Portal
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 | + + + +8x +8x +8x +8x +8x +8x + +8x +2x +2x +1x +1x + + +1x +1x +1x + +1x +1x + + + + + + + + + +1x + +1x +1x +1x +1x + +1x +1x + + + + +1x + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react';
+import { supabase } from '../supabaseClient';
+
+export default function NewTicketForm({ user, onTicketCreated }) {
+ const [title, setTitle] = useState('');
+ const [category, setCategory] = useState('Hardware Repair');
+ const [description, setDescription] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [successMsg, setSuccessMsg] = useState(null);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!title.trim() || !description.trim()) {
+ setErrorMsg('Please complete all required fields.');
+ return;
+ }
+
+ setLoading(true);
+ setErrorMsg(null);
+ setSuccessMsg(null);
+
+ try {
+ const { data, error } = await supabase.from('tickets').insert([
+ {
+ title: title.trim(),
+ category,
+ description: description.trim(),
+ user_id: user.id,
+ status: 'Pending',
+ },
+ ]).select();
+
+ Iif (error) throw error;
+
+ setSuccessMsg('Ticket submitted successfully! An IT specialist will review it shortly.');
+ setTitle('');
+ setCategory('Hardware Repair');
+ setDescription('');
+
+ Eif (onTicketCreated) {
+ onTicketCreated(data[0]);
+ }
+ } catch (err) {
+ setErrorMsg(err.message || 'Failed to create ticket.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <div className="bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-xl p-6 transition-all hover:border-slate-700/80">
+ <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-800">
+ <div className="p-2.5 rounded-xl bg-blue-950/60 border border-blue-800/50 text-blue-400">
+ <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+ </svg>
+ </div>
+ <div>
+ <h2 className="text-lg font-semibold text-slate-100">Submit New Support Ticket</h2>
+ <p className="text-xs text-slate-400">Request IT assistance for hardware, software, or network issues</p>
+ </div>
+ </div>
+
+ {errorMsg && (
+ <div className="mb-5 p-3.5 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ )}
+
+ {successMsg && (
+ <div className="mb-5 p-3.5 rounded-xl bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+ </svg>
+ <span>{successMsg}</span>
+ </div>
+ )}
+
+ <form onSubmit={handleSubmit} className="space-y-4">
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
+ Ticket Title <span className="text-rose-400">*</span>
+ </label>
+ <input
+ type="text"
+ required
+ value={title}
+ onChange={(e) => setTitle(e.target.value)}
+ placeholder="Brief summary of the issue (e.g. Laptop monitor flickering)"
+ className="w-full px-3.5 py-2 bg-slate-950/80 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+ />
+ </div>
+
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
+ Issue Category <span className="text-rose-400">*</span>
+ </label>
+ <div className="relative">
+ <select
+ value={category}
+ onChange={(e) => setCategory(e.target.value)}
+ className="w-full px-3.5 py-2 bg-slate-950/80 border border-slate-700/80 rounded-xl text-slate-100 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all appearance-none cursor-pointer"
+ >
+ <option value="Hardware Repair">💻 Hardware Repair</option>
+ <option value="Software Fix">⚙️ Software Fix</option>
+ <option value="Network Issue">🌐 Network Issue</option>
+ <option value="Meeting Setup">🎙️ Meeting Setup</option>
+ </select>
+ <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400">
+ <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+ </svg>
+ </div>
+ </div>
+ </div>
+
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
+ Detailed Description <span className="text-rose-400">*</span>
+ </label>
+ <textarea
+ required
+ rows={4}
+ value={description}
+ onChange={(e) => setDescription(e.target.value)}
+ placeholder="Describe what happened, error codes displayed, steps to reproduce..."
+ className="w-full px-3.5 py-2 bg-slate-950/80 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-y"
+ />
+ </div>
+
+ <button
+ type="submit"
+ disabled={loading}
+ className="w-full py-2.5 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium text-sm rounded-xl shadow-lg shadow-blue-950/40 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+ >
+ {loading ? (
+ <>
+ <svg className="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+ </svg>
+ <span>Submitting Ticket...</span>
+ </>
+ ) : (
+ <span>Submit Ticket</span>
+ )}
+ </button>
+ </form>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState, useCallback } from 'react';
+import { supabase } from '../supabaseClient';
+import TicketComments from './TicketComments';
+
+export default function StaffDashboard({ user }) {
+ const [assignedTickets, setAssignedTickets] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [updatingTicketId, setUpdatingTicketId] = useState(null);
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [successMsg, setSuccessMsg] = useState(null);
+ const [viewMode, setViewMode] = useState('board'); // 'board' or 'list'
+ const [searchQuery, setSearchQuery] = useState('');
+ const [categoryFilter, setCategoryFilter] = useState('All');
+ const [expandedTicketId, setExpandedTicketId] = useState(null);
+
+ // Fetch only tickets assigned to logged-in staff ID
+ const fetchAssignedTickets = useCallback(async () => {
+ if (!user) return;
+ setLoading(true);
+ setErrorMsg(null);
+
+ try {
+ const { data, error } = await supabase
+ .from('tickets')
+ .select('*')
+ .eq('assigned_to', user.id)
+ .order('created_at', { ascending: false });
+
+ if (error) throw error;
+ setAssignedTickets(data || []);
+ } catch (err) {
+ setErrorMsg(err.message || 'Failed to fetch assigned tickets.');
+ } finally {
+ setLoading(false);
+ }
+ }, [user]);
+
+ useEffect(() => {
+ fetchAssignedTickets();
+ }, [fetchAssignedTickets]);
+
+ // Instant status update handler
+ const handleStatusChange = async (ticketId, newStatus) => {
+ setUpdatingTicketId(ticketId);
+ setErrorMsg(null);
+ setSuccessMsg(null);
+
+ try {
+ const { error } = await supabase
+ .from('tickets')
+ .update({ status: newStatus })
+ .eq('id', ticketId);
+
+ if (error) throw error;
+
+ setAssignedTickets((prev) =>
+ prev.map((t) => (t.id === ticketId ? { ...t, status: newStatus } : t))
+ );
+
+ setSuccessMsg(`Ticket status updated to '${newStatus}'`);
+ setTimeout(() => setSuccessMsg(null), 3000);
+ } catch (err) {
+ setErrorMsg(`Failed to update status: ${err.message}`);
+ } finally {
+ setUpdatingTicketId(null);
+ }
+ };
+
+ const getCategoryIcon = (cat) => {
+ switch (cat) {
+ case 'Hardware Repair':
+ return '💻';
+ case 'Software Fix':
+ return '⚙️';
+ case 'Network Issue':
+ return '🌐';
+ case 'Meeting Setup':
+ return '🎙️';
+ default:
+ return '📋';
+ }
+ };
+
+ const getUrgencyBadge = (category) => {
+ if (category === 'Network Issue' || category === 'Hardware Repair') {
+ return { label: 'High Urgency', color: 'bg-rose-950/70 text-rose-300 border-rose-800/80' };
+ }
+ if (category === 'Software Fix') {
+ return { label: 'Medium Urgency', color: 'bg-amber-950/70 text-amber-300 border-amber-800/80' };
+ }
+ return { label: 'Normal Urgency', color: 'bg-blue-950/70 text-blue-300 border-blue-800/80' };
+ };
+
+ const filteredTickets = assignedTickets.filter((t) => {
+ const matchesCategory = categoryFilter === 'All' || t.category === categoryFilter;
+ const query = searchQuery.toLowerCase();
+ const matchesSearch =
+ t.title.toLowerCase().includes(query) ||
+ t.category.toLowerCase().includes(query) ||
+ (t.description && t.description.toLowerCase().includes(query));
+ return matchesCategory && matchesSearch;
+ });
+
+ const pendingTickets = filteredTickets.filter((t) => t.status === 'Pending' || !t.status);
+ const inProgressTickets = filteredTickets.filter((t) => t.status === 'In Progress');
+ const resolvedTickets = filteredTickets.filter((t) => t.status === 'Resolved' || t.status === 'Closed');
+
+ return (
+ <div className="space-y-6">
+ {/* Header Banner */}
+ <div className="bg-gradient-to-r from-sky-950/60 via-slate-900 to-slate-900 border border-sky-800/40 rounded-2xl p-6 shadow-xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+ <div className="flex items-center gap-4">
+ <div className="w-12 h-12 rounded-2xl bg-sky-600/20 border border-sky-500/40 flex items-center justify-center text-sky-400 shrink-0">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+ </svg>
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-xl font-bold text-slate-100 tracking-tight">Staff Resolution Board</h2>
+ <span className="px-2.5 py-0.5 text-[10px] font-semibold bg-sky-950 text-sky-300 border border-sky-700/80 rounded-full uppercase tracking-wider">
+ IT Staff Member
+ </span>
+ </div>
+ <p className="text-xs text-slate-400 mt-1">
+ Manage assigned service tickets, update resolution progress, and respond to user inquiries
+ </p>
+ </div>
+ </div>
+
+ <div className="flex items-center gap-3">
+ <div className="flex bg-slate-950 p-1 rounded-xl border border-slate-800">
+ <button
+ onClick={() => setViewMode('board')}
+ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 ${
+ viewMode === 'board'
+ ? 'bg-sky-600 text-white shadow'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ >
+ <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v12a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
+ </svg>
+ <span>Board View</span>
+ </button>
+ <button
+ onClick={() => setViewMode('list')}
+ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 ${
+ viewMode === 'list'
+ ? 'bg-sky-600 text-white shadow'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ >
+ <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+ </svg>
+ <span>List View</span>
+ </button>
+ </div>
+
+ <button
+ onClick={fetchAssignedTickets}
+ disabled={loading}
+ className="px-3.5 py-2 bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 rounded-xl text-xs font-medium transition-all flex items-center gap-1.5 active:scale-95"
+ >
+ <svg className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+ </svg>
+ <span>Refresh</span>
+ </button>
+ </div>
+ </div>
+
+ {/* Metrics Row */}
+ <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+ <div className="bg-slate-900/90 border border-slate-800 p-4 rounded-xl shadow-lg flex items-center justify-between">
+ <div>
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Assigned To Me</p>
+ <p className="text-2xl font-bold text-slate-100 mt-1">{assignedTickets.length}</p>
+ </div>
+ <div className="p-3 bg-slate-950 border border-slate-800 rounded-xl text-slate-400">📋</div>
+ </div>
+ <div className="bg-slate-900/90 border border-sky-900/40 p-4 rounded-xl shadow-lg flex items-center justify-between">
+ <div>
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-sky-400">In Progress</p>
+ <p className="text-2xl font-bold text-sky-300 mt-1">{inProgressTickets.length}</p>
+ </div>
+ <div className="p-3 bg-sky-950 border border-sky-800/60 rounded-xl text-sky-400">⚡</div>
+ </div>
+ <div className="bg-slate-900/90 border border-emerald-900/40 p-4 rounded-xl shadow-lg flex items-center justify-between">
+ <div>
+ <p className="text-[11px] font-semibold uppercase tracking-wider text-emerald-400">Resolved</p>
+ <p className="text-2xl font-bold text-emerald-300 mt-1">{resolvedTickets.length}</p>
+ </div>
+ <div className="p-3 bg-emerald-950 border border-emerald-800/60 rounded-xl text-emerald-400">✅</div>
+ </div>
+ </div>
+
+ {/* Filter and Search Bar */}
+ <div className="flex flex-col sm:flex-row gap-3 bg-slate-900/80 p-4 border border-slate-800 rounded-2xl">
+ <div className="relative flex-1">
+ <input
+ type="text"
+ placeholder="Filter my tasks by title, category, keywords..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-3.5 py-2 bg-slate-950/90 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-xs focus:outline-none focus:ring-2 focus:ring-sky-500"
+ />
+ <svg className="w-4 h-4 text-slate-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+ </svg>
+ </div>
+
+ <select
+ value={categoryFilter}
+ onChange={(e) => setCategoryFilter(e.target.value)}
+ className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-xs text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-500"
+ >
+ <option value="All">All Categories</option>
+ <option value="Hardware Repair">💻 Hardware Repair</option>
+ <option value="Software Fix">⚙️ Software Fix</option>
+ <option value="Network Issue">🌐 Network Issue</option>
+ <option value="Meeting Setup">🎙️ Meeting Setup</option>
+ </select>
+ </div>
+
+ {/* Notifications */}
+ {errorMsg && (
+ <div className="p-4 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ )}
+
+ {successMsg && (
+ <div className="p-4 rounded-xl bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+ </svg>
+ <span>{successMsg}</span>
+ </div>
+ )}
+
+ {/* Loading Skeletons */}
+ {loading ? (
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+ {[1, 2, 3].map((i) => (
+ <div key={i} className="p-5 bg-slate-900/90 border border-slate-800 rounded-2xl animate-pulse space-y-3">
+ <div className="h-4 bg-slate-800 rounded w-1/2"></div>
+ <div className="h-3 bg-slate-800/60 rounded w-3/4"></div>
+ <div className="h-20 bg-slate-950 rounded-xl"></div>
+ </div>
+ ))}
+ </div>
+ ) : assignedTickets.length === 0 ? (
+ /* Empty State */
+ <div className="py-16 text-center border-2 border-dashed border-slate-800 rounded-2xl bg-slate-950/40 p-8">
+ <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-900 border border-slate-800 text-slate-500 mb-3">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 13l4 4L19 7" />
+ </svg>
+ </div>
+ <h3 className="text-sm font-semibold text-slate-200">No Assigned Tasks</h3>
+ <p className="text-xs text-slate-400 mt-1 max-w-sm mx-auto">
+ You currently have no IT tickets assigned to your account. Ask an Administrator to dispatch tickets to you.
+ </p>
+ </div>
+ ) : viewMode === 'board' ? (
+ /* ==================== KANBAN BOARD VIEW ==================== */
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+ {/* Column 1: Pending */}
+ <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-4 flex flex-col min-h-[400px]">
+ <div className="flex items-center justify-between pb-3 border-b border-slate-800 mb-4">
+ <div className="flex items-center gap-2">
+ <span className="w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse"></span>
+ <h3 className="text-xs font-bold uppercase tracking-wider text-slate-200">Pending</h3>
+ </div>
+ <span className="px-2 py-0.5 text-xs font-semibold bg-amber-950 text-amber-300 border border-amber-800/60 rounded-full">
+ {pendingTickets.length}
+ </span>
+ </div>
+
+ <div className="space-y-4 flex-1">
+ {pendingTickets.length === 0 ? (
+ <p className="text-xs text-slate-500 text-center py-8 border border-dashed border-slate-800 rounded-xl">
+ No pending tasks
+ </p>
+ ) : (
+ pendingTickets.map((t) => (
+ <TaskCard
+ key={t.id}
+ ticket={t}
+ currentUser={user}
+ updatingTicketId={updatingTicketId}
+ onStatusChange={handleStatusChange}
+ getCategoryIcon={getCategoryIcon}
+ getUrgencyBadge={getUrgencyBadge}
+ isExpanded={expandedTicketId === t.id}
+ onToggleExpand={() => setExpandedTicketId(expandedTicketId === t.id ? null : t.id)}
+ />
+ ))
+ )}
+ </div>
+ </div>
+
+ {/* Column 2: In Progress */}
+ <div className="bg-slate-900/90 border border-sky-900/40 rounded-2xl p-4 flex flex-col min-h-[400px]">
+ <div className="flex items-center justify-between pb-3 border-b border-slate-800 mb-4">
+ <div className="flex items-center gap-2">
+ <span className="w-2.5 h-2.5 rounded-full bg-sky-400 animate-pulse"></span>
+ <h3 className="text-xs font-bold uppercase tracking-wider text-sky-200">In Progress</h3>
+ </div>
+ <span className="px-2 py-0.5 text-xs font-semibold bg-sky-950 text-sky-300 border border-sky-800/60 rounded-full">
+ {inProgressTickets.length}
+ </span>
+ </div>
+
+ <div className="space-y-4 flex-1">
+ {inProgressTickets.length === 0 ? (
+ <p className="text-xs text-slate-500 text-center py-8 border border-dashed border-slate-800 rounded-xl">
+ No tasks in progress
+ </p>
+ ) : (
+ inProgressTickets.map((t) => (
+ <TaskCard
+ key={t.id}
+ ticket={t}
+ currentUser={user}
+ updatingTicketId={updatingTicketId}
+ onStatusChange={handleStatusChange}
+ getCategoryIcon={getCategoryIcon}
+ getUrgencyBadge={getUrgencyBadge}
+ isExpanded={expandedTicketId === t.id}
+ onToggleExpand={() => setExpandedTicketId(expandedTicketId === t.id ? null : t.id)}
+ />
+ ))
+ )}
+ </div>
+ </div>
+
+ {/* Column 3: Resolved */}
+ <div className="bg-slate-900/90 border border-emerald-900/40 rounded-2xl p-4 flex flex-col min-h-[400px]">
+ <div className="flex items-center justify-between pb-3 border-b border-slate-800 mb-4">
+ <div className="flex items-center gap-2">
+ <span className="w-2.5 h-2.5 rounded-full bg-emerald-400"></span>
+ <h3 className="text-xs font-bold uppercase tracking-wider text-emerald-200">Resolved</h3>
+ </div>
+ <span className="px-2 py-0.5 text-xs font-semibold bg-emerald-950 text-emerald-300 border border-emerald-800/60 rounded-full">
+ {resolvedTickets.length}
+ </span>
+ </div>
+
+ <div className="space-y-4 flex-1">
+ {resolvedTickets.length === 0 ? (
+ <p className="text-xs text-slate-500 text-center py-8 border border-dashed border-slate-800 rounded-xl">
+ No resolved tasks
+ </p>
+ ) : (
+ resolvedTickets.map((t) => (
+ <TaskCard
+ key={t.id}
+ ticket={t}
+ currentUser={user}
+ updatingTicketId={updatingTicketId}
+ onStatusChange={handleStatusChange}
+ getCategoryIcon={getCategoryIcon}
+ getUrgencyBadge={getUrgencyBadge}
+ isExpanded={expandedTicketId === t.id}
+ onToggleExpand={() => setExpandedTicketId(expandedTicketId === t.id ? null : t.id)}
+ />
+ ))
+ )}
+ </div>
+ </div>
+ </div>
+ ) : (
+ /* ==================== CLEAN LIST VIEW ==================== */
+ <div className="bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-xl p-4 sm:p-6">
+ <div className="overflow-x-auto rounded-xl border border-slate-800 bg-slate-950/60">
+ <table className="w-full text-left border-collapse">
+ <thead>
+ <tr className="border-b border-slate-800 bg-slate-950/90 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+ <th className="px-4 py-3.5">Task & Details</th>
+ <th className="px-4 py-3.5">Category</th>
+ <th className="px-4 py-3.5">Urgency</th>
+ <th className="px-4 py-3.5">Status Update</th>
+ </tr>
+ </thead>
+ <tbody className="divide-y divide-slate-800/60 text-xs">
+ {filteredTickets.map((t) => {
+ const urgency = getUrgencyBadge(t.category);
+ const isExpanded = expandedTicketId === t.id;
+
+ return (
+ <tr key={t.id} className="hover:bg-slate-800/40 transition-colors">
+ <td className="px-4 py-4 max-w-sm">
+ <div className="flex items-center gap-2">
+ <p className="font-semibold text-slate-100">{t.title}</p>
+ <button
+ onClick={() => setExpandedTicketId(isExpanded ? null : t.id)}
+ className="text-[10px] text-sky-400 hover:underline"
+ >
+ {isExpanded ? 'Hide' : 'Comments'}
+ </button>
+ </div>
+ {t.description && (
+ <p className="text-slate-400 text-[11px] line-clamp-2 mt-1">{t.description}</p>
+ )}
+ {isExpanded && (
+ <div className="mt-3">
+ <TicketComments ticketId={t.id} currentUser={user} currentUserRole="staff" />
+ </div>
+ )}
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-slate-300 text-[11px]">
+ <span>{getCategoryIcon(t.category)}</span>
+ <span>{t.category}</span>
+ </span>
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <span className={`inline-flex items-center px-2 py-0.5 rounded-md border text-[10px] font-semibold ${urgency.color}`}>
+ {urgency.label}
+ </span>
+ </td>
+
+ <td className="px-4 py-4 whitespace-nowrap">
+ <div className="flex items-center gap-2">
+ <select
+ value={t.status || 'Pending'}
+ disabled={updatingTicketId === t.id}
+ onChange={(e) => handleStatusChange(t.id, e.target.value)}
+ className="px-3 py-1.5 bg-slate-950 border border-slate-700 rounded-xl text-xs font-semibold text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-500"
+ >
+ <option value="Pending">🟡 Pending</option>
+ <option value="In Progress">🔵 In Progress</option>
+ <option value="Resolved">🟢 Resolved</option>
+ </select>
+ </div>
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
+
+// Kanban Task Card Component with Comment Toggle
+function TaskCard({
+ ticket,
+ currentUser,
+ updatingTicketId,
+ onStatusChange,
+ getCategoryIcon,
+ getUrgencyBadge,
+ isExpanded,
+ onToggleExpand,
+}) {
+ const urgency = getUrgencyBadge(ticket.category);
+
+ return (
+ <div className="bg-slate-950/90 border border-slate-800 hover:border-slate-700/80 rounded-xl p-4 shadow-md transition-all space-y-3 group">
+ {/* Badges */}
+ <div className="flex items-center justify-between gap-2">
+ <span className="inline-flex items-center gap-1 text-[11px] font-medium text-slate-300 bg-slate-900 px-2 py-0.5 rounded-md border border-slate-800">
+ <span>{getCategoryIcon(ticket.category)}</span>
+ <span className="truncate max-w-[120px]">{ticket.category}</span>
+ </span>
+
+ <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-md border ${urgency.color}`}>
+ {urgency.label}
+ </span>
+ </div>
+
+ {/* Content */}
+ <div>
+ <h4 className="text-xs font-bold text-slate-100 group-hover:text-sky-300 transition-colors">
+ {ticket.title}
+ </h4>
+ {ticket.description && (
+ <p className="text-[11px] text-slate-400 mt-1 line-clamp-3 leading-relaxed">
+ {ticket.description}
+ </p>
+ )}
+ </div>
+
+ {/* Controls & Comment Toggle */}
+ <div className="pt-2 border-t border-slate-800/80 flex items-center justify-between gap-2">
+ <button
+ onClick={onToggleExpand}
+ className="text-[10px] text-sky-400 hover:text-sky-300 flex items-center gap-1 font-medium"
+ >
+ <span>💬 {isExpanded ? 'Hide Comments' : 'Discussion'}</span>
+ </button>
+
+ <select
+ value={ticket.status || 'Pending'}
+ disabled={updatingTicketId === ticket.id}
+ onChange={(e) => onStatusChange(ticket.id, e.target.value)}
+ className="px-2.5 py-1 bg-slate-900 border border-slate-700 hover:border-slate-600 rounded-lg text-[11px] font-semibold text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-500 cursor-pointer"
+ >
+ <option value="Pending">Pending</option>
+ <option value="In Progress">In Progress</option>
+ <option value="Resolved">Resolved</option>
+ </select>
+ </div>
+
+ {/* Expandable Comment Panel */}
+ {isExpanded && (
+ <div className="pt-2">
+ <TicketComments ticketId={ticket.id} currentUser={currentUser} currentUserRole="staff" />
+ </div>
+ )}
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect, useCallback } from 'react';
+import { supabase } from '../supabaseClient';
+import UserManagement from './UserManagement';
+
+/**
+ * SuperAdminDashboard Component
+ * Adheres to SOLID principles:
+ * - Single Responsibility: Handles Super Admin credentials management, full user lifecycle management, and administrative system metrics.
+ */
+export default function SuperAdminDashboard({ user }) {
+ const [allProfiles, setAllProfiles] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [successMsg, setSuccessMsg] = useState(null);
+
+ // Password change state
+ const [newPassword, setNewPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [changingPassword, setChangingPassword] = useState(false);
+ const [pwdError, setPwdError] = useState(null);
+ const [pwdSuccess, setPwdSuccess] = useState(null);
+ const [showPasswordModal, setShowPasswordModal] = useState(false);
+
+ // Fetch all user profiles
+ const fetchProfiles = useCallback(async () => {
+ setLoading(true);
+ setErrorMsg(null);
+ try {
+ const { data, error } = await supabase
+ .from('profiles')
+ .select('*')
+ .order('created_at', { ascending: false });
+
+ if (error) throw error;
+ setAllProfiles(data || []);
+ } catch (err) {
+ setErrorMsg(err.message || 'Failed to fetch user profiles.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchProfiles();
+ }, [fetchProfiles]);
+
+ // Handle account activation toggle
+ const handleToggleActivation = async (profileId, newActiveStatus) => {
+ setErrorMsg(null);
+ setSuccessMsg(null);
+ try {
+ const { error } = await supabase
+ .from('profiles')
+ .update({ is_active: newActiveStatus })
+ .eq('id', profileId);
+
+ if (error) throw error;
+
+ setSuccessMsg(
+ `User account ${newActiveStatus ? 'activated successfully' : 'deactivated'}.`
+ );
+ fetchProfiles();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to update activation status: ${err.message}`);
+ }
+ };
+
+ // Handle role modification (Super Admin privilege)
+ const handleRoleChange = async (profileId, newRole) => {
+ setErrorMsg(null);
+ setSuccessMsg(null);
+ try {
+ const { error } = await supabase
+ .from('profiles')
+ .update({ role: newRole })
+ .eq('id', profileId);
+
+ if (error) throw error;
+
+ setSuccessMsg(`User role successfully updated to '${newRole}'.`);
+ fetchProfiles();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to change user role: ${err.message}`);
+ }
+ };
+
+ // Handle user deletion (Super Admin & Admin privilege)
+ const handleDeleteProfile = async (profileId) => {
+ setErrorMsg(null);
+ setSuccessMsg(null);
+ try {
+ // Delete profile from profiles table (ON DELETE CASCADE removes linked auth if configured)
+ const { error } = await supabase.from('profiles').delete().eq('id', profileId);
+ if (error) throw error;
+
+ setSuccessMsg('User profile removed successfully.');
+ fetchProfiles();
+ setTimeout(() => setSuccessMsg(null), 4000);
+ } catch (err) {
+ setErrorMsg(`Failed to remove user profile: ${err.message}`);
+ }
+ };
+
+ // Handle Super Admin Password Change
+ const handleChangePasswordSubmit = async (e) => {
+ e.preventDefault();
+ setPwdError(null);
+ setPwdSuccess(null);
+
+ if (newPassword !== confirmPassword) {
+ setPwdError('Passwords do not match.');
+ return;
+ }
+
+ if (newPassword.length < 6) {
+ setPwdError('Password must be at least 6 characters long.');
+ return;
+ }
+
+ setChangingPassword(true);
+ try {
+ const { error } = await supabase.auth.updateUser({
+ password: newPassword,
+ });
+
+ if (error) throw error;
+
+ setPwdSuccess('Super Admin password updated successfully!');
+ setNewPassword('');
+ setConfirmPassword('');
+ setTimeout(() => {
+ setShowPasswordModal(false);
+ setPwdSuccess(null);
+ }, 3000);
+ } catch (err) {
+ setPwdError(err.message || 'Failed to update password.');
+ } finally {
+ setChangingPassword(false);
+ }
+ };
+
+ return (
+ <div className="space-y-6">
+ {/* Super Admin Banner */}
+ <div className="bg-gradient-to-r from-rose-950/70 via-slate-900 to-purple-950/70 border border-rose-800/50 rounded-2xl p-6 shadow-xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+ <div className="flex items-center gap-4">
+ <div className="w-12 h-12 rounded-2xl bg-rose-600/20 border border-rose-500/40 flex items-center justify-center text-rose-400 shrink-0">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+ </svg>
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-xl font-bold text-slate-100 tracking-tight">Super Admin Command Center</h2>
+ <span className="px-2.5 py-0.5 text-[10px] font-bold bg-rose-950 text-rose-300 border border-rose-700/80 rounded-full uppercase tracking-wider">
+ Root Super Admin
+ </span>
+ </div>
+ <p className="text-xs text-slate-400 mt-1">
+ Full authority: Manage system users, assign staff/admin roles, activate accounts, and update system credentials
+ </p>
+ </div>
+ </div>
+
+ <div className="flex items-center gap-3">
+ <button
+ onClick={() => setShowPasswordModal(true)}
+ className="px-3.5 py-2 bg-rose-950/80 hover:bg-rose-900/80 text-rose-200 border border-rose-700/80 rounded-xl text-xs font-semibold transition-all flex items-center gap-2 active:scale-95 shadow-md shadow-rose-950/40"
+ >
+ <svg className="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+ </svg>
+ <span>Change Password</span>
+ </button>
+
+ <button
+ onClick={fetchProfiles}
+ disabled={loading}
+ className="px-3.5 py-2 bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 rounded-xl text-xs font-medium transition-all flex items-center gap-1.5 active:scale-95"
+ >
+ <svg className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+ </svg>
+ <span>Refresh</span>
+ </button>
+ </div>
+ </div>
+
+ {/* Global Notifications */}
+ {errorMsg && (
+ <div className="p-4 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ )}
+
+ {successMsg && (
+ <div className="p-4 rounded-xl bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+ </svg>
+ <span>{successMsg}</span>
+ </div>
+ )}
+
+ {/* Password Change Modal */}
+ {showPasswordModal && (
+ <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4">
+ <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 max-w-md w-full shadow-2xl space-y-4">
+ <div className="flex items-center justify-between border-b border-slate-800 pb-3">
+ <h3 className="text-base font-bold text-slate-100 flex items-center gap-2">
+ <span>🔐 Change Super Admin Password</span>
+ </h3>
+ <button
+ onClick={() => setShowPasswordModal(false)}
+ className="text-slate-400 hover:text-slate-200 text-xs"
+ >
+ ✕ Close
+ </button>
+ </div>
+
+ {pwdError && (
+ <div className="p-3 bg-rose-950/60 border border-rose-800 text-rose-300 text-xs rounded-lg">
+ {pwdError}
+ </div>
+ )}
+
+ {pwdSuccess && (
+ <div className="p-3 bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-xs rounded-lg">
+ {pwdSuccess}
+ </div>
+ )}
+
+ <form onSubmit={handleChangePasswordSubmit} className="space-y-4">
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1">
+ New Password
+ </label>
+ <input
+ type="password"
+ required
+ minLength={6}
+ value={newPassword}
+ onChange={(e) => setNewPassword(e.target.value)}
+ placeholder="Enter new strong password"
+ className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-slate-100 text-xs focus:outline-none focus:ring-2 focus:ring-rose-500"
+ />
+ </div>
+
+ <div>
+ <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1">
+ Confirm New Password
+ </label>
+ <input
+ type="password"
+ required
+ minLength={6}
+ value={confirmPassword}
+ onChange={(e) => setConfirmPassword(e.target.value)}
+ placeholder="Confirm new password"
+ className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-slate-100 text-xs focus:outline-none focus:ring-2 focus:ring-rose-500"
+ />
+ </div>
+
+ <div className="flex gap-2 justify-end pt-2">
+ <button
+ type="button"
+ onClick={() => setShowPasswordModal(false)}
+ className="px-3.5 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs text-slate-400 hover:text-slate-200"
+ >
+ Cancel
+ </button>
+ <button
+ type="submit"
+ disabled={changingPassword}
+ className="px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white font-medium text-xs rounded-xl shadow-md transition-all disabled:opacity-50"
+ >
+ {changingPassword ? 'Updating...' : 'Update Password'}
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ )}
+
+ {/* Embedded Modular User Management Section */}
+ <UserManagement
+ currentUserRole="super_admin"
+ allProfiles={allProfiles}
+ onToggleActivation={handleToggleActivation}
+ onRoleChange={handleRoleChange}
+ onDeleteProfile={handleDeleteProfile}
+ loading={loading}
+ />
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState, useCallback } from 'react';
+import { supabase } from '../supabaseClient';
+
+/**
+ * TicketComments Component
+ * Handles chronological comment feed and posting new comments for a specific ticket.
+ * Visually distinguishes user comments vs staff/admin responses.
+ */
+export default function TicketComments({ ticketId, currentUser, currentUserRole }) {
+ const [comments, setComments] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [commentText, setCommentText] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+ const [errorMsg, setErrorMsg] = useState(null);
+
+ // Fetch comments for ticketId with user profile email & role
+ const fetchComments = useCallback(async () => {
+ if (!ticketId) return;
+ setLoading(true);
+ setErrorMsg(null);
+
+ try {
+ // Fetch comments along with profiles author details
+ const { data, error } = await supabase
+ .from('comments')
+ .select(`
+ id,
+ created_at,
+ content,
+ user_id,
+ profiles (
+ email,
+ role
+ )
+ `)
+ .eq('ticket_id', ticketId)
+ .order('created_at', { ascending: true });
+
+ if (error) throw error;
+ setComments(data || []);
+ } catch (err) {
+ console.error('Error loading ticket comments:', err);
+ setErrorMsg(err.message || 'Failed to load comments.');
+ } finally {
+ setLoading(false);
+ }
+ }, [ticketId]);
+
+ useEffect(() => {
+ fetchComments();
+ }, [fetchComments]);
+
+ // Submit new comment
+ const handleSubmitComment = async (e) => {
+ e.preventDefault();
+ if (!commentText.trim()) return;
+
+ setSubmitting(true);
+ setErrorMsg(null);
+
+ try {
+ const { error } = await supabase.from('comments').insert({
+ ticket_id: ticketId,
+ user_id: currentUser.id,
+ content: commentText.trim(),
+ });
+
+ if (error) throw error;
+
+ setCommentText('');
+ await fetchComments();
+ } catch (err) {
+ console.error('Error submitting comment:', err);
+ setErrorMsg(err.message || 'Failed to post comment.');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const getRoleBadge = (role) => {
+ switch (role) {
+ case 'super_admin':
+ return { label: 'Super Admin', style: 'bg-rose-950 text-rose-300 border-rose-800' };
+ case 'admin':
+ return { label: 'Admin', style: 'bg-purple-950 text-purple-300 border-purple-800' };
+ case 'staff':
+ return { label: 'IT Staff', style: 'bg-sky-950 text-sky-300 border-sky-800' };
+ default:
+ return { label: 'User', style: 'bg-blue-950 text-blue-300 border-blue-800' };
+ }
+ };
+
+ return (
+ <div className="mt-4 pt-4 border-t border-slate-800 space-y-4">
+ {/* Comments Header */}
+ <div className="flex items-center justify-between">
+ <h4 className="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
+ <svg className="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+ </svg>
+ <span>Ticket Discussion & Updates</span>
+ <span className="px-2 py-0.5 text-[10px] bg-slate-800 text-slate-400 rounded-full font-normal">
+ {comments.length}
+ </span>
+ </h4>
+
+ <button
+ onClick={fetchComments}
+ disabled={loading}
+ className="text-[11px] text-slate-400 hover:text-slate-200 transition-colors flex items-center gap-1"
+ >
+ <svg className={`w-3 h-3 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+ </svg>
+ <span>Refresh</span>
+ </button>
+ </div>
+
+ {/* Error Alert */}
+ {errorMsg && (
+ <div className="p-3 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ )}
+
+ {/* Comments List */}
+ <div className="space-y-3 max-h-80 overflow-y-auto pr-1">
+ {loading ? (
+ /* Skeleton Loader */
+ <div className="space-y-2 py-2">
+ {[1, 2].map((i) => (
+ <div key={i} className="p-3 bg-slate-950/60 border border-slate-800 rounded-xl animate-pulse space-y-2">
+ <div className="h-3 bg-slate-800 rounded w-1/3"></div>
+ <div className="h-3 bg-slate-800/60 rounded w-2/3"></div>
+ </div>
+ ))}
+ </div>
+ ) : comments.length === 0 ? (
+ /* Empty State */
+ <div className="py-6 text-center border border-dashed border-slate-800/80 rounded-xl bg-slate-950/40 p-4">
+ <p className="text-xs text-slate-400">No comments posted yet. Start the conversation below.</p>
+ </div>
+ ) : (
+ comments.map((c) => {
+ const isOwnComment = c.user_id === currentUser?.id;
+ const authorRole = c.profiles?.role || 'user';
+ const isStaffOrAdmin = authorRole === 'staff' || authorRole === 'admin' || authorRole === 'super_admin';
+ const badge = getRoleBadge(authorRole);
+
+ return (
+ <div
+ key={c.id}
+ className={`p-3.5 rounded-xl border text-xs space-y-1.5 transition-all ${
+ isStaffOrAdmin
+ ? 'bg-slate-900/90 border-slate-700/80 shadow-sm'
+ : isOwnComment
+ ? 'bg-blue-950/40 border-blue-800/60'
+ : 'bg-slate-950 border-slate-800'
+ }`}
+ >
+ {/* Author Info Header */}
+ <div className="flex items-center justify-between gap-2">
+ <div className="flex items-center gap-2 min-w-0">
+ <span className="font-semibold text-slate-200 truncate">
+ {c.profiles?.email || 'Unknown User'}
+ </span>
+ <span
+ className={`px-1.5 py-0.5 text-[9px] font-bold rounded border uppercase tracking-wider ${badge.style}`}
+ >
+ {badge.label}
+ </span>
+ {isOwnComment && (
+ <span className="text-[10px] text-blue-400 font-medium">(You)</span>
+ )}
+ </div>
+
+ <span className="text-[10px] text-slate-500 whitespace-nowrap">
+ {new Date(c.created_at).toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+ </span>
+ </div>
+
+ {/* Comment Content */}
+ <p className="text-slate-300 leading-relaxed whitespace-pre-wrap text-xs">
+ {c.content}
+ </p>
+ </div>
+ );
+ })
+ )}
+ </div>
+
+ {/* Post New Comment Form */}
+ <form onSubmit={handleSubmitComment} className="space-y-2 pt-2">
+ <div className="relative">
+ <textarea
+ rows={2}
+ value={commentText}
+ onChange={(e) => setCommentText(e.target.value)}
+ placeholder="Type a response or status update..."
+ className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-slate-100 placeholder-slate-500 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none"
+ />
+ </div>
+
+ <div className="flex items-center justify-between gap-2">
+ <span className="text-[10px] text-slate-500">
+ {commentText.length} characters
+ </span>
+
+ <button
+ type="submit"
+ disabled={submitting || !commentText.trim()}
+ className="px-3.5 py-1.5 bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs rounded-xl shadow-md shadow-blue-950/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 active:scale-95"
+ >
+ {submitting ? (
+ <>
+ <svg className="animate-spin h-3 w-3 text-white" fill="none" viewBox="0 0 24 24">
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+ </svg>
+ <span>Posting...</span>
+ </>
+ ) : (
+ <>
+ <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+ </svg>
+ <span>Post Comment</span>
+ </>
+ )}
+ </button>
+ </div>
+ </form>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState, useCallback } from 'react';
+import { supabase } from '../supabaseClient';
+import TicketComments from './TicketComments';
+
+export default function TicketList({ user, refreshTrigger }) {
+ const [tickets, setTickets] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [statusFilter, setStatusFilter] = useState('All');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [expandedTicketId, setExpandedTicketId] = useState(null);
+
+ const fetchTickets = useCallback(async () => {
+ if (!user) return;
+ setLoading(true);
+ setErrorMsg(null);
+
+ try {
+ const { data, error } = await supabase
+ .from('tickets')
+ .select('*')
+ .eq('user_id', user.id)
+ .order('created_at', { ascending: false });
+
+ if (error) throw error;
+ setTickets(data || []);
+ } catch (err) {
+ setErrorMsg(err.message || 'Failed to load tickets.');
+ } finally {
+ setLoading(false);
+ }
+ }, [user]);
+
+ useEffect(() => {
+ fetchTickets();
+ }, [fetchTickets, refreshTrigger]);
+
+ const filteredTickets = tickets.filter((t) => {
+ const matchesFilter = statusFilter === 'All' || t.status === statusFilter;
+ const matchesSearch =
+ t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ t.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ (t.description && t.description.toLowerCase().includes(searchQuery.toLowerCase()));
+ return matchesFilter && matchesSearch;
+ });
+
+ const getStatusBadge = (status) => {
+ switch (status) {
+ case 'Pending':
+ return 'bg-amber-950/60 text-amber-300 border-amber-800/80';
+ case 'In Progress':
+ return 'bg-sky-950/60 text-sky-300 border-sky-800/80';
+ case 'Resolved':
+ return 'bg-emerald-950/60 text-emerald-300 border-emerald-800/80';
+ case 'Closed':
+ return 'bg-slate-800 text-slate-400 border-slate-700';
+ default:
+ return 'bg-slate-800 text-slate-300 border-slate-700';
+ }
+ };
+
+ const getCategoryIcon = (category) => {
+ switch (category) {
+ case 'Hardware Repair':
+ return '💻';
+ case 'Software Fix':
+ return '⚙️';
+ case 'Network Issue':
+ return '🌐';
+ case 'Meeting Setup':
+ return '🎙️';
+ default:
+ return '📋';
+ }
+ };
+
+ return (
+ <div className="bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-xl p-4 sm:p-6 transition-all hover:border-slate-700/80">
+ {/* Header & Controls */}
+ <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-4 border-b border-slate-800">
+ <div>
+ <h2 className="text-base sm:text-lg font-bold text-slate-100 flex items-center gap-2">
+ <span>My Support Tickets</span>
+ <span className="px-2.5 py-0.5 text-xs font-semibold bg-blue-950 text-blue-300 border border-blue-800 rounded-full">
+ {tickets.length} Total
+ </span>
+ </h2>
+ <p className="text-xs text-slate-400 mt-0.5">Track, view updates, and add comments to your submitted tickets</p>
+ </div>
+
+ <button
+ onClick={fetchTickets}
+ disabled={loading}
+ className="self-start sm:self-auto px-3 py-1.5 bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 rounded-xl text-xs font-medium transition-all flex items-center gap-1.5 active:scale-95 shrink-0"
+ >
+ <svg className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+ </svg>
+ <span>Refresh</span>
+ </button>
+ </div>
+
+ {/* Filter and Search Bar */}
+ <div className="flex flex-col md:flex-row gap-3 mb-6">
+ <div className="relative flex-1">
+ <input
+ type="text"
+ placeholder="Search tickets by title, category..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-3.5 py-2 bg-slate-950/80 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+ />
+ <svg className="w-4 h-4 text-slate-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+ </svg>
+ </div>
+
+ {/* Filter Tabs */}
+ <div className="flex gap-1 bg-slate-950 p-1 rounded-xl border border-slate-800/80 shrink-0 overflow-x-auto">
+ {['All', 'Pending', 'In Progress', 'Resolved'].map((st) => (
+ <button
+ key={st}
+ onClick={() => setStatusFilter(st)}
+ className={`px-3 py-1 text-xs font-medium rounded-lg transition-all whitespace-nowrap ${
+ statusFilter === st
+ ? 'bg-blue-600 text-white shadow-sm'
+ : 'text-slate-400 hover:text-slate-200'
+ }`}
+ >
+ {st}
+ </button>
+ ))}
+ </div>
+ </div>
+
+ {/* Error Alert */}
+ {errorMsg && (
+ <div className="mb-6 p-4 rounded-xl bg-rose-950/60 border border-rose-800/60 text-rose-300 text-xs flex items-center justify-between">
+ <div className="flex items-center gap-2">
+ <svg className="w-4 h-4 text-rose-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+ <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+ </svg>
+ <span>{errorMsg}</span>
+ </div>
+ <button onClick={fetchTickets} className="underline text-rose-200 hover:text-white">Retry</button>
+ </div>
+ )}
+
+ {/* Loading Skeletons */}
+ {loading ? (
+ <div className="space-y-3">
+ {[1, 2, 3].map((i) => (
+ <div key={i} className="p-4 bg-slate-950/60 border border-slate-800/80 rounded-xl animate-pulse space-y-2">
+ <div className="h-4 bg-slate-800 rounded w-1/3"></div>
+ <div className="h-3 bg-slate-800/60 rounded w-2/3"></div>
+ </div>
+ ))}
+ </div>
+ ) : filteredTickets.length === 0 ? (
+ /* Empty State */
+ <div className="py-12 text-center border-2 border-dashed border-slate-800/80 rounded-2xl bg-slate-950/40 p-8">
+ <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-900 border border-slate-800 text-slate-500 mb-3">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+ </svg>
+ </div>
+ <h3 className="text-sm font-semibold text-slate-200">No Tickets Found</h3>
+ <p className="text-xs text-slate-400 mt-1 max-w-sm mx-auto">
+ {searchQuery || statusFilter !== 'All'
+ ? 'No tickets match your active filter or search query.'
+ : 'You have not submitted any IT support tickets yet. Use the form above to submit your first ticket.'}
+ </p>
+ </div>
+ ) : (
+ /* Ticket List Container */
+ <div className="space-y-3">
+ {filteredTickets.map((t) => {
+ const isExpanded = expandedTicketId === t.id;
+
+ return (
+ <div
+ key={t.id}
+ className="bg-slate-950/80 border border-slate-800 rounded-xl overflow-hidden transition-all hover:border-slate-700/80"
+ >
+ {/* Ticket Header Row */}
+ <div
+ onClick={() => setExpandedTicketId(isExpanded ? null : t.id)}
+ className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 cursor-pointer hover:bg-slate-900/50 transition-colors"
+ >
+ <div className="min-w-0 flex-1 space-y-1">
+ <div className="flex items-center gap-2 flex-wrap">
+ <span className="text-base">{getCategoryIcon(t.category)}</span>
+ <h3 className="font-semibold text-slate-100 text-sm hover:text-blue-400 transition-colors">
+ {t.title}
+ </h3>
+ <span className={`px-2 py-0.5 rounded-md border text-[10px] font-semibold ${getStatusBadge(t.status)}`}>
+ {t.status}
+ </span>
+ </div>
+
+ {t.description && (
+ <p className="text-slate-400 text-xs line-clamp-1">
+ {t.description}
+ </p>
+ )}
+ </div>
+
+ <div className="flex items-center justify-between sm:justify-end w-full sm:w-auto gap-3 pt-2 sm:pt-0 border-t sm:border-t-0 border-slate-800/60 text-[11px] text-slate-500">
+ <span>
+ {new Date(t.created_at).toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+ </span>
+
+ <button
+ type="button"
+ className="px-2.5 py-1 bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-700/80 rounded-lg text-xs font-medium transition-all flex items-center gap-1"
+ >
+ <span>{isExpanded ? 'Hide Comments' : 'Comments & Details'}</span>
+ <svg
+ className={`w-3.5 h-3.5 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+ </svg>
+ </button>
+ </div>
+ </div>
+
+ {/* Expanded Details & Comments Panel */}
+ {isExpanded && (
+ <div className="p-4 bg-slate-900/60 border-t border-slate-800/80 space-y-4">
+ {t.description && (
+ <div>
+ <h4 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">
+ Ticket Description
+ </h4>
+ <p className="text-xs text-slate-200 bg-slate-950 p-3 rounded-xl border border-slate-800/80 whitespace-pre-wrap">
+ {t.description}
+ </p>
+ </div>
+ )}
+
+ {/* Integrated Comment System */}
+ <TicketComments
+ ticketId={t.id}
+ currentUser={user}
+ currentUserRole="user"
+ />
+ </div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ )}
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | + + + + +2x + +2x + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react';
+import NewTicketForm from './NewTicketForm';
+import TicketList from './TicketList';
+
+export default function UserDashboard({ user }) {
+ const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+ const handleTicketCreated = () => {
+ setRefreshTrigger((prev) => prev + 1);
+ };
+
+ return (
+ <div className="space-y-6">
+ {/* Overview Header Banner */}
+ <div className="bg-gradient-to-r from-slate-900 via-blue-950/40 to-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+ <div className="flex items-center gap-4">
+ <div className="w-12 h-12 rounded-2xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shrink-0">
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+ </svg>
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-xl font-bold text-slate-100 tracking-tight">User Portal Dashboard</h2>
+ <span className="px-2.5 py-0.5 text-[10px] font-semibold bg-blue-950 text-blue-400 border border-blue-800/80 rounded-full uppercase tracking-wider">
+ Requester View
+ </span>
+ </div>
+ <p className="text-xs text-slate-400 mt-1">
+ Submit new IT service requests and track your ticket status in real-time
+ </p>
+ </div>
+ </div>
+ </div>
+
+ {/* Main Grid */}
+ <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+ {/* New Ticket Form (5 cols on desktop) */}
+ <div className="lg:col-span-5">
+ <NewTicketForm user={user} onTicketCreated={handleTicketCreated} />
+ </div>
+
+ {/* Ticket List (7 cols on desktop) */}
+ <div className="lg:col-span-7">
+ <TicketList user={user} refreshTrigger={refreshTrigger} />
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react';
+
+/**
+ * UserManagement Component
+ * Adheres to SOLID principles:
+ * - Single Responsibility: Handles user listing, activation state toggling, role assignment, and user deletion.
+ * - Open/Closed: Extensible filter and action hooks without mutating component logic.
+ */
+export default function UserManagement({
+ currentUserRole = 'admin',
+ allProfiles = [],
+ onToggleActivation,
+ onRoleChange,
+ onDeleteProfile,
+ loading = false,
+}) {
+ const [filterRole, setFilterRole] = useState('All');
+ const [filterStatus, setFilterStatus] = useState('All');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [actionLoadingId, setActionLoadingId] = useState(null);
+
+ const isSuperAdmin = currentUserRole === 'super_admin';
+
+ // Filter profiles based on state
+ const filteredProfiles = allProfiles.filter((prof) => {
+ const matchesRole = filterRole === 'All' || prof.role === filterRole;
+ const matchesStatus =
+ filterStatus === 'All'
+ ? true
+ : filterStatus === 'Pending'
+ ? !prof.is_active
+ : prof.is_active;
+
+ const query = searchQuery.toLowerCase();
+ const matchesSearch =
+ prof.email.toLowerCase().includes(query) ||
+ (prof.role && prof.role.toLowerCase().includes(query));
+
+ return matchesRole && matchesStatus && matchesSearch;
+ });
+
+ const pendingCount = allProfiles.filter((p) => !p.is_active).length;
+ const activeCount = allProfiles.filter((p) => p.is_active).length;
+
+ const handleActivateToggle = async (profile) => {
+ setActionLoadingId(profile.id);
+ try {
+ await onToggleActivation(profile.id, !profile.is_active);
+ } finally {
+ setActionLoadingId(null);
+ }
+ };
+
+ const handleRoleSelect = async (profileId, newRole) => {
+ setActionLoadingId(profileId);
+ try {
+ await onRoleChange(profileId, newRole);
+ } finally {
+ setActionLoadingId(null);
+ }
+ };
+
+ const handleDelete = async (profile) => {
+ if (!window.confirm(`Are you sure you want to remove user "${profile.email}" permanently?`)) {
+ return;
+ }
+ setActionLoadingId(profile.id);
+ try {
+ await onDeleteProfile(profile.id);
+ } finally {
+ setActionLoadingId(null);
+ }
+ };
+
+ const getRoleBadge = (role) => {
+ switch (role) {
+ case 'super_admin':
+ return 'bg-rose-950/80 text-rose-300 border-rose-700/80';
+ case 'admin':
+ return 'bg-purple-950/80 text-purple-300 border-purple-700/80';
+ case 'staff':
+ return 'bg-sky-950/80 text-sky-300 border-sky-700/80';
+ default:
+ return 'bg-blue-950/80 text-blue-300 border-blue-700/80';
+ }
+ };
+
+ return (
+ <div className="bg-slate-900/95 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-6">
+ {/* Section Header */}
+ <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-slate-800 pb-4">
+ <div>
+ <div className="flex items-center gap-2">
+ <h3 className="text-lg font-bold text-slate-100 tracking-tight">
+ User Management & Access Control
+ </h3>
+ {pendingCount > 0 && (
+ <span className="px-2.5 py-0.5 text-xs font-semibold bg-amber-950 text-amber-300 border border-amber-800 rounded-full animate-pulse">
+ {pendingCount} Pending Activation
+ </span>
+ )}
+ </div>
+ <p className="text-xs text-slate-400 mt-1">
+ {isSuperAdmin
+ ? 'Super Admin Privileges: Activate pending users, re-assign roles, and delete user accounts.'
+ : 'Admin Privileges: Activate pending user accounts and remove unauthorized users.'}
+ </p>
+ </div>
+
+ <div className="flex items-center gap-2">
+ <span className="text-xs px-3 py-1 bg-slate-950 border border-slate-800 rounded-xl text-slate-400">
+ Total Users: <strong className="text-slate-200">{allProfiles.length}</strong> ({activeCount} Active, {pendingCount} Inactive)
+ </span>
+ </div>
+ </div>
+
+ {/* Filter and Search Bar */}
+ <div className="flex flex-col md:flex-row gap-3 justify-between items-stretch md:items-center">
+ <div className="relative flex-1">
+ <input
+ type="text"
+ placeholder="Search users by email or role..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-4 py-2 bg-slate-950 border border-slate-700/80 rounded-xl text-slate-100 placeholder-slate-500 text-xs focus:outline-none focus:ring-2 focus:ring-purple-500"
+ />
+ <svg className="w-4 h-4 text-slate-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+ </svg>
+ </div>
+
+ <div className="flex flex-wrap gap-2">
+ {/* Status Filter */}
+ <select
+ value={filterStatus}
+ onChange={(e) => setFilterStatus(e.target.value)}
+ className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-xs text-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
+ >
+ <option value="All">All Statuses</option>
+ <option value="Pending">⚠️ Pending Activation ({pendingCount})</option>
+ <option value="Active">✅ Active Users ({activeCount})</option>
+ </select>
+
+ {/* Role Filter */}
+ <select
+ value={filterRole}
+ onChange={(e) => setFilterRole(e.target.value)}
+ className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-xl text-xs text-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
+ >
+ <option value="All">All Roles</option>
+ <option value="user">User</option>
+ <option value="staff">Staff</option>
+ <option value="admin">Admin</option>
+ <option value="super_admin">Super Admin</option>
+ </select>
+ </div>
+ </div>
+
+ {/* User Table */}
+ {loading ? (
+ <div className="py-8 text-center text-xs text-slate-400">Loading user profiles...</div>
+ ) : filteredProfiles.length === 0 ? (
+ <div className="py-8 text-center border border-dashed border-slate-800 rounded-xl text-xs text-slate-400">
+ No user profiles match your filters.
+ </div>
+ ) : (
+ <div className="overflow-x-auto rounded-xl border border-slate-800 bg-slate-950/70">
+ <table className="w-full text-left border-collapse">
+ <thead>
+ <tr className="border-b border-slate-800 bg-slate-950/90 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+ <th className="px-4 py-3">User Email</th>
+ <th className="px-4 py-3">Role</th>
+ <th className="px-4 py-3">Account Status</th>
+ <th className="px-4 py-3 text-right">Actions</th>
+ </tr>
+ </thead>
+ <tbody className="divide-y divide-slate-800/60 text-xs">
+ {filteredProfiles.map((prof) => {
+ const isLoadingThis = actionLoadingId === prof.id;
+
+ return (
+ <tr key={prof.id} className="hover:bg-slate-900/50 transition-colors">
+ {/* User Email */}
+ <td className="px-4 py-3 font-medium text-slate-200">
+ {prof.email}
+ {prof.email === 'superadmin@admin.com' && (
+ <span className="ml-2 text-[10px] bg-rose-950 text-rose-300 px-2 py-0.5 rounded border border-rose-800">
+ Seeded Super Admin
+ </span>
+ )}
+ </td>
+
+ {/* Role Dropdown / Badge */}
+ <td className="px-4 py-3 whitespace-nowrap">
+ {isSuperAdmin && prof.email !== 'superadmin@admin.com' ? (
+ <select
+ value={prof.role}
+ disabled={isLoadingThis}
+ onChange={(e) => handleRoleSelect(prof.id, e.target.value)}
+ className="px-2.5 py-1 bg-slate-900 border border-slate-700 rounded-lg text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-purple-500 font-medium"
+ >
+ <option value="user">User</option>
+ <option value="staff">Staff</option>
+ <option value="admin">Admin</option>
+ </select>
+ ) : (
+ <span
+ className={`inline-flex px-2.5 py-0.5 text-[10px] font-bold rounded-md border uppercase tracking-wider ${getRoleBadge(
+ prof.role
+ )}`}
+ >
+ {prof.role}
+ </span>
+ )}
+ </td>
+
+ {/* Activation Status */}
+ <td className="px-4 py-3 whitespace-nowrap">
+ {prof.is_active ? (
+ <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-950/80 text-emerald-300 border border-emerald-800">
+ <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Active
+ </span>
+ ) : (
+ <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-amber-950/80 text-amber-300 border border-amber-800">
+ <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-ping"></span> Pending Activation
+ </span>
+ )}
+ </td>
+
+ {/* Actions */}
+ <td className="px-4 py-3 whitespace-nowrap text-right space-x-2">
+ {/* Activate / Deactivate Toggle */}
+ <button
+ onClick={() => handleActivateToggle(prof)}
+ disabled={isLoadingThis}
+ className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all border ${
+ prof.is_active
+ ? 'bg-slate-900 text-slate-400 hover:text-amber-300 border-slate-700 hover:border-amber-800'
+ : 'bg-emerald-600 hover:bg-emerald-500 text-white border-emerald-500 shadow-md shadow-emerald-950/40'
+ }`}
+ >
+ {isLoadingThis ? 'Saving...' : prof.is_active ? 'Deactivate' : 'Activate User'}
+ </button>
+
+ {/* Remove User (Disabled for main superadmin seed) */}
+ {prof.email !== 'superadmin@admin.com' && (
+ <button
+ onClick={() => handleDelete(prof)}
+ disabled={isLoadingThis}
+ className="px-2.5 py-1 bg-slate-950 hover:bg-rose-950/60 text-slate-400 hover:text-rose-300 border border-slate-800 hover:border-rose-800 rounded-lg text-xs transition-all"
+ title="Remove user account"
+ >
+ Remove
+ </button>
+ )}
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ )}
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AdminDashboard.jsx | +
+
+ |
+ 0% | +0/139 | +0% | +0/85 | +0% | +0/39 | +0% | +0/115 | +
| Auth.jsx | +
+
+ |
+ 19.51% | +8/41 | +20.58% | +7/34 | +16.66% | +1/6 | +20.51% | +8/39 | +
| NewTicketForm.jsx | +
+
+ |
+ 90% | +27/30 | +75% | +12/16 | +80% | +4/5 | +93.1% | +27/29 | +
| StaffDashboard.jsx | +
+
+ |
+ 0% | +0/83 | +0% | +0/81 | +0% | +0/29 | +0% | +0/75 | +
| SuperAdminDashboard.jsx | +
+
+ |
+ 0% | +0/87 | +0% | +0/36 | +0% | +0/16 | +0% | +0/79 | +
| TicketComments.jsx | +
+
+ |
+ 0% | +0/49 | +0% | +0/43 | +0% | +0/8 | +0% | +0/45 | +
| TicketList.jsx | +
+
+ |
+ 0% | +0/46 | +0% | +0/52 | +0% | +0/12 | +0% | +0/44 | +
| UserDashboard.jsx | +
+
+ |
+ 60% | +3/5 | +100% | +0/0 | +33.33% | +1/3 | +75% | +3/4 | +
| UserManagement.jsx | +
+
+ |
+ 0% | +0/47 | +0% | +0/45 | +0% | +0/15 | +0% | +0/45 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.jsx | +
+
+ |
+ 28% | +21/75 | +6.89% | +4/58 | +36.36% | +4/11 | +27.39% | +20/73 | +