DeshSevaCheck - Civic Engagement Platform

refactor-code"import-React,-{-useState-}-from-'react';-import-{-Home,-User,-BarChart2,-Bell,-Search,-ChevronRight,-BookOpen,-MessageCircle,-Award,-Settings,-ThumbsUp,-Share2,-TrendingUp,-Users,-Newspaper-}-from-'lucide-react';-const-DeshSevaCheck-=-()-=>-{-const-[activeScreen,-setActiveScreen]-=-useState('home');-const-[selectedPromise,-setSelectedPromise]-=-useState(null);-const-[selectedLeader,-setSelectedLeader]-=-useState(null);-//-Sample-data-const-promises-=-[-{-id:-1,-title:-"Education-Reform",-status:-"in-progress",-upvotes:-2345,-leader:-"Minister-Kumar",-progress:-65,-sector:-"education",-level:-"national"-},-{-id:-2,-title:-"Healthcare-Initiative",-status:-"fulfilled",-upvotes:-3456,-leader:-"CM-Singh",-progress:-100,-sector:-"healthcare",-level:-"state"-}-];-const-leaders-=-[-{-id:-1,-name:-"Minister-Kumar",-position:-"Education-Minister",-sevaScore:-85,-promisesFulfilled:-12,-totalPromises:-15,-region:-"North",-image:-"/api/placeholder/100/100"-},-{-id:-2,-name:-"CM-Singh",-position:-"Chief-Minister",-sevaScore:-78,-promisesFulfilled:-45,-totalPromises:-60,-region:-"South",-image:-"/api/placeholder/100/100"-}-];-const-news-=-[-{-id:-1,-title:-"Education-Reform-Bill-Passed",-date:-"2024-03-15",-source:-"National-News",-related:-"Education-Reform"-},-{-id:-2,-title:-"Healthcare-Initiative-Shows-Positive-Results",-date:-"2024-03-14",-source:-"State-News",-related:-"Healthcare-Initiative"-}-];-const-polls-=-[-{-id:-1,-question:-"Should-education-reform-be-prioritized?",-options:-["Yes",-"No",-"Need-more-information"],-votes:-[1234,-456,-789]-}-];-//-Utility-functions-const-getStatusColor-=-(status)-=>-{-switch(status)-{-case-'fulfilled':-return-'bg-green-500';-case-'in-progress':-return-'bg-yellow-500';-case-'broken':-return-'bg-red-500';-default:-return-'bg-gray-500';-}-};-//-Component-for-Promise-Card-const-PromiseCard-=-({-promise-})-=>-(-<div-className="bg-white-p-4-rounded-lg-shadow-sm-mb-4-cursor-pointer"-onClick={()-=>-setSelectedPromise(promise)}->-<div-className="flex-justify-between-items-start">-<div>-<h3-className="font-semibold-text-lg">{promise.title}</h3>-<p-className="text-sm-text-gray-600">By-{promise.leader}</p>-<div-className="flex-space-x-2-mt-1">-<span-className="text-xs-bg-gray-100-px-2-py-1-rounded">{promise.sector}</span>-<span-className="text-xs-bg-gray-100-px-2-py-1-rounded">{promise.level}</span>-</div>-</div>-<span-className={`${getStatusColor(promise.status)}-px-2-py-1-rounded-full-text-white-text-xs`}>-{promise.status}-</span>-</div>-<div-className="mt-2">-<div-className="w-full-bg-gray-200-rounded-full-h-2">-<div-className={`${getStatusColor(promise.status)}-h-2-rounded-full`}-style={{-width:-`${promise.progress}%`-}}-/>-</div>-<div-className="flex-justify-between-mt-2-text-sm-text-gray-600">-<span>Progress:-{promise.progress}%</span>-<div-className="flex-space-x-4">-<span-className="flex-items-center"><ThumbsUp-className="w-4-h-4-mr-1"-/>-{promise.upvotes}</span>-<span-className="flex-items-center"><MessageCircle-className="w-4-h-4-mr-1"-/>-245</span>-</div>-</div>-</div>-</div>-);-//-Component-for-Leader-Card-const-LeaderCard-=-({-leader-})-=>-(-<div-className="bg-white-p-4-rounded-lg-shadow-sm-mb-4-cursor-pointer"-onClick={()-=>-setSelectedLeader(leader)}->-<div-className="flex-items-start-space-x-4">-<img-src={leader.image}-alt={leader.name}-className="w-16-h-16-rounded-full"-/>-<div-className="flex-1">-<h3-className="font-semibold-text-lg">{leader.name}</h3>-<p-className="text-sm-text-gray-600">{leader.position}</p>-<div-className="mt-2">-<div-className="flex-items-center-space-x-2">-<span-className="text-sm-font-medium">Seva-Score:</span>-<span-className="bg-blue-100-text-blue-800-px-2-py-1-rounded-text-sm">-{leader.sevaScore}/100-</span>-</div>-<p-className="text-sm-text-gray-600-mt-1">-Promises-fulfilled:-{leader.promisesFulfilled}/{leader.totalPromises}-</p>-</div>-</div>-</div>-</div>-);-//-Component-for-News-Card-const-NewsCard-=-({-news-})-=>-(-<div-className="bg-white-p-4-rounded-lg-shadow-sm-mb-4">-<h3-className="font-semibold">{news.title}</h3>-<div-className="flex-justify-between-mt-2-text-sm-text-gray-600">-<span>{news.source}</span>-<span>{news.date}</span>-</div>-<p-className="text-xs-text-blue-500-mt-1">Related-to:-{news.related}</p>-</div>-);-//-Component-for-Poll-Card-const-PollCard-=-({-poll-})-=>-(-<div-className="bg-white-p-4-rounded-lg-shadow-sm-mb-4">-<h3-className="font-semibold-mb-3">{poll.question}</h3>-<div-className="space-y-2">-{poll.options.map((option,-index)-=>-(-<div-key={index}-className="relative">-<div-className="w-full-bg-gray-100-rounded-full-h-8">-<div-className="bg-blue-500-h-8-rounded-full"-style={{-width:-`${(poll.votes[index]-/-poll.votes.reduce((a,-b)-=>-a-+-b,-0))-*-100}%`-}}-/>-<div-className="absolute-inset-0-flex-justify-between-items-center-px-3-text-sm">-<span>{option}</span>-<span>{poll.votes[index]}-votes</span>-</div>-</div>-</div>-))}-</div>-</div>-);-//-Screen-Components-const-HomeScreen-=-()-=>-(-<div-className="p-4">-<div-className="flex-justify-between-items-center-mb-6">-<h2-className="text-2xl-font-bold">DeshSevaCheck</h2>-<Bell-className="w-6-h-6-text-gray-600"-/>-</div>-<div-className="flex-items-center-bg-gray-100-rounded-lg-p-2-mb-6">-<Search-className="w-5-h-5-text-gray-500-mr-2"-/>-<input-className="bg-transparent-flex-1-outline-none"-placeholder="Search-promises,-leaders..."-/>-</div>-<div-className="flex-space-x-2-mb-4-overflow-x-auto">-<button-className="bg-blue-500-text-white-px-4-py-1-rounded-full-text-sm">All</button>-<button-className="bg-gray-200-text-gray-700-px-4-py-1-rounded-full-text-sm">Education</button>-<button-className="bg-gray-200-text-gray-700-px-4-py-1-rounded-full-text-sm">Healthcare</button>-<button-className="bg-gray-200-text-gray-700-px-4-py-1-rounded-full-text-sm">Infrastructure</button>-</div>-<div-className="space-y-4">-{promises.map(promise-=>-(-<PromiseCard-key={promise.id}-promise={promise}-/>-))}-</div>-</div>-);-const-LeadersScreen-=-()-=>-(-<div-className="p-4">-<h2-className="text-2xl-font-bold-mb-6">Political-Leaders</h2>-<div-className="space-y-4">-{leaders.map(leader-=>-(-<LeaderCard-key={leader.id}-leader={leader}-/>-))}-</div>-</div>-);-const-NewsScreen-=-()-=>-(-<div-className="p-4">-<h2-className="text-2xl-font-bold-mb-6">Latest-Updates</h2>-<div-className="space-y-4">-{news.map(item-=>-(-<NewsCard-key={item.id}-news={item}-/>-))}-</div>-</div>-);-const-PollsScreen-=-()-=>-(-<div-className="p-4">-<h2-className="text-2xl-font-bold-mb-6">Public-Polls</h2>-<div-className="space-y-4">-{polls.map(poll-=>-(-<PollCard-key={poll.id}-poll={poll}-/>-))}-</div>-</div>-);-const-ProfileScreen-=-()-=>-(-<div-className="p-4">-<h2-className="text-2xl-font-bold-mb-6">My-Profile</h2>-<div-className="bg-white-p-4-rounded-lg-shadow-sm">-<div-className="flex-items-center-space-x-4-mb-6">-<img-src="/api/placeholder/80/80"-alt="Profile"-className="w-20-h-20-rounded-full"-/>-<div>-<h3-className="font-semibold-text-lg">John-Citizen</h3>-<p-className="text-sm-text-gray-600">Active-since-Jan-2024</p>-</div>-</div>-<div-className="space-y-4">-<div-className="flex-items-center-justify-between-p-3-bg-gray-50-rounded">-<span-className="flex-items-center">-<ThumbsUp-className="w-5-h-5-mr-2"-/>-Upvoted-Promises-</span>-<span>24</span>-</div>-<div-className="flex-items-center-justify-between-p-3-bg-gray-50-rounded">-<span-className="flex-items-center">-<MessageCircle-className="w-5-h-5-mr-2"-/>-Comments-</span>-<span>156</span>-</div>-<div-className="flex-items-center-justify-between-p-3-bg-gray-50-rounded">-<span-className="flex-items-center">-<Award-className="w-5-h-5-mr-2"-/>-Achievement-Points-</span>-<span>850</span>-</div>-</div>-</div>-</div>-);-return-(-<div-className="max-w-md-mx-auto-h-[600px]-bg-gray-50-flex-flex-col">-<div-className="flex-1-overflow-y-auto">-{activeScreen-===-'home'-&&-<HomeScreen-/>}-{activeScreen-===-'leaders'-&&-<LeadersScreen-/>}-{activeScreen-===-'news'-&&-<NewsScreen-/>}-{activeScreen-===-'polls'-&&-<PollsScreen-/>}-{activeScreen-===-'profile'-&&-<ProfileScreen-/>}-</div>-<div-className="bg-white-border-t-flex-justify-around-p-4">-<button-className={`flex-flex-col-items-center-${activeScreen-===-'home'-?-'text-blue-500'-:-'text-gray-500'}`}-onClick={()-=>-setActiveScreen('home')}->-<Home-className="w-6-h-6"-/>-<span-className="text-xs-mt-1">Home</span>-</button>-<button-className={`flex-flex-col-items-center-${activeScreen-===-'leaders'-?-'text-blue-500'-:-'text-gray-500'}`}-onClick={()-=>-setActiveScreen('leaders')}->-<Users-className="w-6-h-6"-/>-<span-className="text-xs-mt-1">Leaders</span>-</button>-<button-className={`flex-flex-col-items-center-${activeScreen-===-'news'-?-'text-blue-500'-:-'text-gray-500'}`}-onClick={()-=>-setActiveScreen('news')}->-<Newspaper-className="w-6-h-6"-/>-<span-className="text-xs-mt-1">News</span>-</button>-<button-className={`flex-flex-col-items-center-${activeScreen-===-'polls'-?-'text-blue-500'-:-'text-gray-500'}`}-onClick={()-=>-setActiveScreen('polls')}->-<TrendingUp-className="w-6-h-6"-/>-<span-className="text-xs-mt-1">Polls</span>-</button>-<button-className={`flex-flex-col-items-center-${activeScreen-===-'profile'-?-'text-blue-500'-:-'text-gray-500'}`}-onClick={()-=>-setActiveScreen('profile')}->-<User-className="w-6-h-6"-/>-<span-className="text-xs-mt-1">Profile</span>-</button>-</div>-</div>-);-};-export-default-DeshSevaCheck;