feat: portal redesign — shadcn/ui, React Query, Zod, isolated portals

Foundation:
- CLAUDE.md with full coding rules (tech stack, patterns, redirect rules)
- Install @tanstack/react-query, zod, react-hook-form, shadcn/ui deps
- CSS variables design system (Tailwind v4 + tw-animate-css)
- Shared components: Button, Input, Label, Card, Badge, Separator, Form
- PortalLoginShell: two-column login layout (branding left, form right)
- PortalNav: shared sidebar nav used by all portals
- ReactQueryProvider in root layout
- api-client.ts: typed fetch wrapper (no raw fetch in components)

Portal isolation:
- Sidebar now returns null for all non-chapter routes; portals own their layout
- Admin layout: auth guard + PortalNav (slate accent)
- Org layout: auth guard + PortalNav (violet accent)
- Member layout: server-side cookie check → MemberNav client component
- Chapter admin sidebar: PortalNav (blue accent)

Login pages (all use react-hook-form + Zod + PortalLoginShell):
- /login → defaults next to /search (was /) — fixes redirect bug
- /admin/login → replaces /admin
- /org/login → replaces /org
- /member-login → two-step phone+OTP with proper form validation

Portal selector (/) redesigned with accent border-left cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-20 18:01:27 +05:30
parent f8b7afcc38
commit d7b5988858
27 changed files with 2306 additions and 521 deletions
+4 -60
View File
@@ -1,71 +1,15 @@
import Link from 'next/link';
import { getMemberToken } from '../_lib/api';
import { redirect } from 'next/navigation';
const NAV = [
{ href: '/my', label: 'Dashboard' },
{ href: '/my/ask', label: 'Ask AI' },
{ href: '/my/knowledge', label: 'Knowledge' },
{ href: '/my/digest', label: 'Digest' },
{ href: '/my/events', label: 'Events' },
{ href: '/my/seva', label: 'Seva & Points' },
{ href: '/my/circles', label: 'Circles' },
{ href: '/my/directory', label: 'Directory' },
{ href: '/my/memories', label: 'Memories' },
{ href: '/my/groups', label: 'My Groups' },
{ href: '/my/settings', label: 'Settings' },
];
import { MemberNav } from './member-nav';
export default async function MemberLayout({ children }: { children: React.ReactNode }) {
const token = await getMemberToken();
if (!token) redirect('/member-login');
return (
<div className="flex h-full -m-6 min-h-screen">
{/* Left sidebar */}
<nav className="w-[220px] shrink-0 bg-white border-r border-gray-200 flex flex-col p-4">
<span className="font-bold text-base mb-6 px-2">TOWER</span>
<div className="flex flex-col gap-1 flex-1">
{NAV.map((item) => (
<Link
key={item.href}
href={item.href}
className="rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
>
{item.label}
</Link>
))}
</div>
<div className="border-t border-gray-200 pt-3 mt-3">
<p className="px-3 text-xs text-gray-400 uppercase tracking-wide">Member portal</p>
</div>
</nav>
{/* Main content */}
<main className="flex-1 overflow-auto p-6 bg-gray-50">
{children}
</main>
{/* Right activity rail */}
<aside className="w-[280px] shrink-0 bg-white border-l border-gray-200 p-4 hidden lg:block">
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-4">Quick actions</p>
<div className="flex flex-col gap-2">
<Link
href="/my/settings"
className="text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md hover:bg-gray-50"
>
Privacy settings
</Link>
<form method="POST" action="/api/my/logout">
<button
type="submit"
className="w-full text-left text-sm text-red-500 hover:text-red-700 px-3 py-2 rounded-md hover:bg-red-50"
>
Sign out
</button>
</form>
</div>
</aside>
<div className="flex h-screen overflow-hidden -m-6">
<MemberNav />
<main className="flex-1 overflow-auto bg-muted/30 p-6">{children}</main>
</div>
);
}