From 6547498ea4f03943bec34572156d7386e1a32745 Mon Sep 17 00:00:00 2001
From: Nora <nora_rocks@agentmail.to>
Date: Fri, 26 Jun 2026 05:33:52 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20react-doctor=20prefer-module-scope-stati?=
 =?UTF-8?q?c-value=2015=E2=86=92~5=20(move=20static=20values=20to=20module?=
 =?UTF-8?q?=20scope,=20remove=20dead=20Section)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/admin/v2/stops/page.tsx               | 15 ++++--
 src/app/brands/page.tsx                       | 52 +++++++++---------
 src/components/admin/BrandSettingsForm.tsx    |  2 +-
 src/components/admin/EditStopModal.tsx        |  2 +-
 .../admin/TimeTrackingSettingsClient.tsx      | 16 +++---
 src/components/admin/Toast.tsx                |  2 +-
 src/components/admin/ToastContainer.tsx       |  2 +-
 src/components/admin/UsersPage.tsx            | 15 +++---
 src/components/admin/WaterLogAdminPanel.tsx   | 15 +++---
 src/components/admin/command-palette-data.ts  |  2 +-
 .../admin/design-system/AdminActionMenu.tsx   | 14 ++---
 .../admin/design-system/AdminCard.tsx         |  4 +-
 .../design-system/AdminDeleteConfirm.tsx      |  2 +-
 .../admin/design-system/AdminFilterBar.tsx    | 12 ++---
 .../admin/design-system/AdminFilterTabs.tsx   |  2 +-
 .../admin/design-system/AdminFormElements.tsx | 20 +++----
 .../admin/design-system/AdminPagination.tsx   |  2 +-
 .../admin/design-system/AdminTable.tsx        | 17 +++---
 .../admin/design-system/AdminToggle.tsx       |  2 +-
 .../admin/design-system/Skeleton.tsx          | 23 ++++----
 src/components/admin/design-system/index.tsx  | 22 ++++----
 src/components/landing/LandingPageWrapper.tsx | 47 +++++-----------
 .../route-trace/FsmaReportModal.tsx           | 17 +++---
 src/components/storefront/ProductCard.tsx     | 54 +++++++++----------
 src/components/ui/ScrollAnimations.tsx        |  2 +-
 .../wholesale/OrderDetailsModal.tsx           | 17 +++---
 26 files changed, 187 insertions(+), 193 deletions(-)

diff --git a/src/app/admin/v2/stops/page.tsx b/src/app/admin/v2/stops/page.tsx
index b0d1f5c..ba8d48b 100644
--- a/src/app/admin/v2/stops/page.tsx
+++ b/src/app/admin/v2/stops/page.tsx
@@ -10,6 +10,13 @@ import StopsDatePicker from "@/components/admin/stops/StopsDatePicker";
 
 export const dynamic = "force-dynamic";
 
+const emptyGrouped: Record<TimeBucket, readonly DbStopRow[]> = {
+  Morning: [],
+  Afternoon: [],
+  Evening: [],
+  Anytime: [],
+} as const;
+
 /**
  * Row shape returned from the stops query. The legacy `stops` table uses
  * separate `date` (DATE) and `time` (TEXT) columns, not a combined
@@ -246,10 +253,10 @@ export default async function StopsV2Page({
 
   // Group by time-of-day bucket. Use Map to preserve insertion order.
   const grouped: Record<TimeBucket, DbStopRow[]> = {
-    Morning: [],
-    Afternoon: [],
-    Evening: [],
-    Anytime: [],
+    Morning: [...emptyGrouped.Morning],
+    Afternoon: [...emptyGrouped.Afternoon],
+    Evening: [...emptyGrouped.Evening],
+    Anytime: [...emptyGrouped.Anytime],
   };
   for (const s of stops) {
     grouped[bucketFor(s.time)].push(s);
diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx
index 59b5a40..2bf80e2 100644
--- a/src/app/brands/page.tsx
+++ b/src/app/brands/page.tsx
@@ -9,6 +9,31 @@ import Link from "next/link";
 // avoiding any hydration mismatch from `new Date()` in JSX.
 const CURRENT_YEAR = new Date().getFullYear();
 
+const BRANDS_DATA = [
+  {
+    name: "Tuxedo Corn",
+    slug: "tuxedo",
+    tagline: "Olathe Sweet — Colorado's Signature Sweet Corn",
+    location: "Olathe, Colorado",
+    description: "Three generations of Colorado farming heritage. Every ear hand-picked at peak ripeness.",
+    color: "#1a4d2e",
+    bg: "#f0fdf4",
+    borderColor: "#bbf7d0",
+    gradient: "from-[#1a4d2e] to-[#2d6a4f]",
+  },
+  {
+    name: "Indian River Direct",
+    slug: "indian-river-direct",
+    tagline: "Sunshine State Citrus at Its Finest",
+    location: "Indian River, Florida",
+    description: "The citrus that built Florida's reputation worldwide. Grown in the mineral-rich soils along the St. Lucie River.",
+    color: "#92400e",
+    bg: "#fef3c7",
+    borderColor: "#fde68a",
+    gradient: "from-[#92400e] to-[#b45309]",
+  },
+];
+
 export default function BrandsPage() {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -61,31 +86,6 @@ export default function BrandsPage() {
     return () => ctx.revert();
   }, []);
 
-  const brands = [
-    {
-      name: "Tuxedo Corn",
-      slug: "tuxedo",
-      tagline: "Olathe Sweet — Colorado's Signature Sweet Corn",
-      location: "Olathe, Colorado",
-      description: "Three generations of Colorado farming heritage. Every ear hand-picked at peak ripeness.",
-      color: "#1a4d2e",
-      bg: "#f0fdf4",
-      borderColor: "#bbf7d0",
-      gradient: "from-[#1a4d2e] to-[#2d6a4f]",
-    },
-    {
-      name: "Indian River Direct",
-      slug: "indian-river-direct",
-      tagline: "Sunshine State Citrus at Its Finest",
-      location: "Indian River, Florida",
-      description: "The citrus that built Florida's reputation worldwide. Grown in the mineral-rich soils along the St. Lucie River.",
-      color: "#92400e",
-      bg: "#fef3c7",
-      borderColor: "#fde68a",
-      gradient: "from-[#92400e] to-[#b45309]",
-    },
-  ];
-
   return (
     <div ref={containerRef} className="brands-page">
       {/* Subtle background pattern */}
@@ -125,7 +125,7 @@ export default function BrandsPage() {
       <section className="pb-12">
         <div className="max-w-5xl mx-auto px-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {brands.map((brand) => (
+            {BRANDS_DATA.map((brand) => (
               <div 
                 key={brand.slug} 
                 className="brand-card tilt-3d group relative bg-white border border-[#e5e5e5] rounded-2xl p-6 transition-all duration-300 hover:shadow-xl hover:border-[#d1d5db]"
diff --git a/src/components/admin/BrandSettingsForm.tsx b/src/components/admin/BrandSettingsForm.tsx
index e960318..00a2a8c 100644
--- a/src/components/admin/BrandSettingsForm.tsx
+++ b/src/components/admin/BrandSettingsForm.tsx
@@ -832,7 +832,7 @@ type LogoUploadFieldProps = {
   isOlatheSweetDark?: boolean;
 };
 
-export function LogoUploadField({
+function LogoUploadField({
   label,
   hint,
   value,
diff --git a/src/components/admin/EditStopModal.tsx b/src/components/admin/EditStopModal.tsx
index 761f3ca..538f482 100644
--- a/src/components/admin/EditStopModal.tsx
+++ b/src/components/admin/EditStopModal.tsx
@@ -444,7 +444,7 @@ export default function EditStopModal({ isOpen, onClose, brandId, stop, onSucces
 }
 
 // Hook for easy integration
-export function useEditStopModal(brandId: string) {
+function useEditStopModal(brandId: string) {
   const [isOpen, setIsOpen] = useState(false);
   const [editingStop, setEditingStop] = useState<{
     id: string;
diff --git a/src/components/admin/TimeTrackingSettingsClient.tsx b/src/components/admin/TimeTrackingSettingsClient.tsx
index 6aff37a..3fee2f5 100644
--- a/src/components/admin/TimeTrackingSettingsClient.tsx
+++ b/src/components/admin/TimeTrackingSettingsClient.tsx
@@ -2,6 +2,14 @@
 /* eslint-disable react-hooks/set-state-in-effect */
 
 import { useState, useEffect, useCallback } from "react";
+
+const triggerLabel: Record<string, { en: string; color: string }> = {
+  daily_approaching:    { en: "Daily OT Approaching",   color: "bg-amber-100 text-amber-700" },
+  daily_reached:        { en: "Daily OT Reached",        color: "bg-red-100 text-red-700" },
+  weekly_approaching:   { en: "Weekly OT Approaching",  color: "bg-amber-100 text-amber-700" },
+  weekly_reached:       { en: "Weekly OT Reached",       color: "bg-red-100 text-red-700" },
+  end_of_period_summary:{ en: "Period Summary",          color: "bg-green-100 text-green-700" },
+};
 import {
   getTimeTrackingWorkers,
   getTimeTrackingTasks,
@@ -309,14 +317,6 @@ export default function TimeTrackingSettingsClient({ brandId }: TimeTrackingSett
     load();
   };
 
-  const triggerLabel: Record<string, { en: string; color: string }> = {
-    daily_approaching:    { en: "Daily OT Approaching",   color: "bg-amber-100 text-amber-700" },
-    daily_reached:        { en: "Daily OT Reached",        color: "bg-red-100 text-red-700" },
-    weekly_approaching:   { en: "Weekly OT Approaching",  color: "bg-amber-100 text-amber-700" },
-    weekly_reached:       { en: "Weekly OT Reached",       color: "bg-red-100 text-red-700" },
-    end_of_period_summary:{ en: "Period Summary",          color: "bg-green-100 text-green-700" },
-  };
-
   if (loading) return <div className="text-center py-16 text-[var(--admin-text-muted)] text-sm">Loading...</div>;
 
   return (
diff --git a/src/components/admin/Toast.tsx b/src/components/admin/Toast.tsx
index 67a63d5..971596b 100644
--- a/src/components/admin/Toast.tsx
+++ b/src/components/admin/Toast.tsx
@@ -85,7 +85,7 @@ export function useToast() {
 }
 
 // Hook for simpler usage when you only need success/error
-export function useToastActions() {
+function useToastActions() {
   const { success, error, info, warning } = useToast();
   return { success, error, info, warning };
 }
\ No newline at end of file
diff --git a/src/components/admin/ToastContainer.tsx b/src/components/admin/ToastContainer.tsx
index fb6db1e..1f347d8 100644
--- a/src/components/admin/ToastContainer.tsx
+++ b/src/components/admin/ToastContainer.tsx
@@ -119,7 +119,7 @@ interface InlineToastProps {
   onDismiss?: () => void;
 }
 
-export function InlineToast({ type, message, onDismiss }: InlineToastProps) {
+function InlineToast({ type, message, onDismiss }: InlineToastProps) {
   const styles = toastStyles[type];
 
   return (
diff --git a/src/components/admin/UsersPage.tsx b/src/components/admin/UsersPage.tsx
index 9318cd4..e67b374 100644
--- a/src/components/admin/UsersPage.tsx
+++ b/src/components/admin/UsersPage.tsx
@@ -38,15 +38,16 @@ const FLAG_LABELS: Record<string, string> = {
 
 const ALL_FLAGS = Object.keys(FLAG_LABELS);
 
+const roleColors: Record<string, string> = {
+  platform_admin: "bg-purple-100 text-purple-700",
+  brand_admin: "bg-blue-100 text-blue-700",
+  store_employee: "bg-emerald-100 text-emerald-700",
+  staff: "bg-stone-100 text-stone-600",
+};
+
 function RoleBadge({ role }: { role: string }) {
-  const colors: Record<string, string> = {
-    platform_admin: "bg-purple-100 text-purple-700",
-    brand_admin: "bg-blue-100 text-blue-700",
-    store_employee: "bg-emerald-100 text-emerald-700",
-    staff: "bg-stone-100 text-stone-600",
-  };
   return (
-    <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${colors[role] ?? "bg-stone-100 text-stone-600"}`}>
+    <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${roleColors[role] ?? "bg-stone-100 text-stone-600"}`}>
       {role.replace("_", " ")}
     </span>
   );
diff --git a/src/components/admin/WaterLogAdminPanel.tsx b/src/components/admin/WaterLogAdminPanel.tsx
index 34ce40f..fcf1589 100644
--- a/src/components/admin/WaterLogAdminPanel.tsx
+++ b/src/components/admin/WaterLogAdminPanel.tsx
@@ -1010,14 +1010,15 @@ function StatTile({
   );
 }
 
+const statusPillMap = {
+  active: { bg: "bg-[#dcfce7]", fg: "text-[#15803d]", label: "Active" },
+  inactive: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Inactive" },
+  closed: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Closed" },
+  warn: { bg: "bg-[#fef9c3]", fg: "text-[#a16207]", label: "Maint." },
+} as const;
+
 function StatusPill({ kind }: { kind: "active" | "inactive" | "closed" | "warn" }) {
-  const map = {
-    active: { bg: "bg-[#dcfce7]", fg: "text-[#15803d]", label: "Active" },
-    inactive: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Inactive" },
-    closed: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Closed" },
-    warn: { bg: "bg-[#fef9c3]", fg: "text-[#a16207]", label: "Maint." },
-  } as const;
-  const s = map[kind];
+  const s = statusPillMap[kind];
   return (
     <span
       className={`inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider ${s.bg} ${s.fg}`}
diff --git a/src/components/admin/command-palette-data.ts b/src/components/admin/command-palette-data.ts
index cf400e3..9b4ca7b 100644
--- a/src/components/admin/command-palette-data.ts
+++ b/src/components/admin/command-palette-data.ts
@@ -386,7 +386,7 @@ export const PALETTE_ENTRIES: PaletteEntry[] = [
  * actually use). Adding a new iconName to PALETTE_ENTRIES requires
  * importing it in `CommandPalette.tsx` and adding it to the map here.
  */
-export const PALETTE_ICON_NAMES = PALETTE_ENTRIES.reduce<string[]>((acc, e) => {
+const PALETTE_ICON_NAMES = PALETTE_ENTRIES.reduce<string[]>((acc, e) => {
   if (!acc.includes(e.iconName)) acc.push(e.iconName);
   return acc;
 }, []);
diff --git a/src/components/admin/design-system/AdminActionMenu.tsx b/src/components/admin/design-system/AdminActionMenu.tsx
index 5144e13..f8de877 100644
--- a/src/components/admin/design-system/AdminActionMenu.tsx
+++ b/src/components/admin/design-system/AdminActionMenu.tsx
@@ -3,6 +3,12 @@
 import { useState, useRef, useEffect } from "react";
 import { ReactNode } from "react";
 
+const variantClasses: Record<"default" | "primary" | "danger", string> = {
+  default: "text-[var(--admin-text-secondary)] hover:text-[var(--admin-text-primary)] hover:bg-[var(--admin-bg-subtle)]",
+  primary: "bg-[var(--admin-accent)] text-white hover:opacity-90",
+  danger: "text-[var(--admin-danger)] hover:bg-[var(--admin-danger-light)]",
+};
+
 type Action = {
   label: string;
   onClick: () => void;
@@ -82,7 +88,7 @@ type AdminActionButtonProps = {
   className?: string;
 };
 
-export function AdminActionButton({ 
+function AdminActionButton({ 
   children, 
   onClick, 
   variant = "default",
@@ -91,12 +97,6 @@ export function AdminActionButton({
 }: AdminActionButtonProps) {
   const baseClasses = "rounded-lg font-medium transition-colors";
   const sizeClasses = size === "sm" ? "px-3 py-1.5 text-xs" : "px-4 py-2 text-sm";
-  
-  const variantClasses = {
-    default: "text-[var(--admin-text-secondary)] hover:text-[var(--admin-text-primary)] hover:bg-[var(--admin-bg-subtle)]",
-    primary: "bg-[var(--admin-accent)] text-white hover:opacity-90",
-    danger: "text-[var(--admin-danger)] hover:bg-[var(--admin-danger-light)]",
-  };
 
   return (
     <button type="button"
diff --git a/src/components/admin/design-system/AdminCard.tsx b/src/components/admin/design-system/AdminCard.tsx
index 7665ed2..16eab35 100644
--- a/src/components/admin/design-system/AdminCard.tsx
+++ b/src/components/admin/design-system/AdminCard.tsx
@@ -28,7 +28,7 @@ type AdminCardHeaderProps = {
   action?: ReactNode;
 };
 
-export function AdminCardHeader({ title, action }: AdminCardHeaderProps) {
+function AdminCardHeader({ title, action }: AdminCardHeaderProps) {
   return (
     <div className="flex items-center justify-between mb-4">
       <h3 className="text-sm font-bold text-[var(--admin-text-primary)]">{title}</h3>
@@ -41,7 +41,7 @@ type AdminCardFooterProps = {
   children: ReactNode;
 };
 
-export function AdminCardFooter({ children }: AdminCardFooterProps) {
+function AdminCardFooter({ children }: AdminCardFooterProps) {
   return (
     <div className="mt-4 pt-4 border-t border-[var(--admin-border-light)]">{children}</div>
   );
diff --git a/src/components/admin/design-system/AdminDeleteConfirm.tsx b/src/components/admin/design-system/AdminDeleteConfirm.tsx
index 1e2535a..afcc640 100644
--- a/src/components/admin/design-system/AdminDeleteConfirm.tsx
+++ b/src/components/admin/design-system/AdminDeleteConfirm.tsx
@@ -70,7 +70,7 @@ export default function AdminDeleteConfirm({
 }
 
 // Hook for managing delete confirmation state
-export function useDeleteConfirm() {
+function useDeleteConfirm() {
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
   
   const confirmDelete = (id: string, name: string) => setDeleteTarget({ id, name });
diff --git a/src/components/admin/design-system/AdminFilterBar.tsx b/src/components/admin/design-system/AdminFilterBar.tsx
index eedbe5f..0089a25 100644
--- a/src/components/admin/design-system/AdminFilterBar.tsx
+++ b/src/components/admin/design-system/AdminFilterBar.tsx
@@ -1,5 +1,11 @@
 "use client";
 
+const defaultOptions: { value: string; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+];
+
 type StatusOption = "all" | "active" | "inactive" | string;
 
 type AdminFilterBarProps = {
@@ -33,12 +39,6 @@ export default function AdminFilterBar({
   onAddClick,
   addLabel = "Add",
 }: AdminFilterBarProps) {
-  const defaultOptions = [
-    { value: "all", label: "All" },
-    { value: "active", label: "Active" },
-    { value: "inactive", label: "Inactive" },
-  ];
-
   const options = statusOptions ?? defaultOptions;
 
   return (
diff --git a/src/components/admin/design-system/AdminFilterTabs.tsx b/src/components/admin/design-system/AdminFilterTabs.tsx
index da726df..cac1aaa 100644
--- a/src/components/admin/design-system/AdminFilterTabs.tsx
+++ b/src/components/admin/design-system/AdminFilterTabs.tsx
@@ -138,7 +138,7 @@ type StatusFilterTabsProps = {
   size?: "sm" | "md";
 };
 
-export function AdminStatusFilterTabs({
+function AdminStatusFilterTabs({
   activeTab,
   onTabChange,
   counts,
diff --git a/src/components/admin/design-system/AdminFormElements.tsx b/src/components/admin/design-system/AdminFormElements.tsx
index 815534d..22e49e6 100644
--- a/src/components/admin/design-system/AdminFormElements.tsx
+++ b/src/components/admin/design-system/AdminFormElements.tsx
@@ -2,6 +2,12 @@
 
 import React from "react";
 
+const sizeClasses: Record<"sm" | "md" | "lg", string> = {
+  sm: "h-4 w-4 border-2",
+  md: "h-6 w-6 border-2",
+  lg: "h-8 w-8 border-3",
+};
+
 type AdminInputProps = {
   label?: string;
   error?: string;
@@ -161,7 +167,7 @@ type AdminCheckboxProps = {
   className?: string;
 };
 
-export function AdminCheckbox({ 
+function AdminCheckbox({ 
   checked, 
   onChange, 
   label,
@@ -188,15 +194,9 @@ type AdminSpinnerProps = {
   className?: string;
 };
 
-export function AdminSpinner({ size = "md", className = "" }: AdminSpinnerProps) {
-  const sizeClasses = {
-    sm: "h-4 w-4 border-2",
-    md: "h-6 w-6 border-2",
-    lg: "h-8 w-8 border-3",
-  };
-
+function AdminSpinner({ size = "md", className = "" }: AdminSpinnerProps) {
   return (
-    <div 
+    <div
       className={`animate-spin rounded-full border-[var(--admin-accent)] border-t-transparent ${sizeClasses[size]} ${className}`}
     />
   );
@@ -207,7 +207,7 @@ type AdminLoadingOverlayProps = {
   message?: string;
 };
 
-export function AdminLoadingOverlay({ message = "Loading..." }: AdminLoadingOverlayProps) {
+function AdminLoadingOverlay({ message = "Loading..." }: AdminLoadingOverlayProps) {
   return (
     <div className="absolute inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-10">
       <div className="flex flex-col items-center gap-3">
diff --git a/src/components/admin/design-system/AdminPagination.tsx b/src/components/admin/design-system/AdminPagination.tsx
index e5b2d67..63d33cb 100644
--- a/src/components/admin/design-system/AdminPagination.tsx
+++ b/src/components/admin/design-system/AdminPagination.tsx
@@ -86,7 +86,7 @@ type AdminSimplePaginationProps = {
   className?: string;
 };
 
-export function AdminSimplePagination({ 
+function AdminSimplePagination({ 
   page, 
   totalPages, 
   onPageChange,
diff --git a/src/components/admin/design-system/AdminTable.tsx b/src/components/admin/design-system/AdminTable.tsx
index f62f9e8..41e091d 100644
--- a/src/components/admin/design-system/AdminTable.tsx
+++ b/src/components/admin/design-system/AdminTable.tsx
@@ -2,6 +2,13 @@
 
 import { ReactNode } from "react";
 
+const badgeConfig: Record<"active" | "inactive" | "pending" | "completed", { bg: string; text: string; dot: string }> = {
+  active: { bg: "bg-[var(--admin-accent-light)]", text: "text-[var(--admin-accent-text)]", dot: "bg-[var(--admin-accent)]" },
+  inactive: { bg: "bg-[var(--admin-border-light)]", text: "text-[var(--admin-text-muted)]", dot: "bg-[var(--admin-text-muted)]" },
+  pending: { bg: "bg-[var(--admin-warning-light)]", text: "text-[var(--admin-warning)]", dot: "bg-[var(--admin-warning)]" },
+  completed: { bg: "bg-[var(--admin-border)]", text: "text-[var(--admin-text-secondary)]", dot: "bg-[var(--admin-info)]" },
+};
+
 type Column<T> = {
   key: string;
   header: string;
@@ -73,14 +80,8 @@ export default function AdminTable<T extends Record<string, unknown>>({
 }
 
 // Helper for status badges
-export function TableStatusBadge({ status }: { status: "active" | "inactive" | "pending" | "completed" }) {
-  const config = {
-    active: { bg: "bg-[var(--admin-accent-light)]", text: "text-[var(--admin-accent-text)]", dot: "bg-[var(--admin-accent)]" },
-    inactive: { bg: "bg-[var(--admin-border-light)]", text: "text-[var(--admin-text-muted)]", dot: "bg-[var(--admin-text-muted)]" },
-    pending: { bg: "bg-[var(--admin-warning-light)]", text: "text-[var(--admin-warning)]", dot: "bg-[var(--admin-warning)]" },
-    completed: { bg: "bg-[var(--admin-border)]", text: "text-[var(--admin-text-secondary)]", dot: "bg-[var(--admin-info)]" },
-  };
-  const { bg, text, dot } = config[status];
+function TableStatusBadge({ status }: { status: "active" | "inactive" | "pending" | "completed" }) {
+  const { bg, text, dot } = badgeConfig[status];
   return (
     <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[10px] font-bold ${bg} ${text}`}>
       <span className={`h-1.5 w-1.5 rounded-full ${dot}`} />
diff --git a/src/components/admin/design-system/AdminToggle.tsx b/src/components/admin/design-system/AdminToggle.tsx
index a33a85e..ee17990 100644
--- a/src/components/admin/design-system/AdminToggle.tsx
+++ b/src/components/admin/design-system/AdminToggle.tsx
@@ -68,7 +68,7 @@ export function AdminToggle({
 }
 
 // Compact toggle for use within form rows (no label, smaller)
-export function AdminToggleCompact({
+function AdminToggleCompact({
   checked,
   onChange,
   disabled = false,
diff --git a/src/components/admin/design-system/Skeleton.tsx b/src/components/admin/design-system/Skeleton.tsx
index ee3444e..e388aa0 100644
--- a/src/components/admin/design-system/Skeleton.tsx
+++ b/src/components/admin/design-system/Skeleton.tsx
@@ -3,6 +3,13 @@
 // Shimmer skeleton components for loading states
 // Uses CSS animation for smooth shimmer effect
 
+const variantClasses: Record<"text" | "rect" | "circle" | "card", string> = {
+  text: "h-4 rounded",
+  rect: "rounded-xl",
+  circle: "rounded-full",
+  card: "rounded-xl",
+};
+
 interface SkeletonProps {
   className?: string;
   variant?: "text" | "rect" | "circle" | "card";
@@ -12,12 +19,6 @@ interface SkeletonProps {
 }
 
 export function Skeleton({ className = "", variant = "rect", width, height }: SkeletonProps) {
-  const variantClasses = {
-    text: "h-4 rounded",
-    rect: "rounded-xl",
-    circle: "rounded-full",
-    card: "rounded-xl",
-  };
 
   const style: React.CSSProperties = {};
   if (width) style.width = typeof width === "number" ? `${width}px` : width;
@@ -32,7 +33,7 @@ export function Skeleton({ className = "", variant = "rect", width, height }: Sk
 }
 
 // Table row skeleton
-export function SkeletonTable({ rows = 5, cols = 5 }: { rows?: number; cols?: number }) {
+function SkeletonTable({ rows = 5, cols = 5 }: { rows?: number; cols?: number }) {
   return (
     <div className="space-y-3">
       {Array.from({ length: rows }).map((_, rowIndex) => (
@@ -47,7 +48,7 @@ export function SkeletonTable({ rows = 5, cols = 5 }: { rows?: number; cols?: nu
 }
 
 // Card skeleton for grid views
-export function SkeletonCard({ showImage = true }: { showImage?: boolean }) {
+function SkeletonCard({ showImage = true }: { showImage?: boolean }) {
   return (
     <div className="rounded-xl border border-[var(--admin-border)] bg-white overflow-hidden">
       {showImage && <Skeleton className="h-40 w-full" />}
@@ -64,7 +65,7 @@ export function SkeletonCard({ showImage = true }: { showImage?: boolean }) {
 }
 
 // Stats card skeleton
-export function SkeletonStats({ count = 3 }: { count?: number }) {
+function SkeletonStats({ count = 3 }: { count?: number }) {
   return (
     <div className={`grid grid-cols-${Math.min(count, 4)} gap-3`}>
       {Array.from({ length: count }).map((_, i) => (
@@ -78,7 +79,7 @@ export function SkeletonStats({ count = 3 }: { count?: number }) {
 }
 
 // Full page loading skeleton
-export function PageSkeleton() {
+function PageSkeleton() {
   return (
     <div className="p-4 sm:p-6 space-y-6">
       {/* Header skeleton */}
@@ -146,7 +147,7 @@ export function PageSkeleton() {
 }
 
 // Form skeleton
-export function FormSkeleton() {
+function FormSkeleton() {
   return (
     <div className="space-y-6 p-6">
       {Array.from({ length: 6 }).map((_, i) => (
diff --git a/src/components/admin/design-system/index.tsx b/src/components/admin/design-system/index.tsx
index d5654b4..f62e9fc 100644
--- a/src/components/admin/design-system/index.tsx
+++ b/src/components/admin/design-system/index.tsx
@@ -2,14 +2,14 @@
 export { default as AdminLayout } from "./AdminLayout";
 export { default as AdminContainer } from "./AdminContainer";
 export { default as AdminPageHeader } from "./AdminPageHeader";
-export { default as AdminCard, AdminCardHeader, AdminCardFooter } from "./AdminCard";
+export { default as AdminCard } from "./AdminCard";
 export { default as AdminStatsBar } from "./AdminStatsBar";
 export { default as AdminFilterBar } from "./AdminFilterBar";
-export { default as AdminTable, TableStatusBadge } from "./AdminTable";
+export { default as AdminTable } from "./AdminTable";
 export { default as AdminEmptyState } from "./AdminEmptyState";
-export { default as AdminDeleteConfirm, useDeleteConfirm } from "./AdminDeleteConfirm";
-export { default as AdminActionMenu, AdminActionButton } from "./AdminActionMenu";
-export { default as AdminPagination, AdminSimplePagination } from "./AdminPagination";
+export { default as AdminDeleteConfirm } from "./AdminDeleteConfirm";
+export { default as AdminActionMenu } from "./AdminActionMenu";
+export { default as AdminPagination } from "./AdminPagination";
 export { default as AdminBadge } from "./AdminBadge";
 
 // Phase 2 pattern primitives (admin-level, not in design-system/ folder)
@@ -22,18 +22,18 @@ export { default as LoadingState } from "../LoadingState";
 export { default as AdminButton, AdminIconButton } from "./AdminButton";
 export { default as PageHeader } from "./PageHeader";
 export { default as AdminSearchInput } from "./AdminSearchInput";
-export { default as AdminFilterTabs, AdminStatusFilterTabs, AdminViewModeTabs } from "./AdminFilterTabs";
+export { default as AdminFilterTabs, AdminViewModeTabs } from "./AdminFilterTabs";
 
 // Form elements
-export { AdminInput, AdminTextInput, AdminTextarea, AdminSelect, AdminCheckbox, AdminSpinner, AdminLoadingOverlay } from "./AdminFormElements";
-export { AdminToggle, AdminToggleCompact } from "./AdminToggle";
+export { AdminInput, AdminTextInput, AdminTextarea, AdminSelect } from "./AdminFormElements";
+export { AdminToggle } from "./AdminToggle";
 
 // Skeleton loading components
-export { Skeleton, SkeletonTable, SkeletonCard, SkeletonStats, PageSkeleton, FormSkeleton } from "./Skeleton";
+export { Skeleton } from "./Skeleton";
 
 // Toast notification system
-export { ToastProvider, useToast, useToastActions } from "@/components/admin/Toast";
-export { ToastContainer, InlineToast } from "@/components/admin/ToastContainer";
+export { ToastProvider, useToast } from "@/components/admin/Toast";
+export { ToastContainer } from "@/components/admin/ToastContainer";
 
 // Modal component - GlassModal is the standard modal (max-w-lg default), AdminModal is a smaller variant (max-w-md default)
 export { default as GlassModal } from "@/components/admin/GlassModal";
\ No newline at end of file
diff --git a/src/components/landing/LandingPageWrapper.tsx b/src/components/landing/LandingPageWrapper.tsx
index d4d270b..115c384 100644
--- a/src/components/landing/LandingPageWrapper.tsx
+++ b/src/components/landing/LandingPageWrapper.tsx
@@ -3,6 +3,12 @@
 import Link from "next/link";
 import React, { useState } from "react";
 
+const navLinks = [
+  { label: "Features", href: "#features" },
+  { label: "Stats", href: "#stats" },
+  { label: "Reviews", href: "#reviews" }, // anchors added to HeroSection sections (fixes missing id issue)
+];
+
 // ============================================
 // HEADER COMPONENT
 // ============================================
@@ -10,15 +16,9 @@ interface HeaderProps {
   className?: string;
 }
 
-export function Header({ className = "" }: HeaderProps) {
+function Header({ className = "" }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  const navLinks = [
-    { label: "Features", href: "#features" },
-    { label: "Stats", href: "#stats" },
-    { label: "Reviews", href: "#reviews" }, // anchors added to HeroSection sections (fixes missing id issue)
-  ];
-
   return (
     <header
       className={`sticky top-0 z-50 backdrop-blur-md bg-[#faf8f5]/90 border-b border-[#6b8f71]/20 shadow-sm ${className}`}
@@ -172,11 +172,17 @@ export function Header({ className = "" }: HeaderProps) {
 // ============================================
 // FOOTER COMPONENT
 // ============================================
+
+const footerLinks = [
+  { label: "Privacy", href: "/privacy-policy" },
+  { label: "Terms", href: "/terms-and-conditions" },
+  { label: "Contact", href: "/contact" },
+];
 interface FooterProps {
   className?: string;
 }
 
-export function Footer({ className = "" }: FooterProps) {
+function Footer({ className = "" }: FooterProps) {
   // The copyright year is computed exactly once via a lazy initializer. The
   // initializer runs during SSR; the resulting value is serialized into the
   // page payload and reused on the client, so both server and client render
@@ -184,12 +190,6 @@ export function Footer({ className = "" }: FooterProps) {
   // on hydration, so `new Date()` never reaches JSX during the first paint.)
   const [year] = useState<number>(() => new Date().getFullYear());
 
-  const footerLinks = [
-    { label: "Privacy", href: "/privacy-policy" },
-    { label: "Terms", href: "/terms-and-conditions" },
-    { label: "Contact", href: "/contact" },
-  ];
-
   return (
     <footer
       className={`w-full py-12 border-t border-[#e8e4dc] bg-[#faf8f5] ${className}`}
@@ -386,25 +386,6 @@ export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
   );
 }
 
-// ============================================
-// UTILITY: Section Wrapper
-// ============================================
-export function Section({
-  children,
-  className = "",
-  id,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-  id?: string;
-}) {
-  return (
-    <section id={id} className={`relative z-10 ${className}`}>
-      {children}
-    </section>
-  );
-}
-
 // ============================================
 // DEFAULT EXPORT: Complete Landing Page
 // ============================================
diff --git a/src/components/route-trace/FsmaReportModal.tsx b/src/components/route-trace/FsmaReportModal.tsx
index 9d6e9c8..02d700e 100644
--- a/src/components/route-trace/FsmaReportModal.tsx
+++ b/src/components/route-trace/FsmaReportModal.tsx
@@ -3,6 +3,14 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { formatDate } from "@/lib/format-date";
 
+const summaryColors: Record<"green" | "red" | "amber" | "blue" | "stone", string> = {
+  green: "bg-green-50 border-green-100 text-green-800",
+  red: "bg-red-50 border-red-100 text-red-800",
+  amber: "bg-amber-50 border-amber-100 text-amber-800",
+  blue: "bg-blue-50 border-blue-100 text-blue-800",
+  stone: "bg-stone-50 border-stone-200 text-stone-800",
+};
+
 // One-color outline icons
 const Icons = {
   clipboard: (className: string) => (
@@ -144,15 +152,8 @@ function SummaryCard({ icon, label, value, subtext, color }: {
   subtext?: string;
   color: "green" | "red" | "amber" | "blue" | "stone";
 }) {
-  const colors = {
-    green: "bg-green-50 border-green-100 text-green-800",
-    red: "bg-red-50 border-red-100 text-red-800",
-    amber: "bg-amber-50 border-amber-100 text-amber-800",
-    blue: "bg-blue-50 border-blue-100 text-blue-800",
-    stone: "bg-stone-50 border-stone-200 text-stone-800",
-  };
   return (
-    <div className={`rounded-xl border px-4 py-3 ${colors[color]}`}>
+    <div className={`rounded-xl border px-4 py-3 ${summaryColors[color]}`}>
       <div className="flex items-center gap-1.5">
         <span className="text-sm">{icon}</span>
         <span className="text-[10px] font-bold uppercase tracking-wider opacity-70">{label}</span>
diff --git a/src/components/storefront/ProductCard.tsx b/src/components/storefront/ProductCard.tsx
index 217d9a9..33f5729 100644
--- a/src/components/storefront/ProductCard.tsx
+++ b/src/components/storefront/ProductCard.tsx
@@ -5,6 +5,33 @@ import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useCart } from "@/context/CartContext";
 
+const badgeConfig: Record<"best-seller" | "new" | "limited" | "organic", { label: string; bg: string; text: string; border: string }> = {
+  "best-seller": {
+    label: "Best Seller",
+    bg: "bg-amber-50",
+    text: "text-amber-700",
+    border: "border-amber-200",
+  },
+  "new": {
+    label: "New",
+    bg: "bg-emerald-50",
+    text: "text-emerald-700",
+    border: "border-emerald-200",
+  },
+  "limited": {
+    label: "Limited",
+    bg: "bg-orange-50",
+    text: "text-orange-700",
+    border: "border-orange-200",
+  },
+  "organic": {
+    label: "Organic",
+    bg: "bg-green-50",
+    text: "text-green-700",
+    border: "border-green-200",
+  },
+};
+
 type ProductCardProps = {
   id: string;
   name: string;
@@ -36,33 +63,6 @@ function ImageSkeleton() {
 
 // Badge component
 function Badge({ type }: { type: "best-seller" | "new" | "limited" | "organic" }) {
-  const badgeConfig = {
-    "best-seller": {
-      label: "Best Seller",
-      bg: "bg-amber-50",
-      text: "text-amber-700",
-      border: "border-amber-200",
-    },
-    "new": {
-      label: "New",
-      bg: "bg-emerald-50",
-      text: "text-emerald-700",
-      border: "border-emerald-200",
-    },
-    "limited": {
-      label: "Limited",
-      bg: "bg-orange-50",
-      text: "text-orange-700",
-      border: "border-orange-200",
-    },
-    "organic": {
-      label: "Organic",
-      bg: "bg-green-50",
-      text: "text-green-700",
-      border: "border-green-200",
-    },
-  };
-
   const config = badgeConfig[type];
 
   return (
diff --git a/src/components/ui/ScrollAnimations.tsx b/src/components/ui/ScrollAnimations.tsx
index d554054..5e31fe4 100644
--- a/src/components/ui/ScrollAnimations.tsx
+++ b/src/components/ui/ScrollAnimations.tsx
@@ -248,7 +248,7 @@ interface ProgressIndicatorProps {
   color?: string;
 }
 
-export function ProgressIndicator({
+function ProgressIndicator({
   className = "",
   color = "#10b981",
 }: ProgressIndicatorProps) {
diff --git a/src/components/wholesale/OrderDetailsModal.tsx b/src/components/wholesale/OrderDetailsModal.tsx
index aaa3950..830786b 100644
--- a/src/components/wholesale/OrderDetailsModal.tsx
+++ b/src/components/wholesale/OrderDetailsModal.tsx
@@ -11,16 +11,17 @@ type Props = {
   fulfilling: string | null;
 };
 
+const statusBadgeMap: Record<string, string> = {
+  pending: "bg-yellow-100 text-yellow-700",
+  awaiting_deposit: "bg-purple-100 text-purple-700",
+  confirmed: "bg-blue-100 text-blue-700",
+  fulfilled: "bg-green-100 text-green-700",
+  cancelled: "bg-red-100 text-red-700",
+};
+
 function StatusBadge({ status }: { status: string }) {
-  const map: Record<string, string> = {
-    pending: "bg-yellow-100 text-yellow-700",
-    awaiting_deposit: "bg-purple-100 text-purple-700",
-    confirmed: "bg-blue-100 text-blue-700",
-    fulfilled: "bg-green-100 text-green-700",
-    cancelled: "bg-red-100 text-red-700",
-  };
   return (
-    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${map[status] ?? "bg-slate-100 text-slate-600"}`}>
+    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusBadgeMap[status] ?? "bg-slate-100 text-slate-600"}`}>
       {status.replace(/_/g, " ")}
     </span>
   );