andika/membership-fe
3
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend Revamp

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 14:46:16 +07:00
parent 79cebd205c
commit d8c1e133ac
14 changed files with 425 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/Profile.js
View File

@@ -69,52 +69,52 @@ const Profile = () => {
if (!profileData) {
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#6B708D]">Loading profile...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
My Profile
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your personal information below.
</p>
</div>
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
{/* Read-only Information */}
<div className="mb-8 pb-8 border-b border-[#EAE0D5]">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 flex items-center gap-2">
<User className="h-6 w-6 text-[#E07A5F]" />
<div className="mb-8 pb-8 border-b border-[#ddd8eb]">
<h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<User className="h-6 w-6 text-[#664fa3]" />
Account Information
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<p className="text-sm text-[#6B708D] mb-1">Email</p>
<p className="text-[#3D405B] font-medium">{profileData.email}</p>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-1">Status</p>
<p className="text-[#3D405B] font-medium capitalize">{profileData.status.replace('_', ' ')}</p>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
<p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-1">Role</p>
<p className="text-[#3D405B] font-medium capitalize">{profileData.role}</p>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
<p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-1">Date of Birth</p>
<p className="text-[#3D405B] font-medium">
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(profileData.date_of_birth).toLocaleDateString()}
</p>
</div>
@@ -125,7 +125,7 @@ const Profile = () => {
type="button"
onClick={() => setPasswordDialogOpen(true)}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#FFF3E0] rounded-full px-6 py-3"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6 py-3"
>
<Lock className="h-4 w-4 mr-2" />
Change Password
@@ -135,7 +135,7 @@ const Profile = () => {
{/* Editable Form */}
<form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Personal Information
</h2>
@@ -147,7 +147,7 @@ const Profile = () => {
name="first_name"
value={formData.first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="first-name-input"
/>
</div>
@@ -158,7 +158,7 @@ const Profile = () => {
name="last_name"
value={formData.last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="last-name-input"
/>
</div>
@@ -172,7 +172,7 @@ const Profile = () => {
type="tel"
value={formData.phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="phone-input"
/>
</div>
@@ -184,7 +184,7 @@ const Profile = () => {
name="address"
value={formData.address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="address-input"
/>
</div>
@@ -197,7 +197,7 @@ const Profile = () => {
name="city"
value={formData.city}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="city-input"
/>
</div>
@@ -208,7 +208,7 @@ const Profile = () => {
name="state"
value={formData.state}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="state-input"
/>
</div>
@@ -219,7 +219,7 @@ const Profile = () => {
name="zipcode"
value={formData.zipcode}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
data-testid="zipcode-input"
/>
</div>
@@ -228,7 +228,7 @@ const Profile = () => {
<Button
type="submit"
disabled={loading}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
data-testid="save-profile-button"
>
<Save className="h-5 w-5 mr-2" />