beautify: quick dashboard adjustments
This commit is contained in:
DeathKaioken
parent
eab249ab1f
commit
7625ded0e9
@ -124,23 +124,19 @@ export default function QuickActionDashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="relative min-h-screen w-full px-3 sm:px-4 py-10 bg-white">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Removed dark background layers (pattern, blur, gradient) for a clean white background */}
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
{/* Title */}
|
||||||
<div className="max-w-6xl mx-auto">
|
<div className="mb-8">
|
||||||
{/* Welcome */}
|
<h1 className="text-3xl font-bold text-gray-900">
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 tracking-tight">
|
|
||||||
Welcome{isClient && user?.firstName ? `, ${user.firstName}` : ''}!
|
Welcome{isClient && user?.firstName ? `, ${user.firstName}` : ''}!
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm sm:text-base text-gray-600 font-medium mt-2">
|
<p className="text-sm sm:text-base text-gray-600 mt-2">
|
||||||
{isClient && user?.userType === 'company' ? 'Company Account' : 'Personal Account'}
|
{isClient && user?.userType === 'company' ? 'Company Account' : 'Personal Account'}
|
||||||
</p>
|
</p>
|
||||||
{loading && (
|
{loading && <p className="text-xs text-gray-500 mt-1">Loading status...</p>}
|
||||||
<p className="text-xs text-gray-500 mt-1">Loading status...</p>
|
|
||||||
)}
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="mt-4 max-w-md mx-auto rounded-md bg-red-50 border border-red-200 px-4 py-3">
|
<div className="mt-4 max-w-md rounded-md bg-red-50 border border-red-200 px-4 py-3">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
||||||
@ -168,165 +164,155 @@ export default function QuickActionDashboardPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Outer container card mimic (like screenshot) */}
|
{/* Cards */}
|
||||||
<section className="bg-[#f8f9fc] rounded-xl shadow-sm ring-1 ring-black/5">
|
<div className="space-y-8">
|
||||||
<div className="p-4 sm:p-6">
|
{/* Status Overview */}
|
||||||
<div className="bg-white rounded-xl shadow-sm ring-1 ring-black/5 p-5 sm:p-8 space-y-12">
|
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5 sm:p-8">
|
||||||
{/* Status Overview */}
|
<h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-5">
|
||||||
<div>
|
Status Overview
|
||||||
<h2 className="text-sm sm:text-base font-semibold text-[#112c55] mb-5">
|
</h2>
|
||||||
Status Overview
|
<div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
|
||||||
</h2>
|
{statusItems.map(item => {
|
||||||
<div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
|
const CompleteIcon = item.complete ? CheckCircleIcon : XCircleIcon
|
||||||
{statusItems.map(item => {
|
return (
|
||||||
const CompleteIcon = item.complete ? CheckCircleIcon : XCircleIcon
|
<div
|
||||||
return (
|
key={item.key}
|
||||||
<div
|
className={`rounded-lg px-4 py-6 flex flex-col items-center text-center border transition-colors ${
|
||||||
key={item.key}
|
item.complete ? 'bg-emerald-50 border-emerald-100' : 'bg-rose-50 border-rose-100'
|
||||||
className={`rounded-lg px-4 py-6 flex flex-col items-center text-center border transition-colors ${
|
|
||||||
item.complete ? 'bg-emerald-50 border-emerald-100' : 'bg-rose-50 border-rose-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<CompleteIcon
|
|
||||||
className={`h-6 w-6 mb-4 ${item.complete ? 'text-emerald-600' : 'text-rose-600'}`}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={`text-xs font-medium uppercase tracking-wide ${
|
|
||||||
item.complete ? 'text-emerald-700' : 'text-rose-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={`mt-1 text-xs font-semibold ${
|
|
||||||
item.complete ? 'text-emerald-600' : 'text-rose-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.description}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
<div className="h-px w-full bg-gray-200" />
|
|
||||||
|
|
||||||
{/* Quick Actions */}
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 mb-5">
|
|
||||||
<span className="inline-flex items-center justify-center h-7 w-7 rounded-full bg-blue-100 text-blue-600 text-sm font-semibold">
|
|
||||||
i
|
|
||||||
</span>
|
|
||||||
<h2 className="text-sm sm:text-base font-semibold text-[#112c55]">
|
|
||||||
Quick Actions
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
|
|
||||||
{/* Email Verification */}
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<button
|
|
||||||
onClick={handleVerifyEmail}
|
|
||||||
disabled={emailVerified}
|
|
||||||
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
|
||||||
emailVerified
|
|
||||||
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
|
||||||
: 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<EnvelopeOpenIcon className="h-6 w-6 mb-2" />
|
|
||||||
{emailVerified ? 'Email Verified' : 'Verify Email'}
|
|
||||||
</button>
|
|
||||||
{/* NEW: resend feedback (only when not verified) */}
|
|
||||||
{!emailVerified && (
|
|
||||||
<p className="mt-2 text-[11px] text-[#112c55] text-center">
|
|
||||||
{resendRemainingSec > 0
|
|
||||||
? `Resend available in ${formatMmSs(resendRemainingSec)}`
|
|
||||||
: 'You can request a new code now'}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ID Upload */}
|
|
||||||
<button
|
|
||||||
onClick={handleUploadId}
|
|
||||||
disabled={!canUploadId || idUploaded}
|
|
||||||
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
|
||||||
idUploaded
|
|
||||||
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
|
||||||
: canUploadId
|
|
||||||
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
|
||||||
: 'bg-gray-200 text-gray-500 border-gray-200 cursor-not-allowed'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<ArrowUpOnSquareIcon className="h-6 w-6 mb-2" />
|
<CompleteIcon
|
||||||
{idUploaded ? 'ID Uploaded' : 'Upload ID Document'}
|
className={`h-6 w-6 mb-4 ${item.complete ? 'text-emerald-600' : 'text-rose-600'}`}
|
||||||
</button>
|
/>
|
||||||
|
<span
|
||||||
{/* Additional Info */}
|
className={`text-xs font-medium uppercase tracking-wide ${
|
||||||
<button
|
item.complete ? 'text-emerald-700' : 'text-rose-700'
|
||||||
onClick={handleCompleteInfo}
|
|
||||||
disabled={!canCompleteInfo || additionalInfo}
|
|
||||||
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
|
||||||
additionalInfo
|
|
||||||
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
|
||||||
: canCompleteInfo
|
|
||||||
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
|
||||||
: 'bg-gray-200 text-gray-500 border-gray-200 cursor-not-allowed'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<PencilSquareIcon className="h-6 w-6 mb-2" />
|
|
||||||
{additionalInfo ? 'Profile Completed' : 'Complete Profile'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Sign Contract */}
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<button
|
|
||||||
onClick={handleSignContract}
|
|
||||||
disabled={!canSignContract || contractSigned}
|
|
||||||
className={`flex flex-col flex-1 items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
|
||||||
contractSigned
|
|
||||||
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
|
||||||
: canSignContract
|
|
||||||
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
|
||||||
: 'bg-gray-300 text-gray-600 border-gray-300 cursor-not-allowed'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<ClipboardDocumentCheckIcon className="h-6 w-6 mb-2" />
|
{item.label}
|
||||||
{contractSigned ? 'Contract Signed' : 'Sign Contract'}
|
</span>
|
||||||
</button>
|
<span
|
||||||
{!canSignContract && !contractSigned && (
|
className={`mt-1 text-xs font-semibold ${
|
||||||
<p className="mt-2 text-[11px] text-red-600 leading-snug text-center">
|
item.complete ? 'text-emerald-600' : 'text-rose-600'
|
||||||
Complete previous steps (email, ID, profile) before signing the contract.
|
}`}
|
||||||
</p>
|
>
|
||||||
)}
|
{item.description}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5 sm:p-8">
|
||||||
|
<div className="flex items-center gap-2 mb-5">
|
||||||
|
<span className="inline-flex items-center justify-center h-7 w-7 rounded-full bg-blue-100 text-blue-600 text-sm font-semibold">
|
||||||
|
i
|
||||||
|
</span>
|
||||||
|
<h2 className="text-sm sm:text-base font-semibold text-gray-900">
|
||||||
|
Quick Actions
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
{/* Email Verification */}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<button
|
||||||
|
onClick={handleVerifyEmail}
|
||||||
|
disabled={emailVerified}
|
||||||
|
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
||||||
|
emailVerified
|
||||||
|
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
||||||
|
: 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<EnvelopeOpenIcon className="h-6 w-6 mb-2" />
|
||||||
|
{emailVerified ? 'Email Verified' : 'Verify Email'}
|
||||||
|
</button>
|
||||||
|
{/* NEW: resend feedback (only when not verified) */}
|
||||||
|
{!emailVerified && (
|
||||||
|
<p className="mt-2 text-[11px] text-[#112c55] text-center">
|
||||||
|
{resendRemainingSec > 0
|
||||||
|
? `Resend available in ${formatMmSs(resendRemainingSec)}`
|
||||||
|
: 'You can request a new code now'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Divider */}
|
{/* ID Upload */}
|
||||||
<div className="h-px w-full bg-gray-200" />
|
<button
|
||||||
|
onClick={handleUploadId}
|
||||||
|
disabled={!canUploadId || idUploaded}
|
||||||
|
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
||||||
|
idUploaded
|
||||||
|
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
||||||
|
: canUploadId
|
||||||
|
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
||||||
|
: 'bg-gray-200 text-gray-500 border-gray-200 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ArrowUpOnSquareIcon className="h-6 w-6 mb-2" />
|
||||||
|
{idUploaded ? 'ID Uploaded' : 'Upload ID Document'}
|
||||||
|
</button>
|
||||||
|
|
||||||
{/* Latest News */}
|
{/* Additional Info */}
|
||||||
<div>
|
<button
|
||||||
<h2 className="text-sm sm:text-base font-semibold text-[#112c55] mb-4">
|
onClick={handleCompleteInfo}
|
||||||
Latest News
|
disabled={!canCompleteInfo || additionalInfo}
|
||||||
</h2>
|
className={`relative flex flex-col items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
||||||
<ul className="list-disc pl-5 space-y-2 text-sm text-[#1b3358]">
|
additionalInfo
|
||||||
<li>
|
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
||||||
<span className="font-medium text-[#8D6B1D]">New:</span> Referral system
|
: canCompleteInfo
|
||||||
launch – invite friends and earn rewards.
|
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
||||||
</li>
|
: 'bg-gray-200 text-gray-500 border-gray-200 cursor-not-allowed'
|
||||||
<li>
|
}`}
|
||||||
Profile completion unlocks more features. Keep progressing!
|
>
|
||||||
</li>
|
<PencilSquareIcon className="h-6 w-6 mb-2" />
|
||||||
</ul>
|
{additionalInfo ? 'Profile Completed' : 'Complete Profile'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Sign Contract */}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<button
|
||||||
|
onClick={handleSignContract}
|
||||||
|
disabled={!canSignContract || contractSigned}
|
||||||
|
className={`flex flex-col flex-1 items-center justify-center rounded-lg px-4 py-5 text-center border font-medium text-sm transition-all ${
|
||||||
|
contractSigned
|
||||||
|
? 'bg-emerald-50 border-emerald-100 text-emerald-600 cursor-default'
|
||||||
|
: canSignContract
|
||||||
|
? 'bg-blue-600 hover:bg-blue-500 text-white border-blue-600 shadow'
|
||||||
|
: 'bg-gray-300 text-gray-600 border-gray-300 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ClipboardDocumentCheckIcon className="h-6 w-6 mb-2" />
|
||||||
|
{contractSigned ? 'Contract Signed' : 'Sign Contract'}
|
||||||
|
</button>
|
||||||
|
{!canSignContract && !contractSigned && (
|
||||||
|
<p className="mt-2 text-[11px] text-red-600 leading-snug text-center">
|
||||||
|
Complete previous steps (email, ID, profile) before signing the contract.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
{/* Latest News */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5 sm:p-8">
|
||||||
|
<h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-4">
|
||||||
|
Latest News
|
||||||
|
</h2>
|
||||||
|
<ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
|
||||||
|
<li>
|
||||||
|
<span className="font-medium text-[#8D6B1D]">New:</span> Referral system
|
||||||
|
launch – invite friends and earn rewards.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Profile completion unlocks more features. Keep progressing!
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user