File: //var/www/igsms.viitorcloud.co/igsmsportal/views/CitizenDashboard.tsx
import React, { useState, useMemo } from 'react';
import { Grievance, GrievanceStatus } from '../types';
import { DISTRICTS, STATUS_COLORS, PRIORITY_COLORS } from '../constants';
import { autoCategorizeGrievance } from '../services/geminiService';
interface Scheme {
id: string;
title: string;
department: string;
category: string;
benefit: string;
description: string;
eligibility: string[];
documents: string[];
}
const SCHEMES: Scheme[] = [
{
id: 's1',
title: 'Mukhyamantri Amrutam (MA) Yojana',
department: 'Health and Family Welfare',
category: 'Health',
benefit: 'Cashless medical treatment up to ₹5 Lakh',
description: 'Provides tertiary care treatment for serious illnesses to BPL and low-income families in Gujarat.',
eligibility: ['Resident of Gujarat', 'Annual income below ₹4 Lakh', 'BPL card holders'],
documents: ['Income Certificate', 'Aadhar Card', 'Ration Card', 'Photographs']
},
{
id: 's2',
title: 'Vahli Dikri Yojana',
department: 'Women and Child Development',
category: 'Social Welfare',
benefit: 'Financial assistance up to ₹1.10 Lakh',
description: 'A scheme to improve the sex ratio and encourage girl child education by providing financial aid at various life stages.',
eligibility: ['First two daughters of a family', 'Combined family income below ₹2 Lakh', 'Gujarat Domicile'],
documents: ['Birth Certificate', 'Income Proof', 'Aadhar Card of Parents']
},
{
id: 's3',
title: 'Suryashakti Kisan Yojana (SKY)',
department: 'Agriculture, Farmers Welfare and Co-operation',
category: 'Agriculture',
benefit: 'Solar panels with 60% subsidy',
description: 'Empowers farmers to generate their own electricity for irrigation and sell surplus power to the grid.',
eligibility: ['Owns agricultural land', 'Existing electricity connection', 'Willingness to install solar meters'],
documents: ['Land ownership records (7/12)', 'Identity Proof', 'Electricity Bill']
},
{
id: 's4',
title: 'Digital Gujarat Post-Matric Scholarship',
department: 'Education',
category: 'Education',
benefit: 'Direct tuition fee reimbursement',
description: 'Financial support for students belonging to SC/ST/OBC/EWS categories for higher education.',
eligibility: ['SC/ST/OBC students', 'Family income criteria as per category', 'Studying in recognized institutes'],
documents: ['Caste Certificate', 'Previous Year Marksheet', 'Fee Receipt', 'Bank Passbook']
},
{
id: 's5',
title: 'Kanya Kelavani Nidhi',
department: 'Education',
category: 'Education',
benefit: 'Financial aid for higher secondary girls',
description: 'Encouraging girls in rural areas to complete their higher secondary education with merit-based stipends.',
eligibility: ['Female students', 'Rural area resident', 'Maintaining 75% attendance'],
documents: ['School ID', 'Attendance Record', 'Aadhar Card']
}
];
interface CitizenDashboardProps {
activeTab: string;
grievances: Grievance[];
onAddGrievance: (g: Grievance) => void;
}
const CitizenDashboard: React.FC<CitizenDashboardProps> = ({ activeTab, grievances, onAddGrievance }) => {
const [formData, setFormData] = useState({
title: '', description: '', department: '', category: '', district: '', taluka: '', priority: 'MEDIUM' as any
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isAutoSuggesting, setIsAutoSuggesting] = useState(false);
const [selectedGrievance, setSelectedGrievance] = useState<Grievance | null>(null);
// State for Schemes section
const [schemeSearch, setSchemeSearch] = useState('');
const [schemeCategory, setSchemeCategory] = useState('All');
const [selectedScheme, setSelectedScheme] = useState<Scheme | null>(null);
const filteredSchemes = useMemo(() => {
return SCHEMES.filter(s => {
const matchesSearch = s.title.toLowerCase().includes(schemeSearch.toLowerCase()) ||
s.description.toLowerCase().includes(schemeSearch.toLowerCase());
const matchesCategory = schemeCategory === 'All' || s.category === schemeCategory;
return matchesSearch && matchesCategory;
});
}, [schemeSearch, schemeCategory]);
const handleDescriptionBlur = async () => {
if (formData.description.length > 20 && !formData.department) {
setIsAutoSuggesting(true);
const suggestions = await autoCategorizeGrievance(formData.description);
if (suggestions) {
setFormData(prev => ({
...prev,
department: suggestions.department || prev.department,
category: suggestions.category || prev.category,
priority: suggestions.priority || prev.priority
}));
}
setIsAutoSuggesting(false);
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setTimeout(() => {
const newGrievance: Grievance = {
id: Math.random().toString(36).substr(2, 9),
ticketNumber: `GUJ-${new Date().getFullYear()}-${Math.floor(1000 + Math.random() * 9000)}`,
title: formData.title, description: formData.description,
department: formData.department || 'General Administration',
category: formData.category || 'Other',
status: GrievanceStatus.PENDING,
createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
citizenName: 'Jayesh Patel', contactNumber: '9876543210',
district: formData.district, taluka: formData.taluka,
slaDeadline: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
priority: formData.priority
};
onAddGrievance(newGrievance);
setFormData({ title: '', description: '', department: '', category: '', district: '', taluka: '', priority: 'MEDIUM' });
setIsSubmitting(false);
}, 1200);
};
const getStatusStep = (status: GrievanceStatus) => {
const steps = [GrievanceStatus.PENDING, GrievanceStatus.ASSIGNED, GrievanceStatus.IN_PROGRESS, GrievanceStatus.RESOLVED];
return steps.indexOf(status);
};
// Rendering for "State Schemes" Tab
if (activeTab === 'schemes') {
return (
<div className="space-y-8 animate-fade-in py-4">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<h2 className="text-3xl font-black text-slate-900 tracking-tight">State Welfare Schemes</h2>
<p className="text-slate-500 font-medium mt-1">Discover benefits and services tailored for your growth.</p>
</div>
<div className="w-full md:w-80">
<div className="relative">
<input
type="text"
placeholder="Search schemes..."
value={schemeSearch}
onChange={e => setSchemeSearch(e.target.value)}
className="w-full pl-11 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500 transition-all"
/>
<i className="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
</div>
</div>
</div>
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
{['All', 'Health', 'Education', 'Agriculture', 'Social Welfare'].map(cat => (
<button
key={cat}
onClick={() => setSchemeCategory(cat)}
className={`px-6 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all whitespace-nowrap border ${
schemeCategory === cat
? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/20'
: 'bg-white text-slate-500 border-slate-200 hover:border-slate-300'
}`}
>
{cat}
</button>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredSchemes.map(s => (
<div key={s.id} className="bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-md transition-all flex flex-col group">
<div className="flex justify-between items-start mb-4">
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center border transition-colors ${
s.category === 'Health' ? 'bg-rose-50 text-rose-500 border-rose-100' :
s.category === 'Education' ? 'bg-blue-50 text-blue-500 border-blue-100' :
'bg-emerald-50 text-emerald-500 border-emerald-100'
}`}>
<i className={`fa-solid ${
s.category === 'Health' ? 'fa-heart-pulse' :
s.category === 'Education' ? 'fa-graduation-cap' :
s.category === 'Agriculture' ? 'fa-wheat-awn' : 'fa-users'
} text-lg`}></i>
</div>
<span className="text-[10px] font-black text-slate-300 tracking-widest uppercase">{s.category}</span>
</div>
<h4 className="text-lg font-black text-slate-900 leading-tight mb-2 group-hover:text-blue-600 transition-colors">{s.title}</h4>
<p className="text-xs font-bold text-slate-500 line-clamp-2 mb-6 leading-relaxed">{s.description}</p>
<div className="mt-auto pt-6 border-t border-slate-50 flex items-center justify-between">
<div>
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Primary Benefit</p>
<p className="text-[10px] font-black text-blue-600">{s.benefit.substring(0, 25)}...</p>
</div>
<button
onClick={() => setSelectedScheme(s)}
className="w-10 h-10 bg-slate-50 hover:bg-blue-600 hover:text-white text-slate-400 rounded-xl transition-all flex items-center justify-center shadow-sm"
>
<i className="fa-solid fa-arrow-right text-xs"></i>
</button>
</div>
</div>
))}
</div>
{/* Scheme Details Drawer */}
{selectedScheme && (
<div className="fixed inset-0 z-50 flex items-center justify-end bg-slate-900/60 transition-all animate-fade-in">
<div className="w-full max-w-xl h-full bg-white shadow-2xl animate-slide-in-right flex flex-col rounded-l-[3rem] border-l border-slate-200 overflow-hidden">
<div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50">
<div>
<span className="text-[10px] font-black text-blue-600 uppercase tracking-widest block mb-1">State Benefit Portal</span>
<h3 className="text-xl font-black text-slate-900 tracking-tight">Scheme Guidelines</h3>
</div>
<button
onClick={() => setSelectedScheme(null)}
className="w-10 h-10 rounded-xl bg-white border border-slate-200 text-slate-400 hover:text-slate-900 transition-all flex items-center justify-center shadow-sm outline-none"
>
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="flex-1 overflow-y-auto p-10 space-y-8 bg-white">
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-xl flex items-center justify-center text-white ${
selectedScheme.category === 'Health' ? 'bg-rose-500' :
selectedScheme.category === 'Education' ? 'bg-blue-500' : 'bg-emerald-500'
}`}>
<i className="fa-solid fa-circle-info"></i>
</div>
<div>
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">About the Scheme</p>
<p className="text-sm font-black text-slate-900">{selectedScheme.department}</p>
</div>
</div>
<h4 className="text-2xl font-black text-slate-900 leading-tight">{selectedScheme.title}</h4>
<p className="text-sm text-slate-600 leading-relaxed font-medium">{selectedScheme.description}</p>
</div>
<div className="bg-blue-50 rounded-[2rem] p-8 border border-blue-100">
<p className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-4">Core Benefit</p>
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-blue-600 shadow-sm">
<i className="fa-solid fa-gift text-lg"></i>
</div>
<p className="text-lg font-black text-blue-900 leading-tight">{selectedScheme.benefit}</p>
</div>
</div>
<div className="space-y-4">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Eligibility Criteria</p>
<div className="grid grid-cols-1 gap-3">
{selectedScheme.eligibility.map((e, idx) => (
<div key={idx} className="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
<i className="fa-solid fa-check text-emerald-500 text-xs"></i>
<p className="text-xs font-bold text-slate-700">{e}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Required Documents</p>
<div className="flex flex-wrap gap-2">
{selectedScheme.documents.map((d, idx) => (
<span key={idx} className="px-4 py-2 bg-white border border-slate-200 rounded-xl text-[10px] font-black text-slate-600 shadow-sm">
{d}
</span>
))}
</div>
</div>
</div>
<div className="p-8 border-t border-slate-100 bg-slate-50">
<button className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-blue-200 flex items-center justify-center gap-2 outline-none">
<i className="fa-solid fa-external-link"></i> Apply on Digital Gujarat
</button>
<p className="text-[9px] text-center text-slate-400 mt-4 font-bold">You will be redirected to the official government service portal.</p>
</div>
</div>
</div>
)}
</div>
);
}
if (activeTab === 'register') {
return (
<div className="max-w-4xl mx-auto space-y-8 animate-fade-in py-8">
<div className="text-center mb-12">
<h2 className="text-4xl font-black text-slate-900 tracking-tight mb-2">Lodge Your Grievance</h2>
<p className="text-slate-500 font-medium">Empowering citizens through transparent governance.</p>
</div>
<div className="bg-white rounded-[2.5rem] shadow-xl p-10 border border-slate-100 relative overflow-hidden">
<form onSubmit={handleSubmit} className="relative z-10 space-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-3">
<label className="text-xs font-black text-slate-400 uppercase tracking-widest ml-1">Title of Issue</label>
<input required type="text" value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} placeholder="e.g., Streetlight issue" className="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800 font-semibold outline-none" />
</div>
<div className="space-y-3">
<label className="text-xs font-black text-slate-400 uppercase tracking-widest ml-1">Location District</label>
<select required value={formData.district} onChange={e => setFormData({...formData, district: e.target.value})} className="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800 font-semibold cursor-pointer outline-none">
<option value="">Select District</option>
{DISTRICTS.map(d => <option key={d} value={d}>{d}</option>)}
</select>
</div>
<div className="md:col-span-2 space-y-3">
<label className="flex justify-between items-center text-xs font-black text-slate-400 uppercase tracking-widest ml-1">
Description
{isAutoSuggesting && <span className="text-blue-600 animate-pulse lowercase font-bold tracking-normal flex items-center gap-1"><i className="fa-solid fa-sparkles"></i> AI classifying...</span>}
</label>
<textarea required rows={5} value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})} onBlur={handleDescriptionBlur} placeholder="Provide full details for faster resolution..." className="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-3xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800 font-semibold leading-relaxed outline-none" />
</div>
<div className="bg-blue-50 p-6 rounded-3xl border border-blue-100">
<p className="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-2">AI-Detected Dept</p>
<p className="text-sm font-bold text-blue-900">{formData.department || 'Awaiting description...'}</p>
</div>
<div className="bg-orange-50 p-6 rounded-3xl border border-orange-100">
<p className="text-[10px] font-black text-orange-400 uppercase tracking-widest mb-2">Priority Level</p>
<div className="flex gap-2 mt-2">
{['LOW', 'MEDIUM', 'HIGH', 'URGENT'].map(p => (
<button key={p} type="button" onClick={() => setFormData({...formData, priority: p as any})} className={`flex-1 py-1.5 rounded-lg text-[9px] font-black transition-all ${formData.priority === p ? 'bg-orange-600 text-white shadow-lg shadow-orange-600/20' : 'bg-white text-orange-400 border border-orange-100'}`}>{p}</button>
))}
</div>
</div>
</div>
<button type="submit" disabled={isSubmitting} className="w-full py-5 bg-orange-600 hover:bg-orange-700 text-white text-lg font-black rounded-3xl shadow-lg transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center gap-3">
{isSubmitting ? <i className="fa-solid fa-spinner animate-spin"></i> : <><i className="fa-solid fa-paper-plane"></i> Submit to System</>}
</button>
</form>
</div>
</div>
);
}
return (
<div className="space-y-10 animate-fade-in py-4">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div>
<h2 className="text-3xl font-black text-slate-900 tracking-tight">Namaste, Jayesh 👋</h2>
<p className="text-slate-500 font-medium mt-1">Here's what's happening with your government requests.</p>
</div>
<div className="flex gap-4">
<div className="bg-white px-6 py-4 rounded-3xl shadow-sm border border-slate-100 text-center min-w-[120px]">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Filed</p>
<p className="text-xl font-black text-slate-900">{grievances.length}</p>
</div>
<div className="bg-white px-6 py-4 rounded-3xl shadow-sm border border-slate-100 text-center min-w-[120px]">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Resolved</p>
<p className="text-xl font-black text-green-600">{grievances.filter(g => g.status === 'RESOLVED').length}</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2 space-y-6">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-black text-slate-400 uppercase tracking-[0.15em]">Recent Activity</h3>
<button className="text-xs font-bold text-blue-600 hover:underline">View All ›</button>
</div>
<div className="grid grid-cols-1 gap-6">
{grievances.map(g => (
<div key={g.id} className="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-md transition-all">
<div className="flex justify-between items-start mb-6">
<div className="flex items-center gap-4">
<div className="w-14 h-14 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-400 group-hover:bg-blue-50 group-hover:text-blue-500 transition-colors border border-slate-50 group-hover:border-blue-100">
<i className="fa-solid fa-file-invoice text-xl"></i>
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-black text-slate-300 tracking-wider font-mono">{g.ticketNumber}</span>
<span className={`text-[9px] px-2.5 py-1 rounded-full font-black uppercase tracking-wider ${STATUS_COLORS[g.status]}`}>{g.status.replace('_', ' ')}</span>
</div>
<h4 className="font-bold text-slate-900 text-lg leading-tight">{g.title}</h4>
</div>
</div>
<div className="text-right">
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Last Update</p>
<p className="text-xs font-bold text-slate-700 mt-0.5">{new Date(g.updatedAt).toLocaleDateString()}</p>
</div>
</div>
<div className="flex items-center justify-between pt-6 border-t border-slate-50">
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
<span className="text-[11px] font-bold text-slate-500">{g.department}</span>
</div>
<button
onClick={() => setSelectedGrievance(g)}
className="px-5 py-2 bg-blue-50 text-blue-600 text-[11px] font-black rounded-xl hover:bg-blue-600 hover:text-white transition-all shadow-sm"
>
View Details
</button>
</div>
</div>
))}
</div>
</div>
<div className="space-y-8">
<div className="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden group">
<h3 className="text-xl font-black mb-4 flex items-center gap-2">
<i className="fa-solid fa-shield-halved text-orange-500"></i>
Service Pledge
</h3>
<p className="text-sm text-slate-400 leading-relaxed font-medium">Gujarat Govt is committed to 100% grievance redressal. If you aren't satisfied, you can escalate anytime.</p>
<div className="mt-8 grid grid-cols-2 gap-4">
<div className="bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
<p className="text-2xl font-black text-orange-500">7d</p>
<p className="text-[9px] font-bold text-slate-500 uppercase tracking-widest mt-1">SLA Target</p>
</div>
<div className="bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
<p className="text-2xl font-black text-blue-400">92%</p>
<p className="text-[9px] font-bold text-slate-500 uppercase tracking-widest mt-1">State Score</p>
</div>
</div>
</div>
<div className="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-sm">
<h4 className="font-black text-slate-900 mb-6 flex items-center gap-2">
<i className="fa-solid fa-circle-question text-blue-500"></i>
FAQ & Knowledge
</h4>
<div className="space-y-3">
{['How to track your ticket?', 'Resolution escalation path', 'Documents required for Revenue'].map((q, i) => (
<button key={i} className="w-full text-left p-4 rounded-2xl hover:bg-slate-50 text-xs font-bold text-slate-600 border border-slate-50 hover:border-slate-100 transition-all flex items-center justify-between group">
{q}
<i className="fa-solid fa-chevron-right text-[10px] text-slate-300 group-hover:text-blue-500 transition-colors"></i>
</button>
))}
</div>
</div>
</div>
</div>
{/* Activity Details Drawer */}
{selectedGrievance && (
<div className="fixed inset-0 z-50 flex items-center justify-end bg-slate-900/60 animate-fade-in transition-all">
<div className="w-full max-w-xl h-full bg-white shadow-2xl animate-slide-in-right flex flex-col rounded-l-[3rem] border-l border-slate-200 overflow-hidden">
{/* Drawer Header */}
<div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50">
<div>
<span className="text-[10px] font-black text-blue-600 uppercase tracking-[0.2em] block mb-1">{selectedGrievance.ticketNumber}</span>
<h3 className="text-xl font-black text-slate-900 tracking-tight">Case Intelligence</h3>
</div>
<button
onClick={() => setSelectedGrievance(null)}
className="w-10 h-10 rounded-xl bg-white border border-slate-200 text-slate-400 hover:text-red-500 hover:border-red-100 transition-all flex items-center justify-center shadow-sm"
>
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="flex-1 overflow-y-auto p-10 space-y-10 bg-white">
{/* Progress Tracker (Timeline) */}
<div className="space-y-6">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Process Journey</p>
<div className="relative">
{[
{ label: 'Lodge', status: 'Lodge Request', icon: 'fa-file-signature' },
{ label: 'Assigned', status: 'Department Audit', icon: 'fa-building' },
{ label: 'In Progress', status: 'Field Investigation', icon: 'fa-person-digging' },
{ label: 'Resolved', status: 'Final Resolution', icon: 'fa-circle-check' }
].map((step, idx) => {
const currentStep = getStatusStep(selectedGrievance.status);
const isCompleted = idx <= currentStep;
const isActive = idx === currentStep;
return (
<div key={idx} className="flex gap-5 mb-10 last:mb-0 relative">
{/* Timeline Line */}
{idx < 3 && (
<div className={`absolute left-[22px] top-[48px] w-[2px] h-[40px] ${isCompleted ? 'bg-blue-600' : 'bg-slate-100'}`}></div>
)}
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center transition-all border ${
isCompleted ? 'bg-blue-600 text-white border-blue-600' : 'bg-slate-50 text-slate-300 border-slate-100'
}`}>
<i className={`fa-solid ${step.icon} text-xs`}></i>
</div>
<div className="pt-0.5">
<p className={`text-sm font-black transition-colors ${isCompleted ? 'text-slate-900' : 'text-slate-300'}`}>
{step.label}
</p>
<p className={`text-[11px] font-bold ${isCompleted ? (isActive ? 'text-blue-600' : 'text-slate-500') : 'text-slate-300'}`}>
{step.status} {isActive ? '(Current)' : ''}
</p>
</div>
</div>
);
})}
</div>
</div>
{/* Case Details Card */}
<div className="space-y-4">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Description</p>
<div className="bg-slate-50 rounded-[2rem] p-7 border border-slate-100">
<h4 className="font-black text-slate-900 text-lg mb-3 tracking-tight">{selectedGrievance.title}</h4>
<p className="text-sm text-slate-600 leading-relaxed italic">"{selectedGrievance.description}"</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className={`text-[9px] px-3 py-1.5 rounded-xl font-black uppercase tracking-wider ${PRIORITY_COLORS[selectedGrievance.priority]}`}>
{selectedGrievance.priority} Priority
</span>
<span className="text-[9px] px-3 py-1.5 rounded-xl font-black uppercase tracking-wider bg-white border border-slate-200 text-slate-500">
{selectedGrievance.department}
</span>
</div>
</div>
</div>
{/* Resolution / Official Update */}
<div className="space-y-4">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Official Remarks</p>
<div className="bg-white border border-orange-200 rounded-[2rem] p-8 space-y-4 shadow-sm">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600">
<i className="fa-solid fa-user-check text-xs"></i>
</div>
<div>
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Responsible Unit</p>
<p className="text-xs font-black text-slate-900">{selectedGrievance.department} HQ</p>
</div>
</div>
<div className="p-5 bg-orange-50/50 rounded-2xl border border-orange-100 min-h-[100px] flex items-center">
<p className="text-xs font-bold text-orange-800 leading-relaxed">
{selectedGrievance.status === 'RESOLVED'
? selectedGrievance.resolutionRemarks || "Redressal confirmed. Case closed successfully."
: "Audit in progress. Field officers are verifying the report. Expect an update within 48 hours."}
</p>
</div>
</div>
</div>
</div>
{/* Footer Actions */}
<div className="p-8 border-t border-slate-100 bg-slate-50 flex gap-4">
<button className="flex-1 py-4 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-slate-800 transition-all flex items-center justify-center gap-2 shadow-sm">
<i className="fa-solid fa-file-pdf"></i> Download Ack
</button>
{selectedGrievance.status !== 'RESOLVED' && (
<button className="flex-1 py-4 bg-white border border-slate-200 text-slate-600 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-red-50 hover:text-red-600 hover:border-red-100 transition-all flex items-center justify-center gap-2 shadow-sm">
<i className="fa-solid fa-triangle-exclamation"></i> Escalate
</button>
)}
</div>
</div>
</div>
)}
</div>
);
};
export default CitizenDashboard;