From 7625ded0e9dde15d3644efeff08df39b65e1c940 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Thu, 16 Oct 2025 15:00:12 +0200
Subject: [PATCH] beautify: quick dashboard adjustments

---
 src/app/quickaction-dashboard/page.tsx | 306 ++++++++++++-------------
 1 file changed, 146 insertions(+), 160 deletions(-)

diff --git a/src/app/quickaction-dashboard/page.tsx b/src/app/quickaction-dashboard/page.tsx
index 5590b6f..478d2be 100644
--- a/src/app/quickaction-dashboard/page.tsx
+++ b/src/app/quickaction-dashboard/page.tsx
@@ -124,23 +124,19 @@ export default function QuickActionDashboardPage() {
 
   return (
     <PageLayout>
-      <div className="relative min-h-screen w-full px-3 sm:px-4 py-10 bg-white">
-        {/* Removed dark background layers (pattern, blur, gradient) for a clean white background */}
-
-        <div className="max-w-6xl mx-auto">
-          {/* Welcome */}
-          <div className="text-center mb-8">
-            <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 tracking-tight">
+      <div className="min-h-screen bg-gray-50">
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {/* Title */}
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-gray-900">
               Welcome{isClient && user?.firstName ? `, ${user.firstName}` : ''}!
             </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'}
             </p>
-            {loading && (
-              <p className="text-xs text-gray-500 mt-1">Loading status...</p>
-            )}
+            {loading && <p className="text-xs text-gray-500 mt-1">Loading status...</p>}
             {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-shrink-0">
                     <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>
 
-          {/* Outer container card mimic (like screenshot) */}
-          <section className="bg-[#f8f9fc] rounded-xl shadow-sm ring-1 ring-black/5">
-            <div className="p-4 sm:p-6">
-              <div className="bg-white rounded-xl shadow-sm ring-1 ring-black/5 p-5 sm:p-8 space-y-12">
-                {/* Status Overview */}
-                <div>
-                  <h2 className="text-sm sm:text-base font-semibold text-[#112c55] mb-5">
-                    Status Overview
-                  </h2>
-                  <div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
-                    {statusItems.map(item => {
-                      const CompleteIcon = item.complete ? CheckCircleIcon : XCircleIcon
-                      return (
-                        <div
-                          key={item.key}
-                          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'
+          {/* Cards */}
+          <div className="space-y-8">
+            {/* Status Overview */}
+            <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-5">
+                Status Overview
+              </h2>
+              <div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
+                {statusItems.map(item => {
+                  const CompleteIcon = item.complete ? CheckCircleIcon : XCircleIcon
+                  return (
+                    <div
+                      key={item.key}
+                      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'
                       }`}
                     >
-                      <ArrowUpOnSquareIcon className="h-6 w-6 mb-2" />
-                      {idUploaded ? 'ID Uploaded' : 'Upload ID Document'}
-                    </button>
-
-                    {/* Additional Info */}
-                    <button
-                      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'
+                      <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'
                         }`}
                       >
-                        <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>
-                      )}
+                        {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>
+            </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>
 
-                {/* Divider */}
-                <div className="h-px w-full bg-gray-200" />
+                {/* 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" />
+                  {idUploaded ? 'ID Uploaded' : 'Upload ID Document'}
+                </button>
 
-                {/* Latest News */}
-                <div>
-                  <h2 className="text-sm sm:text-base font-semibold text-[#112c55] mb-4">
-                    Latest News
-                  </h2>
-                  <ul className="list-disc pl-5 space-y-2 text-sm text-[#1b3358]">
-                    <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>
+                {/* Additional Info */}
+                <button
+                  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" />
+                    {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>
-          </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>
     </PageLayout>
   )