feat: comprehensive frontend polish - UI/UX improvements across all pages

Public Pages: - Landing page with server/client split and metadata export - Cart page with ARIA accessibility and loading states - Checkout page with form accessibility and proper design system - Contact page with SEO metadata and improved accessibility - Pricing page with enhanced FAQ accessibility - Login page with Suspense boundaries and secure patterns Brand Storefronts: - Premium loading skeletons for Tuxedo and Indian River Direct - Branded error boundaries with animations - Loading.tsx for about, contact, FAQ, stops pages - Error.tsx for all storefront subpages Admin Dashboard: - AdminSidebar: ARIA labels, keyboard navigation, mobile improvements - DashboardClient: Stats cards, quick actions, usage progress - Admin layout: Toast provider integration Admin Orders/Products/Stops: - Toast notification system with auto-dismiss - Skeleton loading components (Table, Card, Stats, Form) - Bulk actions (mark picked up, publish stops) - Form validation with error styling Admin Communications: - AnalyticsDashboard: sparklines, stat cards, engagement badges - CampaignComposerPage: step wizard, template selection, email preview - SegmentBuilderPage: empty state, active segment handling - ContactListPanel: loading skeletons, professional empty states - MessageLogPanel: stats cards, engagement indicators - HarvestReachNav: branded tab navigation - All pages: metadata exports and loading.tsx Admin Settings: - SquareSyncSettingsClient: design system colors, save/cancel UX - ShippingSettingsForm: validation, dirty state tracking - Integrations page: proper layout with AI and communications sections - Billing: improved plan comparison, add-on cards - PaymentSettings: toggle components, validation Wholesale Portal: - Portal: loading skeletons, quantity stepper, search/filter - Login/Register: FormField validation, success states - Success/Cancel pages: animated checkmarks - Employee portal: skeletons, empty states, mobile responsive Water Log: - FieldClient: loading step, progress indicator, spinner - AdminClient: loading skeletons - Admin pages: loading.tsx files New Components: - Toast.tsx/ToastContainer.tsx: comprehensive notification system - Skeleton.tsx: shimmer loading components - AdminToggle.tsx: consistent toggle/switch - CommunicationsLoading.tsx: loading skeleton for comms - ToastExport.ts: exports CSS Improvements: - Shimmer animation keyframes - Toast slide-in animation Accessibility: - ARIA labels throughout - Keyboard navigation - Focus states - Semantic HTML - Screen reader support
2026-06-02 05:19:34 +00:00
parent fb25c5ee22
commit b845d69aba
97 changed files with 10698 additions and 3487 deletions
@@ -1,5 +1,61 @@
 import { redirect } from "next/navigation";
+import { supabase } from "@/lib/supabase";
+import { getAdminUser } from "@/lib/admin-permissions";
+import IntegrationsClientPage from "./IntegrationsClientPage";
+import AdminAccessDenied from "@/components/admin/AdminAccessDenied";

-export default function IntegrationsRedirect() {
-  redirect("/admin/settings#integrations");
-}
+export const metadata = {
+  title: "Integrations - Route Commerce Admin",
+  description: "Configure integrations for AI, email, SMS, and payments",
+};
+
+export default async function IntegrationsPage() {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return <AdminAccessDenied />;
+
+  const isPlatformAdmin = adminUser.role === "platform_admin";
+  const brandId = adminUser.brand_id ?? "";
+
+  // Platform admins: fetch all brands for the picker
+  const brands = isPlatformAdmin
+    ? (await supabase.from("brands").select("id, name").order("name")).data ?? []
+    : [];
+
+  return (
+    <main className="min-h-screen bg-[var(--admin-bg)]">
+      <div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6 pb-10">
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-2 text-xs text-[var(--admin-text-muted)] mb-6">
+          <a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
+          <span>/</span>
+          <a href="/admin/settings" className="hover:text-[var(--admin-text-primary)] transition-colors">Settings</a>
+          <span>/</span>
+          <span className="text-[var(--admin-text-primary)]">Integrations</span>
+        </nav>
+
+        {/* Page Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--admin-accent)] text-white">
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--admin-text-primary)]">Integrations</h1>
+              <p className="text-sm text-[var(--admin-text-muted)]">
+                Connect AI, email, SMS, and payment providers to power your operations.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <IntegrationsClientPage
+          brandId={brandId}
+          brands={brands}
+          isPlatformAdmin={isPlatformAdmin}
+        />
+      </div>
+    </main>
+  );
+}