feat: Multi-role platform expansion, mobile nav redesign, and UI polish
- Add Owner, Contractor, Vendor, Subcontractor dashboards and role-based routing - Owner now has superuser access to all Admin pages (dashboard, schedule, leaderboard) - Redesign landing page mobile menu as slide-in sidebar (replaces broken Framer Motion overlay) - Add body scroll lock to app sidebar for mobile consistency - Fix Team Schedule to match Admin Dashboard design language (ambient glows, gradient header, SpotlightCard, zinc palette) - Fix login page tab overflow — use abbreviated labels and grid layout for 6 role tabs - Fix Recharts ResponsiveContainer warnings — replace height="100%" with fixed pixel heights - Fix lightbox image viewer — unified nav bar, touch swipe support, no more overlapping text - Add AI Assistant page, People/Vendor/Document management for Owner role - Expand mock data store with contractor, vendor, and subcontractor data
This commit is contained in:
Satyam
@@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { FileText, CheckCircle, XCircle, Clock, Eye, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const DocumentReviewQueue = () => {
|
||||
const { documents } = useMockStore();
|
||||
const [filter, setFilter] = useState('pending'); // pending, approved, rejected, all
|
||||
|
||||
const filteredDocs = documents.filter(doc => {
|
||||
if (filter === 'all') return true;
|
||||
return doc.status === filter;
|
||||
});
|
||||
|
||||
const handleApprove = (id) => {
|
||||
toast.success(`Document #${id} Approved`);
|
||||
// In a real app, this would update the store/backend
|
||||
};
|
||||
|
||||
const handleReject = (id) => {
|
||||
toast.error(`Document #${id} Rejected`);
|
||||
// In a real app, this would update the store/backend
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'approved': return 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20';
|
||||
case 'rejected': return 'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20';
|
||||
case 'pending': return 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20';
|
||||
default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-500/10 dark:text-zinc-400 dark:border-zinc-500/20';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{['pending', 'approved', 'rejected', 'all'].map(f => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all ${filter === f
|
||||
? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 shadow-md transform scale-105'
|
||||
: 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar space-y-3 pr-2">
|
||||
{filteredDocs.length === 0 ? (
|
||||
<div className="p-12 text-center bg-zinc-50 dark:bg-white/5 rounded-2xl border border-zinc-200 dark:border-white/5 border-dashed flex flex-col items-center justify-center">
|
||||
<div className="w-16 h-16 bg-zinc-100 dark:bg-white/5 rounded-full flex items-center justify-center mb-4 text-zinc-400">
|
||||
<FileText size={32} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white">No documents found</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">Try adjusting your filters or upload a new document.</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredDocs.map(doc => (
|
||||
<div key={doc.id} className="group bg-white dark:bg-[#121214] border border-zinc-200 dark:border-white/5 rounded-xl p-5 hover:border-blue-500/30 transition-all shadow-sm">
|
||||
<div className="flex flex-col md:flex-row justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 rounded-xl bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0">
|
||||
<FileText size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white text-base">{doc.title}</h4>
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase border ${getStatusColor(doc.status)}`}>
|
||||
{doc.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-zinc-400 space-y-1">
|
||||
<p className="flex items-center gap-2">
|
||||
<span className="font-semibold text-zinc-700 dark:text-zinc-300">{doc.category}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600"></span>
|
||||
ID: <span className="font-mono">{doc.id}</span>
|
||||
</p>
|
||||
<p>Submitted by: <span className="font-bold text-zinc-700 dark:text-zinc-300">Vendor #{doc.relatedEntityId}</span> on {new Date(doc.uploadDate).toLocaleDateString()}</p>
|
||||
{doc.expirationDate && (
|
||||
<p className="flex items-center gap-1 text-amber-600 dark:text-amber-400 font-medium pt-1">
|
||||
<Clock size={12} /> Expires: {new Date(doc.expirationDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row md:flex-col justify-center items-end gap-2 shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<button className="p-2 rounded-lg bg-zinc-100 hover:bg-zinc-200 dark:bg-white/5 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors" title="View">
|
||||
<Eye size={18} />
|
||||
</button>
|
||||
<button className="p-2 rounded-lg bg-zinc-100 hover:bg-zinc-200 dark:bg-white/5 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors" title="Download">
|
||||
<Download size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{doc.status === 'pending' && (
|
||||
<div className="flex gap-2 mt-2 w-full md:w-auto">
|
||||
<button
|
||||
onClick={() => handleReject(doc.id)}
|
||||
className="flex-1 md:flex-none px-3 py-2 rounded-lg bg-red-50 hover:bg-red-100 dark:bg-red-500/10 dark:hover:bg-red-500/20 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-500/20 text-xs font-bold uppercase tracking-wide flex items-center justify-center gap-1 transition-colors"
|
||||
>
|
||||
<XCircle size={14} /> Reject
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleApprove(doc.id)}
|
||||
className="flex-1 md:flex-none px-3 py-2 rounded-lg bg-emerald-50 hover:bg-emerald-100 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/20 text-xs font-bold uppercase tracking-wide flex items-center justify-center gap-1 transition-colors"
|
||||
>
|
||||
<CheckCircle size={14} /> Approve
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentReviewQueue;
|
||||
Reference in New Issue
Block a user