feat: isolate all four portals with route groups + polished design system

Fix blank /org/login (and /admin/login): the guarded portal layout was wrapping its own login route, rendering null when unauthenticated. Move each portal's authed pages into a (authed)/(chapter) route group so login pages live outside the guard. Structure: - app/(chapter)/* — chapter admin pages + guarded layout (was root-level) - app/org/(authed)/* — org pages + guarded layout; /org/login now free - app/admin/(authed)/* — admin pages + guarded layout; /admin/login free - Root layout slimmed to providers only (no shared sidebar) - Convert moved files' relative imports to @/app alias Design system: - PortalShell: shared sidebar shell (brand mark, themed active nav with accent bar, avatar dropdown user menu, loading skeletons) - portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald) - PortalLoginShell redesigned: two-column with gradient branding panel, dotted pattern, value-prop highlights, built-in back link - New shadcn components: Avatar, DropdownMenu, Skeleton - Move shared DraftCard to _components/draft-card.tsx (used by 2 portals) - Portal selector: remove Super Admin card, icon tiles, hover lift - All 4 login pages use react-hook-form + Zod + themed shell - Member nav restored to full 11-section list with icons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-20 18:20:06 +05:30
parent d7b5988858
commit 205418fc4e
50 changed files with 619 additions and 360 deletions
@@ -0,0 +1,100 @@
+import { apiFetch } from '@/app/_lib/api';
+import { redirect } from 'next/navigation';
+import { getToken } from '@/app/_lib/api';
+import { DraftCard } from '@/app/_components/draft-card';
+import Link from 'next/link';
+
+type DraftType = 'EVENT' | 'SEVA_TASK' | 'FAQ_ITEM';
+
+interface Draft {
+  id: string;
+  type: DraftType;
+  status: string;
+  proposedJson: Record<string, any>;
+  confidence: number | null;
+  createdAt: string;
+  sourceMessage: {
+    id: string;
+    content: string;
+    senderName: string | null;
+    createdAt: string;
+  };
+}
+
+const TABS: { label: string; value: DraftType | 'ALL' }[] = [
+  { label: 'All', value: 'ALL' },
+  { label: 'Events', value: 'EVENT' },
+  { label: 'Seva Tasks', value: 'SEVA_TASK' },
+  { label: 'FAQs', value: 'FAQ_ITEM' },
+];
+
+async function fetchDrafts(type?: DraftType): Promise<Draft[]> {
+  const query = new URLSearchParams({ status: 'PENDING_REVIEW' });
+  if (type) query.set('type', type);
+  const res = await apiFetch(`/admin/drafts?${query}`);
+  if (!res.ok) return [];
+  return (await res.json()) as Draft[];
+}
+
+export default async function DraftsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ type?: string }>;
+}) {
+  const token = await getToken();
+  if (!token) redirect('/login');
+
+  const { type } = await searchParams;
+  const activeType = (type as DraftType) ?? undefined;
+  const drafts = await fetchDrafts(activeType);
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-gray-900">AI Content Drafts</h1>
+          <p className="text-sm text-gray-500 mt-0.5">
+            Events, seva tasks, and FAQs auto-detected from WhatsApp messages
+          </p>
+        </div>
+        <Link href="/admin" className="text-sm text-indigo-600 hover:underline">← Admin</Link>
+      </div>
+
+      {/* Type filter tabs */}
+      <div className="flex gap-1 border-b border-gray-200">
+        {TABS.map((tab) => {
+          const href = tab.value === 'ALL' ? '/admin/drafts' : `/admin/drafts?type=${tab.value}`;
+          const isActive = (tab.value === 'ALL' && !activeType) || tab.value === activeType;
+          return (
+            <Link
+              key={tab.value}
+              href={href}
+              className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                isActive
+                  ? 'border-indigo-600 text-indigo-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {tab.label}
+            </Link>
+          );
+        })}
+      </div>
+
+      {drafts.length === 0 ? (
+        <div className="text-center py-20 text-gray-400">
+          <p className="text-sm font-medium">No pending drafts</p>
+          <p className="text-xs mt-1">
+            Drafts appear here when the AI detects events, volunteer asks, or FAQ patterns in group messages.
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {drafts.map((d) => (
+            <DraftCard key={d.id} draft={d} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}