Add src/pages/MyProfile.jsx
This commit is contained in:
parent
3d7f4d12d2
commit
3f6b112274
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue