Memberpanel

package.json

@@ -33,7 +33,7 @@
         "leaflet.markercluster": "^1.5.3",
         "leva": "^0.10.1",
         "motion": "^12.29.0",
-        "next": "15.5.21",
+        "next": "15.5.24",
         "next-sitemap": "^4.2.3",
         "phone": "^3.1.70",
         "postal-code-validator": "^1.0.3",

src/app/volunteer_dashboard/panels/members/MemberBanner.module.css

@@ -0,0 +1,98 @@
+.headerTop {
+    border-radius: 0.75rem;
+    margin-top: -2rem;
+    margin-right: 0.9rem;
+    margin-bottom: 0.9rem;
+    margin-left: 0.9rem;
+    padding-top: 0.8rem;
+    padding-bottom: 0.9rem;
+    padding-inline: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    background: rgba(255, 255, 255, 0.84);
+    backdrop-filter: blur(16px) saturate(145%);
+    -webkit-backdrop-filter: blur(16px) saturate(145%);
+    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.11);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: space-between;
+}
+
+.cardStyle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.cardAvatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.5rem;
+    height: 4.5rem;
+    border-radius: 9999px;
+    border: 3px solid #fff;
+    background: #fff;
+    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
+}
+
+.userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.headerUserName {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.headerUserUsername {
+    margin: 0;
+    padding: 0;
+    color: #475569;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.roleList {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.rolePill {
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding-inline: 1rem;
+    padding-block: 0.45rem;
+    border-radius: 9999px;
+    white-space: nowrap;
+    color: rgba(15, 23, 42, 0.72);
+    background: rgba(15, 23, 42, 0.06);
+}
+
+.roleEmpty {
+    font-size: 0.82rem;
+    color: #64748b;
+}
+
+@media (max-width: 720px) {
+    .headerTop {
+        margin: -1.2rem 0.65rem 0.65rem;
+        padding-inline: 0.8rem;
+    }
+
+    .cardAvatar {
+        width: 4rem;
+        height: 4rem;
+    }
+
+    .headerUserName {
+        font-size: 1.1rem;
+    }
+}

src/app/volunteer_dashboard/panels/members/MemberBanner.tsx

@@ -0,0 +1,60 @@
+import styles from './MemberBanner.module.css'
+import { DiscordAvatar } from '@/components/common'
+import { TabBar, TabSpec } from '@/components/common/tab_bar/TabBar'
+import { Position, User, UserProfile } from '@/contracts/data'
+
+interface MemberBannerProps {
+    user: User
+    makeTitle: (user: User | UserProfile) => string
+    selectedTab: string
+    tabs: TabSpec[]
+    onTabChange: (key: string) => void
+    positions?: Position[]
+}
+
+export function MemberBanner({
+    user,
+    makeTitle,
+    selectedTab,
+    tabs,
+    onTabChange,
+    positions,
+}: MemberBannerProps) {
+    const userPositions = (positions ?? []).filter((p) =>
+        p.userIds.includes(user.id)
+    )
+
+    return (
+        <div className={styles.headerTop}>
+            <div className={styles.cardStyle}>
+                <div className={styles.cardAvatar}>
+                    <DiscordAvatar
+                        discordUserId={user.discordUsers?.[0]?.id}
+                        imageId={user.discordUsers?.[0]?.image}
+                        size={64}
+                    />
+                </div>
+                <div className={styles.userInfo}>
+                    <h1 className={styles.headerUserName}>{makeTitle(user)}</h1>
+                    <h2 className={styles.headerUserUsername}>
+                        {user.discordUsers?.[0]?.username
+                            ? `@${user.discordUsers[0].username}`
+                            : 'NOT FOUND'}
+                    </h2>
+                </div>
+            </div>
+            <div className={styles.roleList}>
+                {userPositions.length > 0 ? (
+                    userPositions.map((pos) => (
+                        <span key={pos.id} className={styles.rolePill}>
+                            {pos.name}
+                        </span>
+                    ))
+                ) : (
+                    <span className={styles.rolePill}>Community Member</span>
+                )}
+            </div>
+            <TabBar tabs={tabs} value={selectedTab} onChange={onTabChange} />
+        </div>
+    )
+}

src/app/volunteer_dashboard/panels/members/page.module.css

@@ -0,0 +1,124 @@
+.sidebarBg {
+    --navigation-stack-sidebar-bg: #f9fafb;
+    --navigation-stack-sidebar-padding: 0rem;
+    --navigation-stack-sidebar-gap: 0rem;
+}
+
+.backButton {
+    /* --back-button-color: #ff0202; */
+    --back-button-hover-color: rgba(255, 255, 255, 0.7);
+    margin-top: 0.5rem;
+    --sidebar-back-margin-bottom: -1rem;
+    position: relative;
+    z-index: 21;
+}
+
+.detailsHeader {
+    --banner-cover-height: 3.5rem;
+    --banner-cover-gradient:
+        radial-gradient(
+            circle at 18% 30%,
+            rgba(2, 132, 199, 0.24),
+            transparent 35%
+        ),
+        radial-gradient(
+            circle at 82% 20%,
+            rgba(41, 134, 204, 0.28),
+            transparent 40%
+        ),
+        linear-gradient(120deg, rgba(9, 34, 58, 0.96), rgba(27, 69, 104, 0.9));
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.95) 72%,
+        rgba(255, 255, 255, 0)
+    );
+
+    border-radius: 1rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -100rem;
+        left: 0;
+        right: 0;
+        height: 100rem;
+        background: var(--banner-cover-gradient);
+        background-size: 100% var(--banner-cover-height);
+        background-position: 0 100%;
+        background-repeat: repeat-y;
+        pointer-events: none;
+        z-index: -1;
+    }
+}
+
+.bannerCover {
+    height: var(--banner-cover-height);
+    background: var(--banner-cover-gradient);
+    background-size: 100% var(--banner-cover-height);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+}
+
+.detailsPane {
+    flex: 1;
+    overflow-y: auto;
+    background: linear-gradient(
+        135deg,
+        rgba(248, 250, 252, 0.98) 0%,
+        rgba(241, 245, 249, 0.98) 38%,
+        rgba(14, 165, 233, 0.04) 100%
+    );
+    z-index: 0;
+}
+
+.detailsContent {
+    margin: 1rem;
+}
+
+.emptyState {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    color: rgba(15, 23, 42, 0.5);
+    font-weight: 500;
+}
+
+.errorText {
+    color: #ef4444;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+}
+
+.filterTagsWrapper {
+    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
+
+    :global([data-sidebar-collapsed='true']) & {
+        display: none;
+    }
+}
+
+.filterMenu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 12rem;
+}
+
+.nestedFilterMenu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 12rem;
+}