From c5c55f72b1a708edc7bf3089ba22941d85769080 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Sun, 25 May 2025 17:51:37 +0200
Subject: [PATCH] feat: preview page for account management

---
 web/src/pages/Index/index.tsx | 128 +++++++++++++++++++++++++++++-----
 1 file changed, 109 insertions(+), 19 deletions(-)

diff --git a/web/src/pages/Index/index.tsx b/web/src/pages/Index/index.tsx
index c87ac2d..9e05b47 100644
--- a/web/src/pages/Index/index.tsx
+++ b/web/src/pages/Index/index.tsx
@@ -4,7 +4,7 @@ import { type FC } from "react";
 // import darkOverlay from "@/assets/dark-overlay.jpg";
 
 import { Card, CardContent } from "@/components/ui/card";
-import AccountList from "@/feature/AccountList";
+import { ChevronDown, ChevronRight } from "lucide-react";
 
 const IndexPage: FC = () => {
   // console.log(overlay);
@@ -14,29 +14,119 @@ const IndexPage: FC = () => {
       // style={{ backgroundImage: `url(${overlay})` }}
     >
       <div className="relative z-10 flex items-center justify-center min-h-screen">
-        <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
-          <div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
-            <div className="flex flex-col items-center flex-1">
-              <img
-                src="/icon.png"
-                alt="icon"
-                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
-              />
+        <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:max-h-[calc(100vh-70px)] overflow-y-auto sm:min-h-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md">
+          <div className="flex flex-col items-center sm:pt-0 relative">
+            <div className="flex flex-row items-center absolute left-4 top-4">
+              <img src="/icon.png" alt="icon" className="w-6 h-6" />
 
-              <div className="px-4 sm:mt-4 mt-8">
-                <h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
-                  Select Account
-                </h2>
-                <h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
-                  Choose one of the accounts below in order to proceed to home
-                  lab services and tools.
-                </h4>
+              <div className="ml-2">
+                <p className="text-sm text-gray-600 text-left dark:text-gray-500">
+                  Home Guard
+                </p>
               </div>
             </div>
 
             {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
-            <CardContent className="w-full space-y-4 flex-1">
-              <AccountList />
+            <CardContent className="w-full space-y-4 flex-1" spacing={false}>
+              <div className="flex flex-col w-full items-center gap-2 dark:bg-black/70 bg-white/70 shadow-md shadow-gray-300 dark:shadow-gray-700">
+                <div className="flex flex-col items-center gap-2 p-7 pt-14">
+                  <div className="w-24 h-24 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
+                    {/* <User size={64} /> */}
+                    <img
+                      className="w-full h-full"
+                      src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
+                      alt="profile pic"
+                    />
+                  </div>
+                  <h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
+                    Amir Adal
+                  </h1>
+                  <div className="flex flex-row items-center gap-2 mr-[-10px] select-none">
+                    <p className="text-gray-600 dark:text-gray-500">
+                      qwer.009771@gmail.com
+                    </p>
+                    <div className="text-gray-600 dark:text-gray-500">
+                      <ChevronDown size={18} />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar">
+                  <div className="flex-shrink-0 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-4 border-b-blue-500 text-blue-500 cursor-pointer select-none whitespace-nowrap">
+                    Home
+                  </div>
+
+                  <div className="flex-shrink-0 px-4 py-2 min-w-[140px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-0 text-gray-500 cursor-pointer select-none whitespace-nowrap">
+                    Personal Info
+                  </div>
+
+                  <div className="flex-shrink-0 px-4 py-2 min-w-[180px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-0 text-gray-500 cursor-pointer select-none whitespace-nowrap">
+                    Data & Personalization
+                  </div>
+                </div>
+              </div>
+              <div className="p-4">
+                <h1 className="dark:text-gray-200 text-gray-800 text-2xl">
+                  Your profile info in Home services
+                </h1>
+
+                <p className="text-gray-500 text-sm mt-2">
+                  Personal info and options to manage it. You can make some of
+                  this info, like your contact details, visible to others so
+                  they can reach you easily. You can also see a summary of your
+                  profiles.
+                </p>
+
+                <div className="border dark:border-gray-800 border-gray-300 p-4 rounded mt-4">
+                  <h3 className="dark:text-gray-300 text-gray-800">
+                    Basic info
+                  </h3>
+                  <p className="text-gray-500 text-sm mt-2 mb-4">
+                    Some info may be visible to other services and tools using
+                    Home Guard.{" "}
+                    <a href="#" className="text-blue-500">
+                      Learn more
+                    </a>
+                  </p>
+
+                  {/* Profile Picture */}
+                  <div className="flex flex-row items-center justify-between px-2 p-4 border-b gap-2 dark:border-b-gray-800 border-b-gray-100">
+                    <div className="flex flex-col items-start gap-2">
+                      <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
+                        Profile picture
+                      </p>
+                      <p className="text-sm dark:text-gray-500 text-gray-600">
+                        Add a profile picture to personalize your account
+                      </p>
+                    </div>
+                    <div>
+                      <div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
+                        <img
+                          className="w-full h-full"
+                          src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
+                          alt="profile pic"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Name */}
+                  <div className="flex flex-row items-center justify-between px-2 p-4 border-b dark:border-b-gray-800 border-b-gray-100">
+                    <div className="flex flex-col items-start gap-2">
+                      <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
+                        Name
+                      </p>
+                      <p className="text dark:text-gray-200 text-gray-800">
+                        Amir Adal
+                      </p>
+                    </div>
+                    <div>
+                      <div className="text-gray-500">
+                        <ChevronRight size={26} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </CardContent>
           </div>
         </Card>