From 3f6b112274f50cb3b53f8b90493fb3403cea33d6 Mon Sep 17 00:00:00 2001
From: Eric Lay <ericlay@noreply.ericlay.online>
Date: Wed, 11 Mar 2026 08:51:19 -0500
Subject: [PATCH] Add src/pages/MyProfile.jsx

---
 src/pages/MyProfile.jsx | 153 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 src/pages/MyProfile.jsx

diff --git a/src/pages/MyProfile.jsx b/src/pages/MyProfile.jsx
new file mode 100644
index 0000000..b8b6a84
--- /dev/null
+++ b/src/pages/MyProfile.jsx
@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import { Store, MapPin, Lock, Eye, EyeOff, Info } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import Sidebar from "@/components/dashboard/Sidebar";
+import TopBar from "@/components/dashboard/TopBar";
+
+export default function MyProfile() {
+  const [showCurrentPw, setShowCurrentPw] = useState(false);
+  const [showNewPw, setShowNewPw] = useState(false);
+
+  const stored = sessionStorage.getItem("demo_user");
+  const userData = stored ? JSON.parse(stored) : {
+    full_name: "Radoslav Nedyalkov",
+    email: "Eric@rscentral.org",
+    store_id: "AA1112",
+    store_name: "Radi Box N Ship",
+  };
+
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      <Sidebar activePage="MyProfile" />
+
+      <div className="flex-1 ml-[220px]">
+        <TopBar breadcrumb="Member Management" userData={userData} />
+
+        <main className="p-6 max-w-4xl">
+          {/* Page Header */}
+          <div className="mb-6">
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-bold text-gray-900">Member Management</h1>
+              <div className="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center cursor-help">
+                <Info className="w-3 h-3" />
+              </div>
+            </div>
+            <p className="text-sm text-gray-500 mt-1">View and manage your store profile information.</p>
+          </div>
+
+          {/* Store Information */}
+          <div className="bg-white rounded-xl border border-gray-200 p-6 mb-5">
+            <div className="flex items-center gap-2 mb-5">
+              <Store className="w-5 h-5 text-[#1a5276]" />
+              <h2 className="font-bold text-gray-800">Store Information</h2>
+              <div className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 text-[10px] flex items-center justify-center cursor-help">i</div>
+            </div>
+            <div className="grid grid-cols-2 gap-x-12 gap-y-4">
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Store Name</p>
+                <p className="text-sm text-gray-800">{userData.store_name || "Radi Box N Ship"}</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Store Number</p>
+                <p className="text-sm text-gray-800">{userData.store_id || "AA1112"}</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Franchisee Name</p>
+                <p className="text-sm text-gray-800">{userData.full_name || "Radoslav Nedyalkov"}</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Email</p>
+                <p className="text-sm text-[#3498db]">{userData.email || "Eric@rscentral.org"}</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Phone</p>
+                <p className="text-sm text-[#3498db]">510.579.0473</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-[#1a5276] mb-1">Status</p>
+                <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100">Active</Badge>
+              </div>
+            </div>
+          </div>
+
+          {/* Address */}
+          <div className="bg-white rounded-xl border border-gray-200 p-6 mb-5">
+            <div className="flex items-center gap-2 mb-5">
+              <MapPin className="w-5 h-5 text-[#3498db]" />
+              <h2 className="font-bold text-gray-800">Address</h2>
+            </div>
+            <div className="grid grid-cols-2 gap-x-12 gap-y-4">
+              <div>
+                <p className="text-xs font-semibold text-gray-500 mb-1">Street</p>
+                <p className="text-sm text-gray-800">1939 W. Manchester Ave.</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-500 mb-1">City</p>
+                <p className="text-sm text-gray-800">Los Angeles</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-500 mb-1">State</p>
+                <p className="text-sm text-gray-800">CA</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-500 mb-1">Zip Code</p>
+                <p className="text-sm text-gray-800">90047</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Change Password */}
+          <div className="bg-white rounded-xl border border-gray-200 p-6">
+            <div className="flex items-center gap-2 mb-5">
+              <Lock className="w-5 h-5 text-[#1a5276]" />
+              <h2 className="font-bold text-gray-800">Change Password</h2>
+              <div className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 text-[10px] flex items-center justify-center cursor-help">i</div>
+            </div>
+            <div className="grid grid-cols-2 gap-8">
+              <div className="bg-amber-50 rounded-xl p-4 border border-amber-100">
+                <ul className="space-y-2 text-sm">
+                  <li className="text-red-500">• Password must be at least 8 characters long.</li>
+                  <li className="text-red-500">• Password must contain at least one uppercase character.</li>
+                  <li className="text-red-500">• Password must contain at least one lowercase character.</li>
+                </ul>
+              </div>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-xs font-semibold text-gray-500 mb-1.5">Current Password</p>
+                  <div className="relative">
+                    <Input
+                      type={showCurrentPw ? "text" : "password"}
+                      className="pr-10 h-10 rounded-lg"
+                    />
+                    <button
+                      onClick={() => setShowCurrentPw(!showCurrentPw)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    >
+                      {showCurrentPw ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-xs font-semibold text-gray-500 mb-1.5">New Password</p>
+                  <div className="relative">
+                    <Input
+                      type={showNewPw ? "text" : "password"}
+                      className="pr-10 h-10 rounded-lg"
+                    />
+                    <button
+                      onClick={() => setShowNewPw(!showNewPw)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    >
+                      {showNewPw ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file