feat: comprehensive mobile optimization, role-based AI chatbot, and multi-role dashboard enhancements
- Rewrote AI chatbot context system with deep role-aware data injection for all 7 roles (Owner, Admin, Field Agent, Contractor, Subcontractor, Vendor, Customer) plus guest fallback - Added mobile-responsive bottom-sheet modals across all roles (ChangeOrderDrawer, InvoiceDetailModal, FinancialSummaryModal, VendorFinancialSummaryModal, FinancialDetailsModal) - Converted Owner Project List and Vendor Orders tables to mobile card views with touch-friendly layouts - Optimized Vendor Management and People Directory with mobile list/detail toggle and back navigation - Fixed Document Control mobile view: horizontally scrollable filter tabs, proper overflow chain for document visibility - Added responsive padding, text scaling, and flex-wrap across StatCard, TaskDetailsModal, OwnerSnapshot, OwnerProjectDetail, VendorDashboard, and DocumentManagement - Expanded mock data store with richer vendor invoices, orders, documents, and compliance records - Enhanced Owner Snapshot with financial KPI cards, urgent items panel, and Action Center modal - Built Contractor Dashboard with task management, financial summary, and performance metrics - Built Subcontractor Dashboard with clock-in tracking, task assignments, and invoice management - Enhanced Vendor Dashboard with earnings summary, active orders, compliance status, and performance rating - Added icon-only tab navigation on mobile for OwnerProjectDetail - Extended attribution signatures across all platform pages
This commit is contained in:
Satyam
@@ -1,54 +1,78 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { FileText, CheckCircle, XCircle, Clock, Eye, Download } from 'lucide-react';
|
||||
import { FileText, CheckCircle, XCircle, Clock, Eye, Download, AlertTriangle, Shield } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const DocumentReviewQueue = () => {
|
||||
const { documents } = useMockStore();
|
||||
const [filter, setFilter] = useState('pending'); // pending, approved, rejected, all
|
||||
const [filter, setFilter] = useState('pending_review');
|
||||
|
||||
// Normalize status for filtering
|
||||
const getFilterStatus = (status) => {
|
||||
if (status === 'pending_review') return 'pending_review';
|
||||
return status;
|
||||
};
|
||||
|
||||
const filteredDocs = documents.filter(doc => {
|
||||
if (filter === 'all') return true;
|
||||
return doc.status === filter;
|
||||
return getFilterStatus(doc.status) === filter;
|
||||
});
|
||||
|
||||
const filterTabs = [
|
||||
{ key: 'pending_review', label: 'Pending Review', count: documents.filter(d => d.status === 'pending_review').length },
|
||||
{ key: 'expired', label: 'Expired', count: documents.filter(d => d.status === 'expired').length },
|
||||
{ key: 'approved', label: 'Approved', count: documents.filter(d => d.status === 'approved').length },
|
||||
{ key: 'all', label: 'All', count: documents.length },
|
||||
];
|
||||
|
||||
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
|
||||
toast.error(`Document #${id} Rejected — Reason: Missing signature or incorrect entity`);
|
||||
};
|
||||
|
||||
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';
|
||||
case 'expired': 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_review': 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';
|
||||
}
|
||||
};
|
||||
|
||||
const getDocTypeLabel = (type) => {
|
||||
const labels = { COI: 'Certificate of Insurance', W9: 'W-9 Form', DL: 'Driver License', PAY_PLAN: 'Pay Plan Agreement', SUB_AGREEMENT: 'Subcontractor Agreement' };
|
||||
return labels[type] || type;
|
||||
};
|
||||
|
||||
const getDocTypeIcon = (type) => {
|
||||
if (type === 'COI') return <Shield size={24} />;
|
||||
return <FileText size={24} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{['pending', 'approved', 'rejected', 'all'].map(f => (
|
||||
<div className="flex gap-2 mb-4 sm:mb-6 overflow-x-auto pb-2 no-scrollbar shrink-0 -mx-1 px-1">
|
||||
{filterTabs.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'
|
||||
key={f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
className={`px-3 sm:px-4 py-2 rounded-xl text-[11px] sm:text-xs font-bold uppercase tracking-wider transition-all flex items-center gap-1.5 sm:gap-2 whitespace-nowrap shrink-0 ${filter === f.key
|
||||
? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 shadow-md'
|
||||
: 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
{f.label}
|
||||
<span className={`px-1.5 py-0.5 rounded-md text-[10px] font-bold ${filter === f.key ? 'bg-white/20 dark:bg-zinc-900/20' : 'bg-zinc-200 dark:bg-white/10'}`}>
|
||||
{f.count}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar space-y-3 pr-2">
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar space-y-3 pr-1 sm: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">
|
||||
@@ -59,29 +83,56 @@ const DocumentReviewQueue = () => {
|
||||
</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 key={doc.id} className="group bg-white dark:bg-[#121214] border border-zinc-200 dark:border-white/5 rounded-xl p-3 sm:p-5 hover:border-blue-500/30 transition-all shadow-sm">
|
||||
<div className="flex flex-col md:flex-row justify-between gap-3 sm:gap-4">
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className={`p-2 sm:p-3 rounded-xl shrink-0 ${
|
||||
doc.status === 'expired' ? 'bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400' :
|
||||
doc.status === 'pending_review' ? 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400' :
|
||||
'bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400'
|
||||
}`}>
|
||||
{getDocTypeIcon(doc.documentType)}
|
||||
</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>
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white text-base">{doc.name}</h4>
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase border ${getStatusColor(doc.status)}`}>
|
||||
{doc.status}
|
||||
{doc.status === 'pending_review' ? 'Pending Review' : 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="font-semibold text-zinc-700 dark:text-zinc-300">{getDocTypeLabel(doc.documentType)}</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>
|
||||
<p>
|
||||
Uploaded by: <span className="font-bold text-zinc-700 dark:text-zinc-300">{doc.uploadedBy}</span>
|
||||
{doc.entityName && <> for <span className="font-bold text-zinc-700 dark:text-zinc-300">{doc.entityName}</span></>}
|
||||
{doc.uploadedAt && <> on {new Date(doc.uploadedAt).toLocaleDateString()}</>}
|
||||
</p>
|
||||
{doc.aiConfidence && (
|
||||
<p className="flex items-center gap-1">
|
||||
AI Confidence: <span className={`font-bold ${doc.aiConfidence >= 0.9 ? 'text-emerald-500' : doc.aiConfidence >= 0.8 ? 'text-amber-500' : 'text-red-500'}`}>
|
||||
{Math.round(doc.aiConfidence * 100)}%
|
||||
</span>
|
||||
</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 className={`flex items-center gap-1 font-medium pt-1 ${
|
||||
new Date(doc.expirationDate) < new Date('2026-02-18')
|
||||
? 'text-red-600 dark:text-red-400'
|
||||
: 'text-amber-600 dark:text-amber-400'
|
||||
}`}>
|
||||
<Clock size={12} />
|
||||
{new Date(doc.expirationDate) < new Date('2026-02-18') ? 'EXPIRED: ' : 'Expires: '}
|
||||
{new Date(doc.expirationDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
{doc.status === 'expired' && (
|
||||
<p className="flex items-center gap-1 text-red-600 dark:text-red-400 font-bold pt-1">
|
||||
<AlertTriangle size={12} />
|
||||
Vendor must upload renewed document
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -90,15 +141,21 @@ const DocumentReviewQueue = () => {
|
||||
|
||||
<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">
|
||||
<button
|
||||
onClick={() => toast.info(`Viewing ${doc.fileName}`)}
|
||||
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">
|
||||
<button
|
||||
onClick={() => toast.info(`Downloading ${doc.fileName}`)}
|
||||
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' && (
|
||||
{doc.status === 'pending_review' && (
|
||||
<div className="flex gap-2 mt-2 w-full md:w-auto">
|
||||
<button
|
||||
onClick={() => handleReject(doc.id)}
|
||||
@@ -114,6 +171,15 @@ const DocumentReviewQueue = () => {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.status === 'expired' && (
|
||||
<button
|
||||
onClick={() => toast.info(`Request sent to ${doc.entityName} for renewal`)}
|
||||
className="mt-2 w-full px-3 py-2 rounded-lg bg-blue-50 hover:bg-blue-100 dark:bg-blue-500/10 dark:hover:bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-500/20 text-xs font-bold uppercase tracking-wide flex items-center justify-center gap-1 transition-colors"
|
||||
>
|
||||
Request Renewal
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user